Manual Install Template Premium Tukang Toko Online: Panduan Install dan Setting Kul Template dan Woo Template

Install Template

1. Login ke Akun Blogger Anda, lalu masuk ke dashboard blog Anda.
2. Menuju ke Template >> klik edit HTML
3. Buka file template Kul Template yang sudah anda terima dari Tukang Toko Online dengan menggunakan Notepad.
4. Copy semua script dari notepad tsb. ke halaman script di bagian edit HTML template blog Anda.
5. Preview, lalu Simpan.

Setting Meta Template

1. Masuk ke Template >> klik edit HTML 2. Cari kode berikut seperti nampak dalam gambar di bawah ini, lalu ganti dengan profil blog anda sendiri, mulai deskripsi blog, keyword blog anda, nama pemilik blog dan email blog anda:

Setting Header

Pasang drop down menu
1. Masuk ke layout/tata letak. 2. Cari widget 'header menu' seperti gambar berikut, lalu klik edit :

3. Kemudian paste kode script berikut ke kolom text html widget.

<nav id="menu"><input type="checkbox" /><label>≡<span>Menu</span></label>
<ul><li><a href="/" style="background:#000;" title="Home">Home</a></li>
<li><a href="#" title="menu1">menu1</a></li>
<li><a href="#" title="menu2">menu2</a></li>
<li><a href="#" title="menu3">menu3</a></li>
<li><a href="#" title="menu4">menu4</a></li>
<li><a class="prett" href="#" title="Drop Menu">Menu</a>
<ul class="menus">
<li><a href="#" title="submenu1">submenu1</a></li>
<li><a href="#" title="submenu2">submenu2</a></li>
<li><a href="#" title="submenu3">submenu3</a></li>
</ul></li>
</ul></nav>

Keterangan :
# : Ganti dengan url sesuai tempat link nama menu anda berada
Ganti teks warna merah sesuai dengan menu yang ingin anda pasang.

4. Simpan Widget jika sudah benar.

Pasang Logo Toko

1. masih di tata letak / layout tadi.
2. edit widget Header.
3. pilih gambar logo yang ingin anda pasang lalu upload gambar, ukuran maksimal lebar 300pixel, tingginya menyesuaikan.

Pasang Link Social Icon

1. Masuk ke Template >> klik edit HTML,
2. Lalu cari kode script berikut ini:

<ul class='isocial'>
<li><a class='rss' href='http://feeds.feedburner.com/PasarTokoOnlineMurahDanBerkualitas' target='_blank' title='Subscribe via RSS'/></li>
<li><a class='facebook' href='http://facebook.com/tukangtokoonline' target='_blank' title='Become a Fan'/></li>
<li><a class='twitter' href='http://twitter.com/tukangtokoonline' target='_blank' title='Follow Us'/></li>
<li><a class='google' href='http://plus.google.com/+tukangtokoonlinewebid' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='#' target='_blank' title='Watch The Video'/></li>
</ul>

Keterangan :
Ganti teks berwarna merah dengan link url sosial media anda sendiri.

3. kemudian simpan templat anda

Pasang Langganan Newsletter
1. Masuk di template >> edit HTML Template.
2. Cari script kode berikut ini :

<div id='searchbarleft'><form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=PasarTokoOnlineMurahDanBerkualitas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == '') {this.value = 'Enter your email address...';}' onfocus='if (this.value == 'Enter your email address...') {this.value = '';}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='PasarTokoOnlineMurahDanBerkualitas'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form></div>

Keterangan :
Ganti teks berwarna merah dengan id feedburner anda
Untuk mendapatkan id feedburner ini, anda harus mendaftarkan blogspot anda dulu di feeburner.com

Pasang Hotline Toko

1. Masih di Edit HTML Template.
2. Cari script kode berikut :

<div id='searchbarright1'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJqRBa3jYLFa1ZtkrzSzW60rpUfQvYX2LCGjBZtNQWipUqleUM2ESICLjlFrsmpGkX7-Ettwgcx7ULT2xKyUKPFEljNEfdg96DzYDYeBmfwnEiezMA1um7rseuOeowVMd1Iqhs5Btm537U/s512/call%2520us.png' width='20px'/> 081234 567 891
</div>

Keterangan :
Ganti teks/angka warna merah dengan nomor telpon Hotline Toko Anda.

3. Simpan Template

Setting Product Page

Pasang Post Template

1. Masuk ke Setting/setelan >> pilih Post dan komentar, lihat gambar di bawah:

2. Copy kode berikut dan pasang di Template entri tersebut.

<div class="product_image">
<a class="cloud-zoom" href="Link_gambar _produk.jpg" rel="softFocus: true, position:'inside', smoothMove:2" />
<img border="0" class="item_thumb" src="Link_gambar_produk.jpg" /></a>
<span class="item_price">Rp 3,750,000</span></div>
<div class="product_describe">
<table border="1px" max-width="100%"><tbody>
<tr><td style="font-weight: bold; padding: 5px;">Product Name :</td><td style="padding: 5px;">Nama Produk</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Product Code:</td><td style="padding: 5px;">Kode Produk</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Stock :</td><td style="padding: 5px;">Ready</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Summary Spec :</td><td style="padding: 5px;">Spesifikasi ringkasan</td></tr>
</tbody></table>
</div>
<br /><br />
Upload gbr produk tambahan disini
<br /><br />
<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1"><script>document.write(Title1);</script></a></li>
<li><a href="#tab2"><script>document.write(Title2);</script></a></li>
</ul>
<div class="clear">
<div class="tab-wrapper">
<div class="tabber" id="tab1" style="padding: 8px;">
Tulis Deskripsi produk anda di bagian ini</div>
<div class="tabber" id="tab2" style="padding: 8px;">
Spesifikasi lengkap tulis di bagian ini
</div>
<div class="clear">
</div>
</div>
</div>
</div>

Keterangan :
teks warna merah adalah teks yang bisa anda rubah sendiri sesuai dengan kebutuhan produk yang ingin anda tampilkan.

3. Simpan setelan

Setting Entry Post

1. isi judul, label dll. seperti secara umum saat anda posting blogspot.
2. Tampilan di mode compose entry post akan seperti seperti berikut jika ini anda membuat posting baru setelah melakukan langkah sebelumnya.

3. Anda bisa mengganti langsung semua tulisan tersebut sesuai dengan kebutuhan posting produk anda.
4. Menuju ke mode HTML maka tampilan akan seperti berikut ini :

5. Ikuti langkah selanjutnya seperti gambar di atas. Pastikan bahwa anda sudah menghapus 2 url seperti gbr tersebut di atas sebelum anda mempublikasikan posting anda.

Tips: agar url tsb tidak muncul lagi, klik publikasikan posting dari mode html bukan dari mode compose.

6. Klik pratinjau dulu untuk melihat hasilnya, jika sudah sesuai, klik publikasikan.

Setting Checkout Page

1. Masuk ke Page >> buat laman baru >> Buat page dengan judul Checkout >> masuk ke mode HTML >> masukkan script berikut ini :
Tips : Agar judul page tidak berubah, begitu mengisi judul page, langsung publikasikan, baru klik edit kembali page tersebut.

Pastikan page yang anda buat alamat permalink urlnya adalah :
namatoko.blogspot.com/p/checkout.html

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheC2QDL3d2YNcOYjCikIhFr27VRn_MoNpgF8t05PgnHHS12_T5D84gVIrVg21nYVDiNJH0n1YpmAXQlSdKVBAMitYxMJr5xyHBjZH72NYHNaVc4GxtZx43q9knlYsreYozf51Z-q1tz4nw/s1600/checkout%2520image%2520animasi.gif" width="100%" /> <br />
<div id="cart-details">
<h3 style="text-align: center;">
<span style="color: #073763;"><u>Item di Keranjang Anda Sekarang</u></span></h3>
<div class="simpleCart_items">
<table><tbody>
<tr class="headerRow"><th class="item-thumbimg"></th><th class="item-name">Item</th><th class="item-price">Price</th><th class="item-decrement"></th><th class="item-quantity">Qty</th><th class="item-increment"></th><th class="item-total">Total</th><th class="item-remove">Cancel</th></tr>
</tbody></table>
</div>
<h4 class="button" style="display: block; text-align: center;">
Total Belanja Anda : <span style="color: red;"><span class="simpleCart_total">Rp 0.00</span></span>
</h4>
</div>
<br />
<table><tbody>
<tr><td><div class="checkout-form">
<form action="" id="contact" method="post">
<fieldset>
<center>
<label for="firstname">Nama Depan</label>:<br />
<input id="first_name" name="firstname" placeholder="First Name" title="Enter your First Name" type="text" /><br />
<label for="lastname">Nama Belakang</label> :<br />
<input id="last_name" name="lastname" placeholder="Last Name" title="Enter your Last Name" type="text" /><br />
<label for="email">Alamat E-mail</label> :<br />
<input id="email" name="email" placeholder="Valid e-mail required." title="Your e-mail address" type="text" /> <br />
<div id="emailInfo">
<b><i><span style="color: red;">Mohon.., diisi dengan Valid Email.</span></i></b></div>
<label for="phone">Telp. / HP</label> :<br />
<input id="phone" name="phone" placeholder="Preferred mobile number" type="text" /><br />
<b>Lokasi Pengiriman?</b><br />
<select id="deliveryLocation"> <option selected="" value="Not_Selected"> - Tarif Pengiriman JNE OKE kota Pilihan - </option>
<option value="7000"> Jakarta Kota - 1 pc Rp 7,000 </option>
<option value="Not_Selected"> --Jawa Barat-- </option>
<option value="9000"> Bandung - 1 pc Rp 9,000 </option>
<option value="12000"> Tasikmalaya - 1 pc Rp 12,000</option>
<option value="Not_Selected"> --Jawa Timur-- </option>
<option value="15000"> Surabaya - 1 pc Rp 15,000 </option>
<option value="17000"> Malang - 1 pc Rp 17,000 </option>
<option value="Not_Selected"> --Jawa Tengah-- </option>
<option value="14000"> Semarang - 1 pc Rp 14,000 </option>
<option value="14000"> Solo - 1 pc Rp 14,000 </option>
<option value="Not_Selected"> --Banten-- </option>
<option value="8000"> Serang - 1 pc Rp 8,000 </option>
<option value="Not_Selected"> --Bali-- </option>
<option value="17000"> Denpasar - 1 pc Rp 17,000 </option>
<option value="Not_Selected"> --Other-- </option>
<option value="TBC"> Others </option>
</select><br />
<label for="address">Alamat Pengiriman</label> :<br />
 <textarea id="address" name="address" placeholder="Full address please for prompt delivery, include unit number, street, area, state and country."> </textarea><br />
<label for="postcode">Kode Pos</label> :<br />
 <input id="postcode" name="postcode" placeholder="Address postal code" type="text" /><br />
<label for="message">Pesan Anda</label> :<br />
 <textarea id="comments" name="message" placeholder="Optional"> </textarea><br />
</center>
<div style="text-align: center;">
<a class="simpleCart_checkout button" href="javascript:;" id="sent-order">Send Order</a></div>
<div style="color: blue;">
<br />
Rincian selengkapnya dikirimkan ke email anda secara otomatis. Kamiberharap anda puas berbelanja di toko kami. Kami akan selalu menunggu kedatangan kembali untuk pengalaman belanja di toko kami selanjutnya. Terima Kasih. </div>
</fieldset>
</form>
</div>
</td>
<td><div class="checkout-details">
<b>Panduan Checkout</b> <br />
<ol></ol>
<ul>
<li>Pilih Produk.</li>
<li>Lengkapi form data yang sesuai dengan data anda yang valid untuk mempercepat proses order dan pengiriman. Semua data yang dikirim dijaga secara rahasia sesuai dengan kebijakan Toko Kami. </li>
<li>Kirimkan (Send) order Anda. </li>
<li>Anda bisa menemukan rincian order dan metode pembayaran yang bisa membantu memilih sesuai dengan preferensi anda. </li>
</ul>
<ol></ol>
<b>Mitra Pembayaran Kami :</b> <br />
<ol></ol>
<ul>
<li>Bank BCA (Bank Transfer) </li>
<li>Bank Mandiri (Bank Transfer) </li>
<li>Bank BRI (Bank Transfer) </li>
<li>Bank BTN (Bank Transfer) </li>
<li>Bank BNI (Bank Transfer)</li>
<li>Bank BRI (Bank Transfer) </li>
</ul>
<ol></ol>
<b>Mitra Kurir Toko Kami :</b> <br />
<ol></ol>
<ul>
<li><b>JNE - </b>Kurir JNE. </li>
<li><b>Tiki - </b>Titipan Kilat. </li>
<li><b -="" b="" gt="" ind.="">POS Indonesia. </b></li>
</ul>
<ol></ol>
</div>
</td>
</tr>
</tbody></table>

Keterangan :
1. Anda bisa mengedit biaya kirim JNE berdasarkan kota asal anda ke sejumlah kota besar yang tertera.
2. Untuk kalimat Panduan Checkout, anda bisa mengeditnya melalui mode compose

2. Lihat di pratinjau dulu, jika sudah benar, publikasikan.

Membuat Succes Page dan Error Page

1. buat laman baru.
2. Ketik judulnya 'Success'
3. Publikasikan dan edit kembali laman yang baru anda buat tersebut.
4. Isi kolom postingnya sesuai keinginan anda, lalu publikasikan lagii.
5. Pembuatan Laman error sama seperti di atas, hanya judulnya 'Error'.

Setting Sidebar widget

Pasang Banner Advertising

1. masuk ke layout/tataletak.
2. klik edit widget Banner adv. seperti gambar di atas.
3. Pasang script di bawah ini :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZKtUbXLsOw2C_Hyoh6UClPqH92SWCQVAFXpscr5GVAR3ZEQBkiKyo-hKcPVQ7D9xF0X7cs8KZ6gizND2OXTnM5kslISBzBXn8dQivNOXrEvuyoY7onJZeIIDf5-YzBs0ghUKSRQv9UC-/s1600/sale_banner1.jpg" width="100%"/>

Keterangan :
ganti url gbr warna merah tersebut dgn url gambar iklan anda sendiri.

4. Simpan widget

Pasang widget Customer Service

1. masuk ke layout/tataletak.
2. klik edit widget Customer Service seperti gambar di atas.
3. Pasang script di bawah ini :

<div style="text-align:center;font-weight:bold">Contact Us ---------- 081234 567 891<br/>
Pin BBM ---------- abc123<br/>
Line ---------- mylineid<br/>
Whatsapp ---------- 081234 567 891<br/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVo18M1TGW5N9K3rrzg0ndcJSBa5WRN4NDyMCeq25nYkDlFr0fWo4T8P-XCwx-LEbbrcGHoGHmdZ5O4AzaQw-nCDCQNZc0lU23ie3HxLGQFz3ATfQyeBojBIDC3pRecoXMkQO1r6Qwzqc/s1600/donate.png" width="80%"/></div>

Keterangan :
ganti teks kontak dengan data kontak anda sendiri.
ganti link gambar dengan link gbr anda sendiri.

4. Simpan widget

Pasang widget Recent based label
1. masuk ke layout/tataletak.
2. klik edit widget Recent post based label seperti gambar di atas.
3. Pasang script di bawah ini :

<style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:0 0 5px 10px;}
.recent_posts_with_thumbs {float: right;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;display:none;}
</style>
<script src="https://googledrive.com/host/0B_AQLlXFW-DAZjRobGE2Vkg2YXc"> </script>
<script>var numposts = 2;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 70;</script>
<script src="http://namatokoanda.blogspot.com/feeds/posts/default/-/label?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Keterangan :
var numposts = 2 -->ganti angka 2 dengan jumlah post yang ingin tampil
var numchars = 70 -->ganti dengan jumlah karakter yang ingin tampil pada deskripsi produk
http://namatokoanda.blogspot.com/feeds/posts/default/-/label? --> ganti dengan nama toko anda dan label yang ingin anda tampilkan di widget (perhatikan hurufbesar, kecil dan spasi harus sama)

4. Simpan widget

Setting Shopping Cart

1. menuju ke Template >> edit HTML >> cari script berikut ini :

Keterangan :
Ganti Kul template dengan Nama Toko Anda
Gantil kultemplate.blogspot dengan namasubdomain toko anda
Ganti data bank, telpon, alamt, kontak dll. sesuai data toko anda, jika tidak ada hapus dan ganti dengan garis tengah/dis (-).
Pastikan kode yang lain tidak terhapus.

2. Simpan Template

Setting Tampilan Seluler

Dari dashboard blog anda, menuju ke template >> klik icon gir di setting seluler lihat gambar di bawah ini dan ikuti petunjuknya..

Khusus untuk Woow Template

Setting Custome Warna dan Huruf di Perancang Template Blogger (Blogger Template Designer)

1. Masuk ke Template >> Pilih Sesuaikan >> Setelah Masuk ke Perancang Template Blogger, Pilih opsi Tingkat Lanjut (lihat Gambar di bawah ini) >> atur warna dan font sesuai keinginan anda >> terapkan ke blogspot

Update !!
Menambahkan Badge Label.
Untuk menambahkan badge New, Promo, Habis dan Hot di setiap posting produk, cukup menambahkan pada label di saat membuat posting produk dengan salah satu label (New, Promo, Habis dan Hot), Perhatikan juga huruf besar dan kecil harus sama karena case sensitive agar badge bisa muncul di blog anda.