Membuat Toko Mebel Menggunakan Blogspot

Transkripsi

1 Membuat Toko Mebel Menggunakan Blogspot Ditulis Oleh Irvan Dwijaya dan Tim Bisnis Online Sukses Bisnis Online Consultant Website Toko Online Development Training dan Kursus Bisnis Online Digital Marketing Jasa SEO Irvan Dwijaya 1

2 Daftar Isi A. MEMBUAT POST... 5 B. MEMBUAT PAGE B. MEMBUAT PAGE CONTACT US DENGAN MAP C. MENGATUR DASAR LAYOUT DAN TEMPLATE D. MENGEDIT DAN MENGATUR LAYOUT E. MENGEDIT DAN MENGATUR TEMPLATE Irvan Dwijaya 2

3 BOD II Membuat Toko Online via Materi ini hanya ditujukan bagi peserta kursus BOS Academy. Materi ini ditingkatkan dengan keahlian yang sudah di pelajari dari BOD 1. Membuat website toko dengan blogspot, menggunakan fitur tambahan di BOD II : Tahapan Membuat Toko Online di Blogspot. Wajib mempunyai google yg berfungsi untuk semua akun, Memiliki product dan penyimpanan file untuk product tersebut, seperti flashdisk atau memory card. Browser yg digunakan Modzilla Contoh berikut toko online dengan blogspot yang akan di buat. Irvan Dwijaya 3

4 Untuk membuat web seperti contoh diatas, harus membuat Posting dan Pages Terlebih Dahulu. Ikuti langkah berikut: Irvan Dwijaya 4

5 A. MEMBUAT POST A.1 Irvan Dwijaya 5

6 Klik New Post Setelah Masuk pada Postingan Berilah Judul pada Post Selamat datang. A.2 Lalu Isi Postingan Tersebut dengan kata yg bertema selamat datang dan berjualan,: A.3 A.4 Masukan Gambar & Isi Teks Setelah Terisi Konten Pada Post: A.5 Irvan Dwijaya 6

7 Kemudian setelah di Publis Buat Post Bari Lagi A.6 Yg berisikan Article contoh: Article Mengenal Jenis Bahan Mebel Atau Furniture A.7 Berfungsi sebagai Pembatas si Pembaca di halaman depan yg penuh dengan Postingan. Contoh Hasil Postingan Lihat Di halaman Sebelumnya. Irvan Dwijaya 7

8 Contoh Pembatasan Tampilan Postingan, Postingan yang sudah dibuat sebelumnya A.8 Irvan Dwijaya 8

9 Lanjut Membuat Postingan dengan Artikel Selanjutnya yg Berjudul Tips Memilih Bahan Furniture Sama Seperti Contoh Diatas Menggunakan Pembatas, Atau Jump Break A.9 Irvan Dwijaya 9

10 Membuat Postingan dengan Video dari youtube A.10 Irvan Dwijaya 10

11 Setelah Masuk pada Postingan Berilah Judul pada Post Desain Unik Klik pada insert a video A.11 Akan menampilkan pilihan file: Klik From youtube Paste atau tempelkan link video dari youtube A.12 Irvan Dwijaya 11

12 Paste link, klik Search kemudian akan muncul tampilan video. A.13 Selanjutnya Edit postingan seperti gambar berikut: A.14 Irvan Dwijaya 12

13 B. MEMBUAT PAGE MEMBUAT PAGE BELANJA B.1 Pada Menu Pages yg Pertama Kita Product dahulu, Product semakin banyak makan Semakin bagus webs blogspot yg kita buat. Berikut Pembuatan Pages Menu Belanja. Postingan Standar dengan gaya teks sederhana B.2 Irvan Dwijaya 13

14 Berikut gambar yang sudah di edit dengan gaya font dan warna Postingan dengan Gaya Webtoko Online B.3 Keterangan: Berikut Penjelasan dari Gambar diatas. 1. Panah Berwarna Biru Gambar dengan ditambahkan Back LINK dari Contact Us 2. Panah Berwarna Hitam Teks dengan gaya tebal 3. Panah Berwarna Hijau Teks dengan gaya garis tengah 4. Panah Berwarna Orange Teks yang diberi Warna, Pada Menu Pages Selanjutnya Buatlah Isi dari Content yg sama dengan contoh diatas, Isi Page tersebut dengan Product dan Gaya huruf yg lebih baik. B.4 Irvan Dwijaya 14

15 B. MEMBUAT PAGE CONTACT US DENGAN MAP C.1 Irvan Dwijaya 15

16 Klik Pada Html C.2 Buka Tab baru Masuk Ke google Map. Cari Lokasi Di mana Toko anda, atau Tempat Anda Berada. Kemudian Place Pilih pada Share Or Embed. Untuk Embed Lokasi anda di Contact Us C.3 Irvan Dwijaya 16

17 Selanjutnya muncul tampilan seperti ini: Pilih Embed C.4 Copy Teks Tersebut klik Kanan COPY (CTRL C ) C.5 Setelah Copy Teks yg terblok. Buka Tab pada Blogger Contact US Irvan Dwijaya 17

18 Pada Pages Contact US Klik pada bagian bawah <br / > C.6 Paste Atau Tembel Kode Map yg Sudah di Embed C.7 Lalu setelah di Paste Pilih Compose Irvan Dwijaya 18

19 C.8 Setelah DI Compose Terbentuklah Sebuah Peta pada Contact Us kita, Kemudian Isi Teks Contact Us tersebut dengan gambat dan Teks Contoh: C.9 Irvan Dwijaya 19

20 C.10 Lalu Publish C. MENGATUR DASAR LAYOUT DAN TEMPLATE Setelah Membuat Postingan dan Pages. Lanjut dengan Layouts atau tata letak pada blog. D.1 Edit pada Layouts utama: Pilih Favicon dahulu. Irvan Dwijaya 20

21 D.2 Untuk Ukuran gambar pada Favicon 100x100 pixel dan tidak melebihi kapasitas 100kb. Masukan Favicon yg sudah disediakan dalam folder. Setelah Lanjut ke Header. Pilih Header Lalu Telusuri Gambar. D.3 Irvan Dwijaya 21

22 Masukan Gambar Header yg sudah di sediakan di Folder Header Setelah Memilih Header Pilih Cross Column D.4 Cross Column Pilih Pages Irvan Dwijaya 22

23 1 2 3 Berilah Centang Pada Tiga Pages saja. Berilah Centang dengan Urutan Sesuai urutan Nomer Setelah Mengatur Pages, Lalu Edit pada bagian Sidebar right D.5 Klik Edit Klik Remove D.6 Irvan Dwijaya 23

24 Remove semua sidebar yg di samping kanan, Untuk Tahapan Selanjutnya sementara langsung ke menu Template. D.7 Kemudian. Pilih pada Customise D.8 Irvan Dwijaya 24

25 Pada Bagian Customise Pilih Template. Pilih Template Klik Kemudian D.9 D.10 Pilih Template Travel, Kemudian pilihan kedua dari kiri Setelah Memilih Template Sesuaikan Background yg kita pilih, Klik: D.11 Irvan Dwijaya 25

26 Pilih Tekstur ikuti gambar yg sesuai dengan contoh D.12 Setelah itu, lanjut memilih layouts di pengaturan template Lihat gambar dibawah ini: Kemuadian Apply to Blog D.13 Menu Layouts. Pilih Tata letak yg sesuai dengan tanda panah D. MENGEDIT DAN MENGATUR LAYOUT Setelah Mengedit dasar Pengaturan Pada Template. Menu Selanjutnya kembali ke Layouts Irvan Dwijaya 26

27 Pada Menu Layout atur dan edit gadget di sidebar dan footer Berikut gambar. Slidebar right 1 E.1 E.2 Pilih gadget Image Irvan Dwijaya 27

28 Kemudian Sidebar right 1 menu Ke 2 E.3 Pilih Gadget Text Ketik Pada Title berjudul Category untuk isi, kosongkan, E.4 Irvan Dwijaya 28

29 Lanjut Memindahkan Posisi Sidebar, Klik Tahan Pada sidebar Category, kemudian Geser atau tarik Kebawah, Lalu Lepaskan E.5 Setelah Itu Perhatikan pada sidebar berikut. Isi pada menu Gadget. Dengan pages Tanpa judul Sehingga tampilan menjadi seperti category. Contoh pada gambar berikut: E.6 Irvan Dwijaya 29

30 Isi Sidebar right 2.1 dengan pages tanpa Judul pages Klik add Gadget Pilih Pages E.7 Perhatikan ABAIKAN JUDUL Centang pada 1 Pages atau Halaman Saja. Contoh Centang pada Tempat Tidur E.8 Irvan Dwijaya 30

31 Kemudian isi sidebar righ 2.2 Tambahkan Gadget Pages pada sidebar righ sebelah Kanan, E.9 Perhatikan Gambar Berikut. Irvan Dwijaya 31

32 Centang pada 1 Pages atau Halaman Saja. Centang pada Lemari Pajangan Selanjutnya Masih pada sidebar E.10 Pilih Pages Perhatikan Gambar Berikut E.11 Irvan Dwijaya 32

33 Centang pada 1 Pages atau Halaman Saja. Centang pada Meja rias Selanjutnya Masih di Sidebar. Lanjut Memindahkan Posisi Sidebar, E.12 Tambahkan Gadget E.13 Irvan Dwijaya 33

34 Perhatikan Gambar Berikut: E.14 Centang pada 1 Pages atau Halaman Saja. Centang pada Bufet Selesai Membuat category maka hasil tampilan sidebar seperti ini: Maka Tampilan di Prevew Akan Seperti Ini E.15 Irvan Dwijaya 34

35 E.16 Setelah Menempatkan menu Sidebar righ 2.1 dan 1.2 selanjutnya berikan Gadget Teks Pada Sibar 3 Untuk Pembatas. Pilih Gadget Text E.17 Irvan Dwijaya 35

36 Untuk Gadget Text, Pada Isi Kosongkan saja Judul dan Teks. Lalu Save E.18 Kemudian Pindah Kan Gadget Text ke Sidebar 3 Perhatikan Gambar Berikut. Pindahkan Gadget Text ke Sidebar 3 sehingga menjadi seperti ini Irvan Dwijaya 36

37 E.19 Setelah Membuat Gadget Text lanjut Membuat Gadget Slide show. Untuk pilihan gambar slide pada bloger anda bisa mempelajari di handbook picasa. Perhatikan gambar berikut. Irvan Dwijaya 37

38 Pilih Add Gadger Slideshow E.20 Perhatikan gambar berikut Pilih Sourch dari Picasa web album Nama Album di Picasa Album Gambar yg sudah di Upload di Picasa Otomatis langsung muncul di Bloger E.21 Setelah Menambahkan Gadget Slideshow Pindahkan Gadget tersebut Ke Sidebar 3 Sehingga menjadi Seperti ini Irvan Dwijaya 38

39 E.22 Tambahkan Gadget gambar lalu sisipkan di disidebar right 3 Irvan Dwijaya 39

40 Masukan Gambar Untuk Mengiklankan website tersebut E.23 Untuk Memindahkan Gadget gambar sama seperti contoh diatas. Selanjutnya Memasukan Gadget Wikipedia berguna Untuk Pencarian Article. Irvan Dwijaya 40

41 Tambahkan Gadget pilih More Gadget. Lalu pilih Wikipedia E.24 Sisipkan di disidebar right 3 Untuk Memindahkan Gadget gambar sama seperti contoh diatas. Selanjutnya Memasukan 2 Gadget Gambar. Sama Seperti Contoh DI atas. Irvan Dwijaya 41

42 E.25 Sisipkan di disidebar right 3 Untuk Memindahkan Gadget gambar sama seperti contoh diatas. Kemudian Tambahkan Gadget Blog Archive pada Sidebar right 3 E.26 Untuk Memindahkan Gadget gambar sama seperti contoh diatas. Irvan Dwijaya 42

43 Sidebar right Menjadi seperti ini Irvan Dwijaya 43

44 E.27 Selanjutnya Mengisi pada Footer 1 Tambahkan Text pada Footer 1 E.28 Selanjutnya Mengisi pada Footer 2.1 Irvan Dwijaya 44

45 Pada Layout Footer 2.1 tambahkan Gadget Translate E.29 Selanjutnya Mengisi pada Footer 2.2 Pada Layout Footer 2.2 tambahkan Gadget Profil E.30 Setelah menyesuaikan Layouts lanjut kembali lagi pada menu Template Irvan Dwijaya 45

46 E. MENGEDIT DAN MENGATUR TEMPLATE F.1 Kemudian F.2 Klik adjust Widths Irvan Dwijaya 46

47 Untuk Mengatur Ukuran Lebar Website dan Ukuran Header yg kita gunakan. F.3 Setelah Mengatur Widths lanjut ke menu Advance Irvan Dwijaya 47

48 F.4 Pages Text Pages Text berfungsi untuk mengatur isi konten teks pada website dari gaya huruf dan warna huruf Mengatur Ukuran dan gaya huruf tebal Miring Blog Title F.5 Blog Title Mengatur Gaya tulisan warna dan ukuran pada Judul di Header F.6 Irvan Dwijaya 48

49 Tabs Text Tabs Text Mengatur Gaya tulisan warna dan ukuran pada Menu Navigasi atau Halaman F.7 Tabs Background Tabs background Berfungsi untuk mengatur warna pada background Menu navigasi F.8 Irvan Dwijaya 49

50 Date Header Date Header untuk Mengatur gaya huruf warna dan ukuran, tanggal postingan F.9 Post Title F.10 Post Title untuk Mengatur gaya huruf warna dan ukuran, pada Judul Postingan Irvan Dwijaya 50

51 Post Background Post Bcakground untuk warna pada Background Postingan Gadget Title Colour F.11 Gadget Title Colour untuk Mengatur gaya huruf warna dan ukuran, pada Gadget F.12 Irvan Dwijaya 51

52 Gadget Text Gadget Text berfungsi untuk Mengatur gaya huruf warna dan ukuran, pada Text Sidebar F.13 Sidebar Background Sidebar Bcakground berfungsi untuk warna pada Background sidebar, Bevel Colour Untuk pemberian warna Garis F.14 Setelah Selesai Mengatur Irvan Dwijaya 52

53 Sekarang pengetahuan blogspot Anda sudah mahir, Silahkan kembangkan lagi ilmu pengetahuan Membuat web di BOD selanjutnya. Irvan Dwijaya 53

54 Salam BOS... Anda bingung memulai bisnis online? Free konsultasi di: BisnisOnline-Sukses.com Perum Griya Bukit Jaya G1/11 Gunung Putri, Tlajung Udik Bogor bos. @bisnisonline-sukses.com Telpon: (Hunting) Kami Bimbing Sampai Mahir! Irvan Dwijaya 54