Membangun toko online dengan blogger

Banyak orang berpikir bahwa Blogger atau Blogspot tidak dirubah menjadi sebuah toko online profesional, karena mereka berpikir bahwa Blogger hanyalah sebuah platform Blogging untuk pemula dan tidak memiliki fitur lengkap sebagaimana yang ada pada CMS seperti Wordpress. Tapi disini saya akan membagikan sebuah Free Blogger Store Template yang dapat mematahkan mindset tersebut, karena sebenarnya untuk membuat toko online dengan Blogger tidaklah sulit, tapi bukan berarti semudah menginstall template berekstensi .xml juga, karena Anda juga harus mampu sedikit melakukan perubahan atau editing pada beberapa kode yang ada pada template tersebut, agar Blogger Store Template Anda dapat berfungsi sebagaimana seharusnya.

 

Kali ini saya akan membagikan sebuah Free Blogger Store Template yang berbeda dari Blogger Store Template yang telah banyak tersebar di blog-blog lain. Umumnya apabila kita melakukan pencarian Blogger Store atau Toko Online Blogger di Google, maka kita hanya akan menemukan Blogger Store V2 dan Blogger Store sejenis pada puluhan blog atau situs web yang membagikan Blogger Template secara free. Saya tidak bermaksud mengatakan bahwa Blogger Store V2 dan Blogger Store lain itu tidak bagus, tapi menurut saya Blogger Store tersebut kurang relevan atau terlalu rumit untuk seorang Blogger yang notabene-nya masih awam, oleh karenanya pada kesempatan yang semoga berbahagia ini akan saya bagikan sebuah Free Blogger Store Template yang mampu membuat segala halnya yang berhubungan dengan Jual Beli Online dengan Blogger menjadi lebih mudah dari pada biasanya, karena dilengkapi dengan fitur-fitur keren seperti:

Tampilan Post Editor setelah Anda menggunakan Template Ini

1. Cutom Fields Option yang biasanya hanya Anda dapat temui di CMS Wordpress, dengan fitur ini kita dimudahkan dalam menambahkan berbagai informasi produk yang kita jual seperti deskripsi tambahan,  harga, dan thumbnail, sehingga anda tidak perlu repot-repot menambahkan kode HTML di post editor.
2. Shopping Cart yang stylish dan powerful menggukan Simple Cart
3. Telah tersedia tombol "Add to Cart" yang memudahkan pembeli anda dalam menambahkan produk yang ingin dibeli ke keranjang belanjaan
4. PayPal Checkout
5. Dan masih banyak lagi

Keren bukan Blogger Store Template yang saya bagikan ini, silahkan download Blogger Store Template yang satu ini secara gratis di link yang tersedia di bawah ini:

Demo: http://shoppingcart-bthub.blogspot.com/

Download: http://www.mediafire.com/download.php?jrvtqrvl2w82r5i

Cara Instalasi:

1. Silahkan masuk ke Blogger.com dengan akun Anda
2. Pergi ke Rancangan > Edit HTML, dan unggah Blogger Store Template berekstensi .xml yang telah Anda download tadi

3. Lalu klik tombol "Setelan" pada Dasbor Blogger.com Anda

4. Lalu klik tombol "Format"

5. Silahkan atur jumlah posting yang ingin anda tampilkan pada halaman depan Blog Anda nanti pada option Tampilkan Sebanyak Mungkin, misal 9

6. Scroll ke bawah hingga Anda menemukan option Templat Entri

7. Tambahkan kode di bawah ini ke kolom Templat Entri tadi:

<table border="1" style="width: 660px;"><tbody> <tr> <th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPnM32SKGIXK_ke0IaKCFhD4vWrmsOG7kDgjvqDT4JnMe8mfQx0AN11R6M62dpcBiO4X0DsAZmzOI7gOZkYr-Z4smMITEBSmC7HQPT2fl5QC4YENv8s76cIOSoPhCrfNnGSSYWGV6v-bz/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPnM32SKGIXK_ke0IaKCFhD4vWrmsOG7kDgjvqDT4JnMe8mfQx0AN11R6M62dpcBiO4X0DsAZmzOI7gOZkYr-Z4smMITEBSmC7HQPT2fl5QC4YENv8s76cIOSoPhCrfNnGSSYWGV6v-bz/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th> <td><input class="item_add" type="button" value="Add to Cart" /></td> </tr> <tr> <th><b>Item Name</b></th> <td class="item_name">Product Name Goes here!</td> </tr> <tr> <th><b>Price</b></th> <td class="item_price">$99.99</td> </tr> <tr> <th><b>Description</b></th> <td class="item_Description">Your product description here!</td> </tr> <tr> <th><b>Available Stock</b></th> <td>Stock count here!</td> </tr> <tr> <th><b>Misc</b></th> <td>Place extra thumbs/images of product here</td> </tr> </tbody> </table>

Cara Setup Paypal Email:
1. Pergi ke Rancangan > Edit HTML
2. Klik "Expand Template Widget"
3. Lalu cari simpleCart.email menggukan CTRL + F, maka Anda akan menemukan kode seperti dibawah ini:

<script type='text/javascript'> simpleCart.email = "bloggermint@gmail.com"; simpleCart.checkoutTo = PayPal; simpleCart.cartHeaders = ["thumb_image" , "Quantity_input" , "Total", "remove" ]; </script>

4. Ganti "bloggermint@gmail.com" dengan email Paypal Anda

Panduan Khusus Bagi Anda yang Tidak Memiliki/Mau Menggunakan Paypal:

Untuk Anda yang tidak memiliki PayPal, Anda bisa menggantinya dengan Email Contact Form, Anda bisa mengganti tombol "Add to Cart" dengan link menuju Email Contact Form dengan mengikuti tutorial berikut ini:

1. Pergi ke Rancangan > Edit HTML

2. Tambahkan kode di bawah ini sebelum tag </head>

<script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script>

3. Lalu cari kode input.item_add{ dengan CTRL + F

4. Ganti kode di atas dengan kode span.item_add{ di bawah ini.

5. Lalu cari kode input.item_add { dengan CTRL + F
6. Lalu ganti kode di atas dengan kode span.item_add {
7. Klik "Simpan Template"
8. Pergi ke Kontactr.com, dan daftar untuk mendapatkan akun baru, lalu setelah scroll ke bawah sampai Anda menemukan tulisan "Ajax Embed Widget" or "Buttons Code" dan dapatkan Kontakctr ID yang terlihat seperti ini :- id=39662
9. Pergi ke Setelan > Format pada Dasbor Blogger.com
10. Tambahkan kode di bawah ini pada option Templat Entri, lalu ganti id=39662 pada kode di bawah ini dengan Kontactr ID milik Anda sendiri yang telah Anda buat tadi.

<table border="1" style="width: 660px;"><tbody> <tr> <th class="item_thumb" id="thumb" width="45%"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPnM32SKGIXK_ke0IaKCFhD4vWrmsOG7kDgjvqDT4JnMe8mfQx0AN11R6M62dpcBiO4X0DsAZmzOI7gOZkYr-Z4smMITEBSmC7HQPT2fl5QC4YENv8s76cIOSoPhCrfNnGSSYWGV6v-bz/s1600/blue.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5610175970378217570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPnM32SKGIXK_ke0IaKCFhD4vWrmsOG7kDgjvqDT4JnMe8mfQx0AN11R6M62dpcBiO4X0DsAZmzOI7gOZkYr-Z4smMITEBSmC7HQPT2fl5QC4YENv8s76cIOSoPhCrfNnGSSYWGV6v-bz/s400/blue.gif" style="cursor: hand; cursor: pointer; display: block; height: 164px; margin: 0px auto 10px; text-align: center; width: 148px;" /></a></th> <td><span class="item_add"><script type="text/javascript"> id=39662; t=1; ctxt="Order Now"; </script><br /> <script type="text/javascript" src="http://kontactr.com/kpu/kontactr.js"></script></span></td> </tr> <tr> <th><b>Item Name</b></th> <td class="item_name">Product Name Goes here!</td> </tr> <tr> <th><b>Price</b></th> <td class="item_price">$99.99</td> </tr> <tr> <th><b>Description</b></th> <td class="item_Description">Your product description here!</td> </tr> <tr> <th><b>Available Stock</b></th> <td>Stock count here!</td> </tr> <tr> <th><b>Misc</b></th> <td>Place extra thumbs/images of product here</td> </tr> </tbody></table>