Tutorial Membuat Toko Online dari Blogspot Berdomain Dot Com

Advertisemen

Setelah sebelumnya saya menulis artikel tentang �Cara Mencari dan Menangani Pelanggan Pertama pada Bisnis Dropshipping Online� kali ini sesuai janji, saya akan menulis tutorial membuat toko online sederhana dari blogspot berdomain dot com berdasarkan pengalaman pribadi.

Kenapa harus bikin dari blogspot ? mengapa tidak dari platform lain seperti wordpress, joomla atau bahkan opencart ?

Kan pengalaman saya bikinnya dari blogspot gan ^_^. Namun, berikut alasan saya memilih menggunakan blogspot pada awal membuat toko online pribad.

 (Artikel Tutorial Ini Masih Belum Selesai)

Alasan Menggunakan Blogspot

1. Popular

Kita akan lebih mudah menemukan panduan, mulai dari ragam cara merubah kode template, memasang widget, mengatur tampilan dan sebagainya. Kita bisa mencari ribuan tutorial tentang blogspot di mbah Google, banyak sekali yang mengulasnya.

2. Pengguna yang banyak

Memungkinkan anda berkenalan dan meminta bantuan ke sesama pengguna blogspot. Anda bisa mencari blogger di grup facebook dan blog pribadi mereka.

 3. Produknya mbah Google

Blogspot merupakan produknya Google, banyak blogger berspekulasi bahwa dengan menggunakan produknya Google, web kita bisa lebih kredibel di mata Google sehingga bisa mendapat hasil pencarian terbaik di SERP Google (hasil penelusuran mesin pencari Google). Meskipun tidak sepenuhnya benar, dan tidak ada bukti valid namun anda sebagai pemula bisa terbantu untuk kedepannya. Setelah anda semakin terbiasa dengan dunia web, maka bisa melangkah ke level professional seperti membeli hosting sendiri dengan menginstall CMS wordpress (tentunya berbiaya sedikit lebih besar).

4. Template gratis/premium yang melimpah

Kita bisa mendownload berbagai macam template gratis, saya rasa template blogspot paling banyak dan mudah ditemukan.

5.  Direkomendasikan Bagi Pemula

Blogspot memiliki tampilan dashboard yang mudah dimengerti. Namun bila dibandingkan dengan wordpress, sebetulnya sama saja. Kelebihan blogspot adalah karena produk Google dan cukup populer.

Putuskan Sebelum Membuat Toko Online

Ada beberapa hal yang perlu anda ketahui, setelah memutuskan membangun website toko online pribadi.

• Dengan adanya website tidak serta merta mendatangkan banyak pembeli, anda butuh yang namanya SEO.
• Namun adanya website bisa meningkatkan "trust" atau kepercayaan pelanggan. Setelah saya membuat website berdomain dot com, hampir tidak ada pembeli yang bertanya �ini bukan penipuan kan ?� berbeda dengan sebelumnya.
• Adanya website, tidak membuat pekerjaan anda lebih mudah. Tetap saja anda harus promosi di sosial media, situs jual beli online gratis dan jaringan lainnya. Bila tidak akan sepi pembeli, kecuali anda menggunakan SEM (Search Engine Marketing) atau iklan berbayar misal di Google Adword, atau bisa juga dengan cara gratis bila paham SEO namun butuh waktu, silahkan baca kumpulan artikel "Internet Marketing".
• Hanya orang tekun dan selalu bersemangat untuk belajar yang saya rekomendasikan membuat toko online ini. Sebab, butuh kerja keras untuk sukses berbisnis online, dan semuanya butuh waktu kecuali anda orang kaya yang bisa beli dan beli. Namun, mari kita belajar bersama, saya pun termasuk orang yang tidak punya uang dan otomatis harus kerja keras.

Apakah Membuatnya Gratis ?

Gratis bila tidak mengcustom domain dot com, namun saya rekomendasikan menggunakan custom domain agar alamat URL web toko online anda tidak ....blogspot.co.id melainkan .....com, seperti www.tokopedia.com misalnya. Lebih profesional bukan ?

Berapa Biayanya ? Biaya apalagi yang Harus Dikeluarkan ?

Anda hanya mengeluarkan uang Rp 110 ribu per tahun untuk membeli (sewa) domain dot com di Idwebhost. Kita tidak butuh sewa hosting, karena menginduk ke blogger.com, jadi cukup domain dot com saja.

blogger.com (blogspot) memang gratis tapi tidak murahan, dimana hosting dan bandwith unlimited, selain itu server Google pun hampir tidak pernah down. Masa sih, server sekelas Google down, apa kata dunia ? Itu kelebihan blogger.com produknya Google. Namun saya tekankan, jangan sekali-kali menggunakan jasa black hat SEO untuk mendatangkan pengunjung ke situs toko online anda, nanti bisa-bisa situs akan disuspend (dihapus) oleh Google atau deindeks (tidak bisa ditemukan di search engine Google).

Nah, mari sekarang kita lanjut ke tutorial-nya. Untuk memudahkan pemahaman, saya buat daftar isinya.

1. Menyiapkan Ide Nama Domain (contoh www.pemobi-shop.com) dan atau Nama Toko Online Anda.
2. Membuat Akun Gmail (bila anda belum punya)
3. Mendaftar dan Membuat Blog di blogspot.com
4. Membuat Maintenance Mode di Blogspot 
5. Membeli Domain di Idwebhost (bisa ditempat lain, namun saya contohkan di Idwebhost)
6. Cara Mengubah Subdomain Blogspot ke Custom Domain dot Com Idwebhost
7. Mengganti Template
8. Mendesain dan Mengatur Tampilan
9. Menambahkan Nomor Rekening, Kontak dan Support Pengiriman dalam Bentuk Gambar.
10. Membuat Laman Terms of Service, About, FAQ dan Cara Order

1. Menyiapkan Ide Nama Domain untuk Toko Online

Contoh nama domain www.pemobi-shop.com, www.lazada.com, sebenarnya ini terserah pada anda. Sebagian ada yang menjadikan brand menjadi nama domain. Ada juga yang melekatkan kata kunci yang dibidik sebagai nama domain, misal www.bajumurah.com, biasanya pemilik situs tersebut mentargetkan orang-orang yang sedang mencari baju murah. Pilihan dalam memilih domain :

• Menjadikan nama brand sebagai nama domain, contoh www.pemobi-shop.com dimana nama brand-nya adalah pemobi. Tujuannya adalah untuk jangka panjang, berupaya melekatkan brand di mata pelanggan dan membedakan dengan produk lain.
• Menjadikan nama corporasi/perusahaan sebagai nama domain, contoh www.microsoft.com. selain sebagai nama brand produk, microsoft juga adalah nama perusahaan "Microsoft Corporation". Tujuannya hampir sama, ingin menonjolkan "corporate image" di mata dunia agar mudah dikenal, diingat dan dibedakan. 
• Memuat kata kunci sebagai nama domain. contoh www.baju-lucu.com, dimana kata kunci yang ia targetkan adalah "baju lucu". Kata kunci ini menandakan bahwa pemilik toko online menjual baju-baju lucu. Kelebihan menjadikan kata kunci sebagai nama domain adalah memudahkan SERP (Search Engine Result Page atau Hasil Penelusuran Mesin Pencari). Jadi ketika ada orang yang sedang mencari baju lucu, website tersebut akan lebih mudah mendudukan posisi pertama di hasil pencarian. Namun kelemahannya, brand-nya tidak mudah dikenali.

Nah, sekarang tinggal anda yang memutuskan, apakah menggunakan brand/merk produk, nama perusahaan/ukm atau memuat kata kunci. Saran saya, lebih baik menggunakan nama brand produk atau perusahaan, dampaknya bisa untuk jangka panjang, terekam dalam ingatan siapa saja yang melihatnya serta menjadi ciri khas/pembeda antara produk/perusahaan anda dengan produk orang lain.

2. Membuat Akun Google/Gmail (lewati tahap ini jika anda sudah punya akun gmail)

Untuk membuat akun google ikuti langkah berikut :
a. Kunjungi https://accounts.google.com kemudian pilih "create".

b. Anda akan diarahkan ke halaman seperti ini. Silakan isi data-data.

Name : isi nama lengkap anda
Choose your username : isi nama username gmail anda (bebas namun jangan ngasal)
Create a password : isikan kode sandi sesuai keinginan (buat kode sandi yang agak panjang dan rumit, jangan lupa dicatat atau ingat karena akan digunakan setiap log in)
Confirm your password : isikan kode sandi yang tadi ditulis
Birthday : Isikan sesuai dengan tanggal lahir anda
Gender : Jenis kelamin
Mobile phone : Isikan dengan no handphone anda (bila nomor anda 081298108190, tulis mulai dari 81298108190)
Your current email address : Isikan dengan alamat e-mail yang sudah anda punya (misal anda punya akun yahoo mail tuliskan, untuk sewaktu-waktu bila anda lupa maka informasi akan dikirim ke email alternatif). Bila tidak punya, kosongkan saja
Verifikasi kode : masukkan captcha sesuai gambar
I agree.... : Dicentang (klik)

Nah, setelah itu anda akan diarahkan ke laman baru klik "continue", bila ada bacaan "Welcome..." berarti akun sudah berhasil dibuat.

3. Membuat dan Mendaftar Blog di Blogspot.com

Silahkan pergi ke alamat baru yaitu www.blogger.com. Setelah itu, biasanya anda harus log in. Isikan sesuai dengan username akun gmail dan password yang tadi anda buat. Kemudian klik "sign in".

Bila diarahkan ke laman seperti ini. Silahkan pilih create a google + profile yang "kiri". Saya belum pernah menggunakan yang kanan.

Setelah itu, anda bisa mengisikan data seperti nama anda yang akan dilihat oleh orang lain (anda juga bisa memilih nama brand produk, terserah bebas.

Silahkan pilih klik upgrade bila sudah selesai. Selanjutnya anda bisa melewati tahapan-tahapan dengan memilih "continue", "continue" dan "finish". Selesai.

Kemudian, silahkan buka alamat www.blogger.com lagi. Anda akan diarahkan ke laman seperti ini. Pilih saja "Continue to Blogger".

Kemudian pilih saja New Blog.  anda akan diarahkan ke laman seperti ini.

Title diisi dengan judul situs toko online anda (bisa diganti nanti)
Address merupakan alamat url situs anda, karena kita akan menggunakan domain TLD, sementara bisa diisi asal saja.
Template merupakan desain halaman situs/blog anda. (bisa diganti nanti), sementara pilih saja bebas.

Bila sudah selesai, klik Create Blog!. Yey, sekarang anda sudah punya blog.

4. Membuat Maintenance Mode di Blogspot (bisa dilewati bila merasa kesulitan)

Fungsi membuat maintenace mode adalah untuk memberitahu bahwa situs anda sedang maintenens atau pemeliharaan sehingga belum bisa diakses secara maksimal bila ada orang yang berkunjung.

Membuatnya butuh sedikit pengetahuan koding, tapi sangat mudah. Simak berikut ini :

Pada tampilan blogspot anda, pilih Template lalu klik Edit HTML.

Setelah itu Klik 1 x pada kolom lalu tekan CTRL + F pada keyboard.

Tuliskan ]]></b:skin> , copy saja kemudian paste di kolom bilah cari. Lebih jelasnya lihat gambar.

Setelah ditemukan, copy kode berikut :

html { height: 100%; background: url(http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) no-repeat center 50%; margin: 0; } body { display: none; }


paste tepat di atas kode ]]></b:skin>. 

Klik Save Template. bila tidak ada tulisan error berarti anda berhasil. Untuk melihat hasilnya
klik View Blog (letaknya diatas tulisan Korun Shop - Template).

Yeee. Korun Shop lagi Maintenis !

5. Membeli Domain di Idwebhost (bisa ditempat lain, namun saya contohkan di Idwebhost)

Langkah pertama, silahkan kunjungi www.idwebhost.com. Ketikan nama domain yang anda inginkan pada kolom seperti terlihat pada gambar.

Karena disini kita akan mengcustom domain saja, jadi pilih Beli Domain Saja. 

Next, pembelian domain ini sistemnya sewa per tahun. Anda bisa membayar sewa domain per 1 tahun, per 2 tahun dst. Saran saya, per 1 tahun saja. Bila sudah, klik Order Sekarang.

Anda akan diarahkan ke laman selanjutnya.

Langsung saja, tidak usah diedit. Pilih Lanjutkan.

Pilih Selesaikan Pemesanan.

Kemudian, di laman selanjutnya anda harus mengisi data diri untuk bisa log in ke member area Idwebhost. Isilah data dengan benar dan lengkap.

Yeyy. Anda sudah memesan domain, 

Silahkan catat baik-baik jumlah yang harus ditransfer (harus sama) dan nomor faktur seperti gambar diatas.

Nah, sekarang. Silahkan masuk ke member area terlebih dahulu. Kunjungi member.idwebhost.com

atau bisa kunjungi www.idwebhost.com, kemudian cari menu Customer dan Log In di laman paling bawah.

Setelah masuk member area. Pilih menu Pembayaran, lalu klik Metode Pembayaran.

Nah disitu bisa anda pilih cara pembayaran pembelian domainnya. Bisa via :

• Mobile Banking
• Internet Banking
• SMS Banking
• Phone Banking
• ATM
• Transfer Bank

Lakukan transfer. Jangan lupa screenshot/foto bukti pembayarannya.

Kemudian, masuk lagi ke area klien (member area). Pilih lagi menu Pembayaran, lalu klik Konfirmasi Pembayaran.

Nomor invoice diisi dengan nomor faktur yang tadi anda catat. Bila lupa, anda bisa kembali ke laman area klien (member area), scroll ke bawah pilih Lihat Faktur. Bila sudah lengkap, klik Kirim.

Tunggu sampai, anda menerima reply pembayaran diterima dan domain aktif.

Bila sudah dapat reply konfirmasi pembayaran diterima. Silahkan log ini lagi ke situs Idwebhost. 

Dari area klien, akan terlihat bila domain sudah aktif.

contoh bila kita mempunyai 3 domain.

Nah, langkah selanjutnya tinggal setting custom domain.

6. Cara Mengubah Subdomain Blogspot ke Custom Domain dot Com Idwebhost

Log in ke blogger.com dengan menggunakan akun blog online shop anda. Masuk ke Setting, lalu Basic. Silahkan pilih + Setup 3rd party URL for your blog atau kurang lebih artinya Setup URL pihak ke-3 pada blog anda.

Ketikan custom domain yang dibeli dari Idwebhost, dalam contoh ini adalah korunshop.com. Klik Save.

Nah bila ada pesan error, tidak usah khawatir. Justru inilah yang kita inginkan. Lihat yang dikotaki berwarna merah, ada 2 buah cname yang akan kita ambil.

Setelah itu, buka tab baru, log in ke member.idwebhost.com. Pilih Domain Aktif.

Selanjutnya, klik Kelola Domain pada domain www.korunshop.com.

Pilih Alat Pengelolaan dan klik Kelola DNS.

Nah, selanjutnya anda harus memasukkan 4 IP Blogspot berikut satu per satu :

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Ikuti gambar berikut ini :

Ulangi dengan cara yang sama, sampai ke-4 IP tersebut terisi semua di kolom.

Kita akan menambahkan 2 kolom lagi yang diisi dengan CNAME pada Blogspot tadi. Masih ingat kan, coba scroll keatas. CNAME-nya tadi sebagai berikut :

www               ghs.google.com
zj4a5zj2aikf         gv-a7urpoh72axrz6.dv.googlehosted.com

Sekarang, masukkan...

Setiap menambahkan kolom, jangan lupa di Save.


Selesai. Klik button Back. 

Pilih Nameserver.

Kemudian, isikan name server seperti ini :

ns1.idwebhost.id
ns2.idwebhost.id 

Jangan lupa klik Ubah Nameserver jika sudah beres.

Nah, sampai tahap ini anda sudah selesai melakukan penyettingan. Silahkan tunggu masa propagasi 6-8 jam atau tunggu saja sampai besok.

Setelah selesai menunggu masa propagasi,

Log in ke blog toko online anda melalui www.blogger.com. 

Ulangi langkah diawal tadi.

Masuk ke Setting - Basic/Dasar - pilih + Setup a 3rd party URL for your blog.

Isikan third party domainnya sesuai nama domain yang dibeli di Idwebhost tadi.
https://www.korunshop.com

Klik Save.

Selamat ! anda sudah berhasil melakukan custom domain.

7. Mengganti Template

Nah, kita butuh template yang didesain khusus untuk toko online. Saya akan bagikan template gratis yang sudah saya modifikasi sesuai kebutuhan. Kelemahan template ini tidak ada laman checkout dan otomatis pembeli harus order manual via SMS/BBM/WA/Line serta tidak responsive. Sejauh ini saya masih belum menemukan template gratis toko online untuk blogspot yang okeh, sebagian besar menggunakan currency USD atau metode pembayarannya lewat Paypal, jadi tidak recommended sehingga saya hapus laman checkout-nya. Berbeda halnya bila anda mau sedikit mengeluarkan uang tambahan sebesar Rp 100.000 untuk mendapatkan template profesional. 

Bila anda butuh panduan dalam membeli template toko online premium, silahkan email saya di fajar.sos1@gmail.com. Sebab, bila kita tidak paham mungkin akan sulit memahami bagaimana template bekerja dan bagaimana penyesuaiannya.

Nah, pada kasus ini kita gunakan template toko online gratisan. Overall sih lumayan banget untuk landing page dan sempat saya pakai selama 2 tahun untuk menggenjot bisnis online saya. Silahkan download template-nya.



Silahkan buka file-nya, kemudian copy semua.


Masuk ke blogger anda. pilih Template dan klik Edit HTML.

Block semua, lalu paste.

Save template dan coba lihat hasilnya.

Hasilnya kurang lebih seperti berikut ini.

8. Mendesain Tampilan dan Melakukan Pengaturan 

Setelah selesai mengganti template, perlu dilakukan pengaturan-pengaturan agar sesuai dengan kebutuhan toko online anda.

Menambahkan Format Posting

Pada tampilan blog anda, pilih Pengaturan/Setting - Pos dan Komentar/Post and Comment -
Lihat Post Template, pilih Add. masukkan kode berikut pada kolom :

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
</h2>
<center>
<table border="1">
<tbody>
<tr>
<td colspan="3"><div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihfIkXGe8rfRFZI2ueNLt1lZHHKoLoZ3lXyfF5EJxpTLcPolwC0wkSEiEiSi1GCHwtonUhbC15VMX1Khoo1-fNZMb1XwRyoeHykJlx_MbuBjMz4kNAoJuSx-jV2mDHBB9lMoUsffj_4yFd/s1600/Arsenal+Puma+Grey+Jogger+PIC+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihfIkXGe8rfRFZI2ueNLt1lZHHKoLoZ3lXyfF5EJxpTLcPolwC0wkSEiEiSi1GCHwtonUhbC15VMX1Khoo1-fNZMb1XwRyoeHykJlx_MbuBjMz4kNAoJuSx-jV2mDHBB9lMoUsffj_4yFd/s320/Arsenal+Puma+Grey+Jogger+PIC+2.jpg" width="320" /></a></div>
<br />
<!--more--></div>
</td>
</tr>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT48CrIquDezoLQkUqeNeYFxOPlPInGQswfsKcrSHpzh6a-HxbqvNZvToqkPNNdz8o36df5Rbmo6y0nrUoSlfp2SDXqvXgDbu0-ZfgOaat3dyWNeqPFbFgbvLpXxy3C2RYE9nCU0tCKbRf/s1600/Barca+Red+Origin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT48CrIquDezoLQkUqeNeYFxOPlPInGQswfsKcrSHpzh6a-HxbqvNZvToqkPNNdz8o36df5Rbmo6y0nrUoSlfp2SDXqvXgDbu0-ZfgOaat3dyWNeqPFbFgbvLpXxy3C2RYE9nCU0tCKbRf/s200/Barca+Red+Origin.jpg" width="200" /></a></div>
<br /></td> <td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKNCASy9a90aDoVa4TkrwC5IlSo7U8RgTKKPiupvJQmWD8znjxDZLwMTPYsEfZ6IGefmD_xZWNbZHy6Z_FyuqkNYXmK9q3iSuKfUNMBR0XWNK79_tNWKc-ItLNiCeyzjsdVCpzCo6bDjaY/s1600/Casa+Milan+Origin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKNCASy9a90aDoVa4TkrwC5IlSo7U8RgTKKPiupvJQmWD8znjxDZLwMTPYsEfZ6IGefmD_xZWNbZHy6Z_FyuqkNYXmK9q3iSuKfUNMBR0XWNK79_tNWKc-ItLNiCeyzjsdVCpzCo6bDjaY/s200/Casa+Milan+Origin.jpg" width="200" /></a></td>
</tr>
<tr><td><br /></td><td><br /></td> 
</tr>
</tbody></table>
</center>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="product_image">
<div style="text-align: center;">
<br />
<span class="item_price">Rp 10.000</span> </div>
</div>
<div class="product_describe">
<br />
<table class="ui-grid ui-gridFull prd-attributes" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 0px; color: black; font-family: Tahoma, Arial, sans-serif; font-size: 13px; height: 127px; line-height: 15px; margin-bottom: 0px; width: 100%;"><tbody>
<tr class="even" style="background-color: #fafafa;"><td class="strong" style="border: 1px solid rgb(242, 242, 242); font-weight: bold; line-height: 24px; padding: 0px 15px; vertical-align: top;"><div style="text-align: center;">
Nama</div>
</td><td style="border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;"><div id="pdtsku">
SWEATER CARDIGAN BOLA&nbsp;</div>
</td></tr>
<tr class="odd"><th class="strong" style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Ukuran&nbsp;</th><td style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">M L XL</td></tr>
<tr class="even" style="background-color: #fafafa;"><th class="strong" style="border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Spesifikasi</th><td style="border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">Material bahan Adidas Polyester | Bordir Woven<br />
(Available klub for MU, Ac Milan, Juventus, Madrid, Barca &amp; Chelsea)</td></tr>
<tr class="odd"><th class="strong" style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Warna</th><td style="background-color: #fafafa; border: 1px solid rgb(242, 242, 242); line-height: 24px; padding: 0px 15px; vertical-align: top;">Gray, Navyblue, Red</td></tr>
<tr class="odd"><th class="strong" style="background-color: white; border: 5px solid rgb(242 , 242 , 242); font-weight: normal; line-height: 24px; padding: 0px 15px;">Format Pesan</th><td style="background-color: white; border: 5px solid rgb(242 , 242 , 242); line-height: 24px; padding: 50px 15px; vertical-align: top;">Nama Lengkap___Alamat Lengkap___No HP___Nama Produk___Jumlah___Ukuran<br />
<br />
Kirim ke 08777xxxx atau Pin.BBM 7420xxx</td></tr>
</tbody></table>
</div>
</div>
</div>

selesai, Save Setting (pojok kanan atas).

Nah, selanjutnya pikirkanlah mengenai KATEGORI-KATEGORI pada produk anda, misal Kaos Musik, Kaos Bola, Celana Chino, Celana Jogger dsb. Disini kita akan membuat label kategori.

Postinglah 1 produk yang mewakili masing-masing Kategori, sehingga bila ada 4 kategori, berarti ada 4 produk yang diposting.

Untuk cara posting, silahkan pilih New Post. 

Pastikan anda melihat pada Mode Compose, bukan HTML. Silahkan sesuaikan deskripsi produknya, hapus gambar-gambarnya dan ganti dengan gambar produk anda.

Jangan lupa, Tambahkan Label Kategori di sebelah kanan,

Kalau sudah, silahkan klik Publish/Publikasikan.

Lakukan hal serupa untuk ke-3 produk lainnya yang mewakili masing-masing label kategori.

Bila sudah lihat blog, akan muncul Kategori seperti ini.

Mengganti Menu

Pada tampilan default, menu web terdiri dari, Home, Tips Pakaian, Jaket, Sweater, Kemeja, Celana dan Sepatu. Nah mungkin tidak semua dari anda cocok dengan menu tersebut. Mari kita rubah sesuai kebutuhan kalian.

copy kata : Tips Pakaian

kita akan mencari letak kode menu dengan melacak salah satu tulisan menu.

Pada tampilan blogger, silahkan klik Template, pilih Edit HTML. 

Tekan CTRL + F untuk memunculkan kotak dialog find.

kemudian tekan CTRL + V atau Paste atau bila kesulitan, tulis saja Tips Pakaian. 

Kemudian tekan Enter.

Inilah letak menu-menu tersebut. Perhatikan yang dikotaki merah, gantilah sesuai label kategori yang telah anda buat sebelumnya atau sesuai keinginan, kecuali tulisan Home dibiarkan saja. Bila ingin menambah menu 1 lagi, silahkan copas salah satu baris dari menu, misal menu Jaket. Copas mulai dari <li><a class sampai </a></li>, kemudian paste dibawah baris menu Jaket atau Sweater atau Kemeja atau menu sejenis lainnya. Bila kesulitan silahkan tinggalkan komentar atau kontak saya.

kemudian silahkan ganti URL-nya. Untuk melihat URL label kategori lihat gambar berikut :

Copy dan replace seperti ini, sesuaikan dengan nama label. Ingat replace mulai dari setelah tanda petik ' yaitu kata http.... sampai kata sebelum tanda petik......'

Lakukan hal yang sama untuk label kategori Celana Jogger, Kaos Bola dan Kaos Musik.

Memasang Header

Selanjutnya kita akan memasang header agar tampilan lebih menarik. Gunakanlah gambar berukuran 970  x 140 piksel karena ini ukuran yang pas dan sudah saya coba. Anda bisa mengedit gambar menggunakan Photoshop atau software edit foto lainnya. Bila sudah ada gambarnya, ikuti langkah sederhana ini.

Masuk ke Layout/Tata Letak

pilih widget Header lalu klik tulisan "edit".

Silahkan pilih "browse" dan pilih gambarny dari komputer anda. Kemudian centang tulisan "Instead of title and description" atau centang yang Kedua.

Klik Save. lihat ! gambar header sudah terpasang.

Mengganti Favicon dan Title Blog

Lihat gambar berikut.

Pertama, sediakan gambar icon berukuran 32 x 32 piksel. Silahkan buat sendiri atau cari icon di google. Masuk ke Layout/Tata Letak, lihat widget Favicon pilih Edit, silahkan upload gambarnya dan Save.

Kedua, kita akan mengganti Title Blog....................

Menambahkan Widget Produk Terbaru

Silahkan masuk ke Layout/Tata Letak. 

Pilih Add a Gadget, cari HTML Javascript. Tulis judulnya Produk Terbaru. Paste-kan kode berikut ini di dalam kolom :

<style type='text/css'>

img.recent_thumb {width: 90px;height: 70px;float: left;

margin-right: 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;}</style><script style='text/javascript' src='https://googledrive.com/host/0BzPgmXeCwsMRcmlNOHhtaDNNMjA'></script><script style='text/javascript'>

var numposts = 5;

var showpostthumbnails = true;

var displaymore = false;

 var displayseparator = false;

var showcommentnum = false;

var showpostdate = false;

var showpostsummary = true;

var numchars = 50;</script>

<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

<hr/>

Jangan lupa klik Save

9. Menambahkan Nomor Rekening, Kontak dan Support Pengiriman dalam Bentuk Gambar

10. Membuat Laman Terms of Service, About, FAQ dan Cara Order

bersambung....

Fajar M (ditulis berdasarkan pengalaman pribadi)

Advertisemen