Irvan Dwijaya – www.bisnisonline-sukses.com
1Membuat Toko Mebel Menggunakan Blogspot
Ditulis Oleh Irvan Dwijaya dan Tim Bisnis Online Sukses
http://www.BisnisOnline-Sukses.comBisnis Online Consultant Website Toko Online Development Training dan Kursus Bisnis Online Digital Marketing Jasa SEO
Irvan Dwijaya – www.bisnisonline-sukses.com
2Daftar 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
3BOD 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
4 Untuk membuat web seperti contoh diatas, harus membuat Posting dan Pages Terlebih Dahulu.Ikuti langkah berikut:
Irvan Dwijaya – www.bisnisonline-sukses.com
5A. MEMBUAT POST
A.1
Irvan Dwijaya – www.bisnisonline-sukses.com
6 A.2Setelah Masuk pada Postingan Berilah Judul pada Post Selamat datang.
A.3
Lalu Isi Postingan Tersebut dengan kata yg bertema selamat datang dan berjualan,:
A.4
Setelah Terisi Konten Pada Post:
A.5
Klik New Post
Masukan Gambar & Isi Teks
Irvan Dwijaya – www.bisnisonline-sukses.com
7 Kemudian setelah di Publis Buat Post Bari LagiA.6
Yg berisikan Article contoh:
Article
Mengenal Jenis Bahan Mebel Atau Furniture
A.7
Contoh Hasil Postingan Lihat Di halaman Sebelumnya.
Berfungsi sebagai Pembatas si Pembaca di halaman depan yg penuh dengan Postingan.
Irvan Dwijaya – www.bisnisonline-sukses.com
8A.8
Contoh Pembatasan Tampilan Postingan,
Postingan yang sudah dibuat sebelumnya
Irvan Dwijaya – www.bisnisonline-sukses.com
9 Lanjut Membuat Postingan dengan Artikel Selanjutnya yg BerjudulTips Memilih Bahan Furniture
A.9
Sama Seperti Contoh Diatas Menggunakan Pembatas, Atau Jump Break
Irvan Dwijaya – www.bisnisonline-sukses.com
10 Membuat Postingan dengan Video dari youtubeA.10
Irvan Dwijaya – www.bisnisonline-sukses.com
11 Setelah Masuk pada Postingan Berilah Judul pada Post Desain UnikA.11
Akan menampilkan pilihan file:
A.12
Klik pada insert a video
Klik From youtube
Paste atau tempelkan link video dari youtube
Irvan Dwijaya – www.bisnisonline-sukses.com
12A.13
Selanjutnya Edit postingan seperti gambar berikut:
A.14
Paste link, klik Search kemudian akan muncul tampilan video.
Irvan Dwijaya – www.bisnisonline-sukses.com
13B. 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
.
B.2
Postingan Standar dengan gaya teks sederhana
Irvan Dwijaya – www.bisnisonline-sukses.com
14 Berikut gambar yang sudah di edit dengan gaya font dan warnaB.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
Postingan dengan Gaya Webtoko Online
Irvan Dwijaya – www.bisnisonline-sukses.com
15B. MEMBUAT PAGE CONTACT US DENGAN MAP
C.1
Irvan Dwijaya – www.bisnisonline-sukses.com
16C.2
Buka Tab baru
Masuk Ke google Map.Cari Lokasi Di mana Toko anda, atau Tempat Anda Berada.
Kemudian Place
C.3
Klik Pada Html
Pilih pada Share Or Embed.
Untuk Embed Lokasi anda di Contact Us
Irvan Dwijaya – www.bisnisonline-sukses.com
17Selanjutnya muncul tampilan seperti ini:
C.4
C.5
Setelah Copy Teks yg terblok.
Buka Tab pada Blogger Contact US
Pilih Embed
Copy Teks Tersebut klik Kanan COPY (CTRL C )
Irvan Dwijaya – www.bisnisonline-sukses.com
18Pada Pages Contact US
C.6
C.7
Lalu setelah di Paste Pilih Compose
Klik pada bagian bawah <br / >
Paste Atau Tembel Kode Map yg Sudah di Embed
Irvan Dwijaya – www.bisnisonline-sukses.com
19C.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
20C.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
21D.2
Untuk Ukuran gambar pada Favicon 100x100 pixel dan tidak melebihi kapasitas 100kb. Masukan Favicon yg sudah disediakan dalam folder.
Setelah Lanjut ke Header.
D.3
Pilih Header Lalu Telusuri Gambar.
Irvan Dwijaya – www.bisnisonline-sukses.com
22 Masukan Gambar Header yg sudah di sediakan di Folder HeaderSetelah Memilih Header Pilih Cross Column
D.4
Cross Column Pilih Pages
Irvan Dwijaya – www.bisnisonline-sukses.com
23D.5
Setelah Mengatur Pages,
Lalu Edit pada bagian Sidebar right
D.6
1
2 3 Berilah Centang Pada Tiga Pages saja. Berilah Centang dengan Urutan Sesuai urutan Nomer
Klik Edit
Klik Remove
Irvan Dwijaya – www.bisnisonline-sukses.com
24 Remove semua sidebar yg di samping kanan,Untuk Tahapan Selanjutnya sementara langsung ke menu Template.
D.7
Kemudian.
D.8
Pilih pada Customise
Irvan Dwijaya – www.bisnisonline-sukses.com
25Pada Bagian Customise
Pilih Template.
Pilih Template
D.9
Kemudian
D.10
Setelah Memilih Template Sesuaikan Background yg kita pilih, Klik:
D.11
Klik
Pilih Template Travel, Kemudian pilihan kedua dari kiri
Irvan Dwijaya – www.bisnisonline-sukses.com
26D.12
Setelah itu, lanjut memilih layouts di pengaturan template Lihat gambar dibawah ini:
D.13
Kemuadian
Apply to Blog
D. MENGEDIT DAN MENGATUR LAYOUT
Setelah Mengedit dasar Pengaturan Pada Template.
Menu Selanjutnya kembali ke Layouts
Pilih Tekstur ikuti gambar yg sesuai dengan contoh
Menu Layouts. Pilih Tata letak yg sesuai dengan tanda panah
Irvan Dwijaya – www.bisnisonline-sukses.com
27E.1
Pada Menu Layout atur dan edit gadget di sidebar dan footer Berikut gambar.
Slidebar right 1
E.2
Pilih gadget Image
Irvan Dwijaya – www.bisnisonline-sukses.com
28Kemudian Sidebar right 1 menu Ke 2
E.3
E.4
Pilih Gadget Text
Ketik Pada Title berjudul Category untuk isi , kosongkan,
Irvan Dwijaya – www.bisnisonline-sukses.com
29Lanjut Memindahkan Posisi Sidebar,
E.5
Setelah Itu Perhatikan pada sidebar berikut.
E.6
Klik Tahan Pada sidebar Category, kemudian Geser atau tarik Kebawah, Lalu Lepaskan
Isi pada menu Gadget. Dengan pages Tanpa judul Sehingga tampilan menjadi seperti category.
Contoh pada gambar berikut:
Irvan Dwijaya – www.bisnisonline-sukses.com
30Isi Sidebar right 2.1 dengan pages tanpa Judul pages
E.7
Perhatikan
E.8
Klik add Gadget Pilih Pages
Centang pada 1 Pages atau Halaman Saja. Contoh Centang pada Tempat Tidur
ABAIKAN JUDUL
Irvan Dwijaya – www.bisnisonline-sukses.com
31Kemudian isi sidebar righ 2.2
E.9
Perhatikan Gambar Berikut.
Tambahkan Gadget Pages pada sidebar righ sebelah Kanan,
Irvan Dwijaya – www.bisnisonline-sukses.com
32E.10
Selanjutnya Masih pada sidebar
E.11
Perhatikan Gambar Berikut
Centang pada 1 Pages atau Halaman Saja. Centang pada Lemari Pajangan
Pilih Pages
Irvan Dwijaya – www.bisnisonline-sukses.com
33E.12
Selanjutnya Masih di Sidebar.
Lanjut Memindahkan Posisi Sidebar,
E.13
Centang pada 1 Pages atau Halaman Saja. Centang pada Meja rias
Tambahkan Gadget
Irvan Dwijaya – www.bisnisonline-sukses.com
34 Perhatikan Gambar Berikut:E.14
Selesai Membuat category maka hasil tampilan sidebar seperti ini:
E.15
Maka Tampilan di Prevew Akan Seperti Ini
Centang pada 1 Pages atau Halaman Saja. Centang pada Bufet
Irvan Dwijaya – www.bisnisonline-sukses.com
35E.16
Setelah Menempatkan menu Sidebar righ 2.1 dan 1.2 selanjutnya berikan Gadget Teks Pada Sibar 3 Untuk Pembatas.
E.17
Pilih Gadget Text
Irvan Dwijaya – www.bisnisonline-sukses.com
36E.18
Kemudian Pindah Kan Gadget Text ke Sidebar 3
Perhatikan Gambar Berikut.
Untuk Gadget Text, Pada Isi Kosongkan saja Judul dan Teks. Lalu Save
Pindahkan Gadget Text ke Sidebar 3 sehingga menjadi seperti ini
Irvan Dwijaya – www.bisnisonline-sukses.com
37E.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
38E.20
Perhatikan gambar berikut
E.21
Setelah Menambahkan Gadget Slideshow
Pindahkan Gadget tersebut Ke Sidebar 3 Sehingga menjadi Seperti ini
Pilih Add Gadger Slideshow
Pilih Sourch dari Picasa web album
Nama Album di Picasa
Album Gambar yg sudah di Upload di Picasa Otomatis langsung muncul di Bloger
Irvan Dwijaya – www.bisnisonline-sukses.com
39E.22
Tambahkan Gadget gambar lalu sisipkan di disidebar right 3
Irvan Dwijaya – www.bisnisonline-sukses.com
40E.23
Untuk Memindahkan Gadget gambar sama seperti contoh diatas.
Selanjutnya Memasukan Gadget Wikipedia berguna Untuk Pencarian Article.
Masukan Gambar Untuk Mengiklankan website tersebut
Irvan Dwijaya – www.bisnisonline-sukses.com
41E.24
Sisipkan di disidebar right 3 Untuk Memindahkan Gadget gambar sama seperti contoh diatas.
Selanjutnya Memasukan 2 Gadget Gambar. Sama Seperti Contoh DI atas.
Tambahkan Gadget pilih More Gadget.
Lalu pilih Wikipedia
Irvan Dwijaya – www.bisnisonline-sukses.com
42E.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
43Sidebar right Menjadi seperti ini
Irvan Dwijaya – www.bisnisonline-sukses.com
44E.27
Selanjutnya Mengisi pada Footer 1
E.28
Selanjutnya Mengisi pada Footer 2.1
Tambahkan Text pada Footer 1
Irvan Dwijaya – www.bisnisonline-sukses.com
45E.29
Selanjutnya Mengisi pada Footer 2.2
E.30
Setelah menyesuaikan Layouts lanjut kembali lagi pada menu Template
Pada Layout Footer 2.1tambahkan Gadget Translate
Pada Layout Footer 2.2 tambahkan Gadget Profil
Irvan Dwijaya – www.bisnisonline-sukses.com
46E. MENGEDIT DAN MENGATUR TEMPLATE
F.1
Kemudian
F.2
Klik adjust Widths
Irvan Dwijaya – www.bisnisonline-sukses.com
47F.3
Setelah Mengatur Widths lanjut ke menu Advance
Untuk Mengatur Ukuran Lebar Website dan Ukuran Header yg kita gunakan.
Irvan Dwijaya – www.bisnisonline-sukses.com
48F.4
Pages Text
F.5
Blog Title
F.6
Pages Text berfungsi untuk mengatur isi konten teks pada website dari gaya huruf dan warna huruf
Blog Title Mengatur Gaya tulisan warna dan ukuran pada Judul di Header Mengatur Ukuran dan gaya huruf tebal Miring
Irvan Dwijaya – www.bisnisonline-sukses.com
49Tabs Text
F.7
Tabs Background
F.8
Tabs Text Mengatur Gaya tulisan warna dan ukuran pada Menu Navigasi atau Halaman
Tabs background Berfungsi untuk mengatur warna pada background Menu navigasi
Irvan Dwijaya – www.bisnisonline-sukses.com
50Date Header
F.9
Post Title
F.10
Date Header untuk Mengatur gaya huruf warna dan ukuran, tanggal postingan
Post Title untuk Mengatur gaya huruf warna dan ukuran, pada Judul Postingan
Irvan Dwijaya – www.bisnisonline-sukses.com
51Post Background
F.11
Gadget Title Colour
F.12
Post Bcakground untuk warna pada Background Postingan
Gadget Title Colour untuk Mengatur gaya huruf warna dan ukuran, pada Gadget
Irvan Dwijaya – www.bisnisonline-sukses.com
52Gadget Text
F.13
Sidebar Background
F.14
Setelah Selesai Mengatur
Gadget Text berfungsi untuk Mengatur gaya huruf warna dan ukuran, pada Text Sidebar
Sidebar Bcakground berfungsi untuk warna pada Background sidebar, Bevel Colour Untuk pemberian warna Garis
