Membuat Toko Mebel Menggunakan Blogspot Ditulis Oleh Irvan Dwijaya dan Tim Bisnis Online Sukses http://www.bisnisonline-sukses.com Bisnis Online Consultant Website Toko Online Development Training dan Kursus Bisnis Online Digital Marketing Jasa SEO Irvan Dwijaya www.bisnisonline-sukses.com 1
Daftar Isi A. MEMBUAT POST... 5 B. MEMBUAT PAGE... 13 B. MEMBUAT PAGE CONTACT US DENGAN MAP... 15 C. MENGATUR DASAR LAYOUT DAN TEMPLATE... 20 D. MENGEDIT DAN MENGATUR LAYOUT... 26 E. MENGEDIT DAN MENGATUR TEMPLATE... 46 Irvan Dwijaya www.bisnisonline-sukses.com 2
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 email 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 www.bisnisonline-sukses.com 3
Untuk membuat web seperti contoh diatas, harus membuat Posting dan Pages Terlebih Dahulu. Ikuti langkah berikut: Irvan Dwijaya www.bisnisonline-sukses.com 4
A. MEMBUAT POST A.1 Irvan Dwijaya www.bisnisonline-sukses.com 5
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 www.bisnisonline-sukses.com 6
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 www.bisnisonline-sukses.com 7
Contoh Pembatasan Tampilan Postingan, Postingan yang sudah dibuat sebelumnya A.8 Irvan Dwijaya www.bisnisonline-sukses.com 8
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 www.bisnisonline-sukses.com 9
Membuat Postingan dengan Video dari youtube A.10 Irvan Dwijaya www.bisnisonline-sukses.com 10
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 www.bisnisonline-sukses.com 11
Paste link, klik Search kemudian akan muncul tampilan video. A.13 Selanjutnya Edit postingan seperti gambar berikut: A.14 Irvan Dwijaya www.bisnisonline-sukses.com 12
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 www.bisnisonline-sukses.com 13
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 www.bisnisonline-sukses.com 14
B. MEMBUAT PAGE CONTACT US DENGAN MAP C.1 Irvan Dwijaya www.bisnisonline-sukses.com 15
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 www.bisnisonline-sukses.com 16
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 www.bisnisonline-sukses.com 17
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 www.bisnisonline-sukses.com 18
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 www.bisnisonline-sukses.com 19
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 www.bisnisonline-sukses.com 20
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 www.bisnisonline-sukses.com 21
Masukan Gambar Header yg sudah di sediakan di Folder Header Setelah Memilih Header Pilih Cross Column D.4 Cross Column Pilih Pages Irvan Dwijaya www.bisnisonline-sukses.com 22
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 www.bisnisonline-sukses.com 23
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 www.bisnisonline-sukses.com 24
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 www.bisnisonline-sukses.com 25
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 www.bisnisonline-sukses.com 26
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 www.bisnisonline-sukses.com 27
Kemudian Sidebar right 1 menu Ke 2 E.3 Pilih Gadget Text Ketik Pada Title berjudul Category untuk isi, kosongkan, E.4 Irvan Dwijaya www.bisnisonline-sukses.com 28
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 www.bisnisonline-sukses.com 29
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 www.bisnisonline-sukses.com 30
Kemudian isi sidebar righ 2.2 Tambahkan Gadget Pages pada sidebar righ sebelah Kanan, E.9 Perhatikan Gambar Berikut. Irvan Dwijaya www.bisnisonline-sukses.com 31
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 www.bisnisonline-sukses.com 32
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 www.bisnisonline-sukses.com 33
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 www.bisnisonline-sukses.com 34
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 www.bisnisonline-sukses.com 35
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 www.bisnisonline-sukses.com 36
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 www.bisnisonline-sukses.com 37
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 www.bisnisonline-sukses.com 38
E.22 Tambahkan Gadget gambar lalu sisipkan di disidebar right 3 Irvan Dwijaya www.bisnisonline-sukses.com 39
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 www.bisnisonline-sukses.com 40
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 www.bisnisonline-sukses.com 41
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 www.bisnisonline-sukses.com 42
Sidebar right Menjadi seperti ini Irvan Dwijaya www.bisnisonline-sukses.com 43
E.27 Selanjutnya Mengisi pada Footer 1 Tambahkan Text pada Footer 1 E.28 Selanjutnya Mengisi pada Footer 2.1 Irvan Dwijaya www.bisnisonline-sukses.com 44
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 www.bisnisonline-sukses.com 45
E. MENGEDIT DAN MENGATUR TEMPLATE F.1 Kemudian F.2 Klik adjust Widths Irvan Dwijaya www.bisnisonline-sukses.com 46
Untuk Mengatur Ukuran Lebar Website dan Ukuran Header yg kita gunakan. F.3 Setelah Mengatur Widths lanjut ke menu Advance Irvan Dwijaya www.bisnisonline-sukses.com 47
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 www.bisnisonline-sukses.com 48
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 www.bisnisonline-sukses.com 49
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 www.bisnisonline-sukses.com 50
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 www.bisnisonline-sukses.com 51
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 www.bisnisonline-sukses.com 52
Sekarang pengetahuan blogspot Anda sudah mahir, Silahkan kembangkan lagi ilmu pengetahuan Membuat web di BOD selanjutnya. Irvan Dwijaya www.bisnisonline-sukses.com 53
Salam BOS... Anda bingung memulai bisnis online? Free konsultasi di: BisnisOnline-Sukses.com Perum Griya Bukit Jaya G1/11 Gunung Putri, Tlajung Udik Bogor Email : bos.email@bisnisonline-sukses.com Telpon: 0822 1050 5058 (Hunting) Facebook: @BisnisOnlineSukses Kami Bimbing Sampai Mahir! Irvan Dwijaya www.bisnisonline-sukses.com 54