Pada postingan yang lalu saya telah membahas tentang delapan template toko online untuk blogspot, tiga diantaranya dilengkapi dengan fitur keranjang belanja. Masih bertajuk e-commerce, postingan kali ini saya akan
bagikan secara gratis template toko online blogspot racikan saya sendiri yang merupakan hasil modifikasi dari template lain yang tetap saya cantumkan sumbernya. Template toko online tersebut saya beri nama BJB Template.
BJB Template atau BlogJualBeli Template merupakan template powerful yang cocok digunakan sebagai toko online yang kaya akan fitur unggulan seperti:
- Clean-view
- Keranjang belanja
- Tampilan grid product
- Order via paypal dan google checkout
- Order via email
- Homepage slideshow widget
- 4 coloumn footer
- Header Ads Place
- Custom Header Logo
Dengan menggunakan template ini, pengunjung tidak akan percaya bahwa toko online yang anda buat menggunakan platform blogger/blogspot karena ini lebih terlihat seperti tampilan toko online sesungguhnya layaknya
prestashop,
opencart,
magento, dlsb.
Penasaran ingin melihat langsung penampakannya?
Langsung kunjungi demonya:
http://bjb-template.blogspot.com
Atau tidak sabar ingin mengunduh? Mari terus kita simak!
BJB TEMPLATE FOR BLOGGER
(BlogJualBeli Template / Template Blog Jual Beli Online)
Tampilan penuh template (Clean view & Professional) :
KAYA AKAN FITUR MENAWAN:
Keranjang Belanja
Dengan memanfaatkan cookies browser, teknologi javascript SimpleCart.js dari WojoGroup memberikan sentuhan otomatis memasukkan barang yang dipilih langsung ke keranjang belanja dan akan selalu tersimpan disana sebelum menekan tombol 'Kosongkan' atau tombol 'Order' selama masih ada cookies yang tersimpan.
Homepage Wide Slideshow
Tampilan gambar animasi bergerak yang didasarkan pada javascript dan kustomisasi CSS ini mudah diedit dan ditambah gambarnya hanya dengan mengubah link gambar yang terdapat pada widget yang bersangkutan. Satu lagi yang menarik, slideshow widget ini hanya tampil di halaman utama, sehingga tidak mengganggu ketika membuka halaman produk atau halaman lain.
Tampilan grid produk
Ini dia yang membuat seseorang tidak mengira bahwa toko online ini berplatform blogger yang khas dengan tampilan posting melebar standar blogger. Tampilan grid produk membuat tampilan posting untuk produk seperti layaknya toko online sungguhan dengan hanya menampilkan harga, thumbnail gambar dan judul posting/nama produk.
Sekarang mari kita ikuti langkah menyulap blogspot menjadi toko online:
1. Download file dalam bentuk zip yang berisi template BJB-Template.xml dan file posting contoh dummy-post.xml.
KLIK DOWNLOAD TEMPLATE (Local Server - Indowebster)
KLIK DOWNLOAD TEMPLATE (International Server - Box.Net)
2. Unggah file BJB-Template di menu Rancangan > Edit HTML
3. Anda dapat mengunggah contoh file posting untuk dapat memiliki blog dengan contoh produk, menu dan widget yang sudah disetting sebelumnya. Klik menu Setelan > Dasar > Impor Blog dan pilih file Dummy-Post.xml. (Optional)
4.. Sekarang template telah terpasang dengan baik pada blog anda, kini tinggal langkah kustomisasi yang perlu diubah untuk penyesuaian pada masing-masing toko online.
Kustomisasi Template:
1. Pengaturan Shopping Cart (Setting Email Paypal dan Currency)
Ubah Pengaturan simpleCart.email menjadi email paypal atau googlecheckout anda, simpleCart.checkoutTo menjadi Paypal atau GoogleCheckout, dan simpleCart.Currency menjadi Mata Uang Support Paypal/GoogleCheckout yakni USD, GBP, EUR, AUD, CAD, CZK, DKK, HKD, HUF, ILS, JPY, MXN, NOK, NZD, PLN, SGD, SEK, CHF, THB. Mata Uang Rupiah (RP) tidak support, namun anda masih dapat memasukkannya hanya sebagai tampilan, dengan kata lain tidak tampil di halaman pembayaran paypal (berubah kembali menjadi dollar).
<script type='text/javascript'>
//<![CDATA[
/* SIMPLE CART SETTING
>>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = 'realwahyuputra@gmail.com';
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
//]]>
</script>
2. Pengaturan Order by E-Mail
a. Buka halaman penyedia contactform email di
http://kontactr.com/
b. Klik Sign-Up dan masukkan field yang diminta
c. Setelah berhasil sign-up, login dengan username dan password anda
d. Anda akan menuju halaman utama yang berisi kode-kode untuk menyisipkan contact form, perhatikan yang mana saja, misalkan Ajax Widget. Perhatikan pada angka ID anda setelah kode 'id='. Misal:
<script type="text/javascript"> id = 111323; </script>
<script type="text/javascript" src="http://kontactr.com/wp.js"></script>
e. Centang Expand Template Widget, lalu cari dan ubah angka yang di-bold dibawah ini dengan angka ID anda:
<span class='item_add'><script type='text/javascript'> id=111323; t=1; ctxt="Order via Email";
3. Pengaturan Menu atas, Menu utama dan Menu SocialNetwork
Cari dan ubah kode berikut:
Menu atas:
<ul id='top-nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Kategori</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Tentang Kami</a></li>
</ul>
Menu utama:
<ul class='nav'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='#'>Kategori Produk</a></li>
<li><a href='/p/sample-page.html'>Sample Page</a></li>
<li><a href='#'>Peluang Usaha</a></li>
<li><a href='#'>Promo Bulanan</a></li>
</ul>
Menu SocialNetworking:
<ul id='top_social'>
<li class='social_facebook'>
<a href='http://www.facebook.com/wahyu.putra' tooltip='facebook'><span>facebook</span></a></li>
<li class='social_twitter'>
<a href='#' tooltip='twitter'><span>twitter</span></a></li>
<li class='social_linkedin'>
<a href='#' tooltip='linkedin'><span>linkedin</span></a></li>
<li class='social_rss'>
<a href='#' tooltip='linkedin'><span>linkedin</span></a></li>
</ul>
4. Sekarang kita akan men-setting format posting blog. Hal ini perlu dilakukan agar postingan anda sesuai dengan format template yang dibuat. Klik Setelan > Format > Template Entri dan masukkan kode sebagai berikut:
<div class="item_image">
<img border="0" class="item_thumb" src="product_image.jpg" />
<span class="item_price">$00.00</span>
</div>
<div class="item_Description">
Descriptions...</div>
Cara menggunakannya yakni setiap anda membuat post baru, pilih tab Edit HTML pada post-editor, bukan tab Compose. Ubah product_image.jpg dengan link gambar produk anda, ubah $00.00 dengan harga produk (bisa dalam format RP sbg tampilan saja), dan ubah Descriptions... menjadi deskripsi produk anda.
5. Pengaturan logo
Cari dan ganti link gambar dibawah ini dengan link gambar logo anda dengan ukuran 369px x 61px
<div class='clearfix' id='header-wrapper'>
<a expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCLFTBQCqZZbhqxdNSxnjTOCYq4X4_4UXVc9s5OzHDm6ebUQqjrYRc8_KjVrpBgf6GmBj4Lu7CA8xwAIyk50QHJlyd1t5-aJ7aZq-aVSYCiXqfHQa4jAiy7LIZjVQ2QUzpOqU3hYy5wZNk/s1600/logo-bjb.png'/></a>
6. Pengaturan jumlah produk pada halaman utama
Produk yang ditampilkan sebaiknya berjumlah kelipatan 4 agar sesuai dengan template. Untuk mengubahnya klik menu Setelan > Format > Ubah 7 posting (default) menjadi kelipatan 4. Misalkan 20 posting.
7. Pengaturan Slideshow
Untuk mengatur dan mengubah slideshow dapat dengan menambahkan atau mengedit kode yang terdapat pada widget dibawah menu utama.
Ganti kode link gambar dibawah ini, atau gandakan kode untuk gambar lebih banyak.
<div id='casing'>
<div id='slider'>
<div id='mover'>
<div class='slide'>
<img alt="iPad 5" src="http://i56.tinypic.com/4q3jva.jpg" /> </div>
<div class='slide'>
<img alt="iPhone 4" src="http://i56.tinypic.com/ipscyf.jpg" /></div>
</div>
</div>
</div>
Jika sudah melakukan semua kustomisasi, jangan lupa klik tombol 'Simpan Template' untuk menyimpan hasil perubahan. Kini anda dapat melihat tampilan blog anda yang telah disulap menjadi toko online blogspot yang tidak kalah dengan toko online lainnya dengan kelebihan:
GRATIS,NO BANDWIDTH & HOSTING LIMITS, SEO-FRIENDLY!!!
Sekarang tinggal duduk manis dan nikmati betapa mengagumkannya blog anda sekarang :)
Tetap
jaga link pembuatnya dari footer dan template detail di template blog yang sudah anda download sebagai bentuk apresiasi anda untuk kami. Hal itu sangat kami harapkan :)
Selamat Mencoba!