Membuat Toko Mebel Menggunakan Blogspot

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

Irvan Dwijaya – www.bisnisonline-sukses.com

1

Jasa SEO

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


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.


3

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


4

A. MEMBUAT POST

A.1


5

Klik New Post

A.2 Setelah 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

Masukan Gambar & Isi Teks Setelah Terisi Konten Pada Post:

A.5


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.


7

Contoh Pembatasan Tampilan Postingan,

Postingan yang sudah dibuat sebelumnya

A.8


8

Lanjut Membuat Postingan dengan Artikel Selanjutnya yg Berjudul Tips Memilih Bahan Furniture

Sama Seperti Contoh Diatas Menggunakan Pembatas, Atau Jump Break

A.9


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


Paste link, klik Search kemudian akan muncul tampilan video.

A.13

Selanjutnya Edit postingan seperti gambar berikut:

A.14


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


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


B. MEMBUAT PAGE CONTACT US DENGAN MAP

C.1


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


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


Pada Pages Contact US

Klik pada bagian bawah

C.6

Paste Atau Tembel Kode Map yg Sudah di Embed C.7

Lalu setelah di Paste Pilih Compose


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


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.


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


Masukan Gambar Header yg sudah di sediakan di Folder Header Setelah Memilih Header Pilih Cross Column

D.4

Cross Column Pilih Pages


1

3 2

Berilah Centang Pada Tiga Pages saja. Berilah Centang dengan Urutan Sesuai urutan Nomer

D.5

Setelah Mengatur Pages, Lalu Edit pada bagian Sidebar right

Klik Edit

Klik Remove D.6


Remove semua sidebar yg di samping kanan, Untuk Tahapan Selanjutnya sementara langsung ke menu Template.

D.7

Kemudian.

Pilih pada Customise

D.8


Pada Bagian Customise Pilih Template. Klik

Pilih Template

D.9

Kemudian

D.10

Pilih Template Travel, Kemudian pilihan kedua dari kiri

Setelah Memilih Template Sesuaikan Background yg kita pilih, Klik:

D.11


Pilih Tekstur ikuti gambar yg sesuai dengan contoh

D.12

Setelah itu, lanjut memilih layouts di pengaturan template Lihat gambar dibawah ini:

D.13

Menu Layouts. Pilih Tata letak yg sesuai dengan tanda panah

Kemuadian Apply to Blog

D. MENGEDIT DAN MENGATUR LAYOUT Setelah Mengedit dasar Pengaturan Pada Template. Menu Selanjutnya kembali ke Layouts


E.1

Pada Menu Layout atur dan edit gadget di sidebar dan footer Berikut gambar. Slidebar right 1

E.2

Pilih gadget Image


Kemudian Sidebar right 1 menu Ke 2

E.3

Pilih Gadget Text

Ketik Pada Title berjudul Category untuk isi , kosongkan,

E.4


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


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


Kemudian isi sidebar righ 2.2

Tambahkan Gadget Pages pada sidebar righ sebelah Kanan,

E.9

Perhatikan Gambar Berikut.


Centang pada 1 Pages atau Halaman Saja. Centang pada Lemari Pajangan E.10

Selanjutnya Masih pada sidebar

Pilih Pages

E.11

Perhatikan Gambar Berikut


Centang pada 1 Pages atau Halaman Saja. Centang pada Meja rias E.12

Selanjutnya Masih di Sidebar. Lanjut Memindahkan Posisi Sidebar,

Tambahkan Gadget

E.13


Perhatikan Gambar Berikut:

E.14

Centang pada 1 Pages atau Halaman Saja. Centang pada Bufet

Selesai Membuat category maka hasil tampilan sidebar seperti ini:

E.15

Maka Tampilan di Prevew Akan Seperti Ini


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


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


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.


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


E.22

Tambahkan Gadget gambar lalu sisipkan di disidebar right 3


Masukan Gambar Untuk Mengiklankan website tersebut

E.23

Untuk Memindahkan Gadget gambar sama seperti contoh diatas. Selanjutnya Memasukan Gadget Wikipedia berguna Untuk Pencarian Article.


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.


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.


Sidebar right Menjadi seperti ini


E.27

Selanjutnya Mengisi pada Footer 1

Tambahkan Text pada Footer 1

E.28

Selanjutnya Mengisi pada Footer 2.1


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


Untuk Mengatur Ukuran Lebar Website dan Ukuran Header yg kita gunakan.

F.3

Setelah Mengatur Widths lanjut ke menu Advance


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

F.5

Blog Title

Blog Title Mengatur Gaya tulisan warna dan ukuran pada Judul di Header F.6


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


Date Header

Date Header untuk Mengatur gaya huruf warna dan ukuran, tanggal postingan

F.9

Post Title

Post Title untuk Mengatur gaya huruf warna dan ukuran, pada Judul Postingan F.10


Post Background

Post Bcakground untuk warna pada Background Postingan

F.11

Gadget Title Colour Gadget Title Colour untuk Mengatur gaya huruf warna dan ukuran, pada Gadget

F.12


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


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


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 : [email protected] Telpon: 0822 1050 5058 (Hunting) Facebook: @BisnisOnlineSukses

“Kami Bimbing Sampai Mahir!”


Membuat Toko Mebel Menggunakan Blogspot

Recommend Documents