Template Toko Online Blogspot lengkap

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://tokonengocop.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.

4 Coloumn Footer
Dengan tampilan footer 4 kolom anda dapat dengan leluasa meletakkan link, widget, info kontak, dlsb. Feel free
:D
Custom Header Logo
Tidak lagi header dengan sekedar Text link nama blog/toko online. Buat lebih elegan dengan menempatkan logo
terbaik anda disini :)

Header Ads Place

Ingin meletakkan banner iklan atau produk di tempat terbaik? Letakkan di header sebelah logo.

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.

Download di http://www.indowebster.com/bjb_template_wahyuputra_web_id.html
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 = 'royuzuki@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=&quot;Order via Email&quot;;

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='http://1.bp.blogspot.com/-
UUqAilFTo1I/TpwGIQbOQzI/AAAAAAAAAIg/DyCyzmtnLBM/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