Membuat Toko Online+add Cart via Blogspot ~ Ki Dasmet Sang Pemburu

Nama Template : Medical Modif New

Update!! versi terbaru untuk Template Medical Modif New ini bisa anda lihat DISINI. Sudah dilengkapi dengan berbagai fitur yang mendukung SEO terbaru.

Fitur :

Blogger Template
Shopping cart
Email Invoice
Green background
Slide Show
Grid Style
Drop down menu
Related post widget
order email notification
Page Checkout with order form and shopping cart
Thank you Page

Email invoice source code : www.irsah.com
Template designed : www.maskolis.com

Panduan Setting

Upload Template

Download Template dari Link di atas. Unzip dulu filenya, ada 2 file. File template dan Read me. Buka file Template di notepad atau notepad++.
Menuju ke dashboard blogspot anda, klik menu template >> klik edit html >> Copy dan paste semua script template yang anda download tadi ke bidang script template blog anda.
klik Pratinjau >> kalau sudah tampil klik simpan.

Setting Header

Keterangan gambar :

1. Merupakan widget page yang akan muncul secara otomatis jika anda membuat sebuah halaman baru di page.
2. Judul Blog, bisa anda edit dari widget header (masuk ke tata letak >> cari widget header >> klik edit >> Isi / ganti judulnya dan deskripsi blog>> simpan
3. Drop down menu bisa anda edit di bagian template >> klik edit html >> cari kode script berikut ini >> lalu edit beberapa bagian yang anda inginkan >> save template.

<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>
<li><a class='arrow' href='#'><span>Support</span>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'><span>Sport</span>Be healthy</a></li>
<li><a href='#'><span>Culture</span>Human Act</a></li>
<li><a class='arrow' href='#'><span>Entertainment</span>Enjoy your life</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='http://www.themes.tukangtokoonline.web.id/'><span>Premium Templates</span>Another Premium Themes</a></li>
<li><a href='http://www.tukangtokoonline.web.id/2014/02/template-herbal-medical-modif-new.html'><span>Help Instruction</span>How to use this template</a></li> </ul>

4. Ini adalah widget untuk berlangganan posting melalui email dengan menggunakan feed burner. Anda harus mendaftarkan dulu blog anda di feed burner (feedburner.com) dengan memakai akun gmail anda. Setelah mendapatkan id yang terdapat di bagian belakang link (misal: http://urlfeedburner/idfeedburneranda), ganti kalimat yang berwarna biru di bawah ini dengan id feedburner anda.

<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>

5. Label/Kategori ini akan muncul otomatis jika anda sudah membuat posting dengan label.
6. Link Icon sosial media ini bisa anda edit di template >> klik edit html >> temukan kode script berikut ini >> edit link sosial medianya dengan link sosmed toko anda sendiri.

<ul class='isocial'>
<li><a class='rss' href='#' target='_blank' title='Subscribe via RSS'/></li>
<li><a class='facebook' href='#' target='_blank' title='Become a Fan'/></li>
<li><a class='twitter' href='#' target='_blank' title='Follow Us'/></li>
<li><a class='google' href='#' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='#' target='_blank' title='Watch The Video'/></li>
</ul>

Setting shopping cart dan ucapan selamat datang

UPDATE !!! : adanya update dari PHP 5.4 ke PHP 5.5 dari server hosting, membuat ada sedikit perubahan editing di setting templatenya dengan membuang / menghapus http: dari script di bawah :

data.shop_name = "Template medical Modif herbal";
data.shop_url = "http://demo-medicalmodifnew.blogspot.com/";
data.shop_thankyou = "http://demo-medicalmodifnew.blogspot.com/p/success.html";
data.shop_sendFail = "http://demo-medicalmodifnew.blogspot.com/p/error.html";

dan hasilnya nampak seperti panduan berikut :

1. Masih di dashboard blog anda masuk ke template >> klik edit html >> cari kode script berikut >> dan edit karakter yang berwarna biru. Jika tidak ada datanya hapus dan isikan dengan ' - ' (dis/garis tengah) >> lalu klik save jika sudah benar.

// Customize URL, links and Blogshop name
data.shop_name = "Template medical Modif herbal";
data.shop_url = "//demo-medicalmodifnew.blogspot.com/";
data.shop_thankyou = "//demo-medicalmodifnew.blogspot.com/p/success.html";
data.shop_sendFail = "//demo-medicalmodifnew.blogspot.com/p/error.html";
data.shop_email = "bisnis.aira@gmail.com";
// Currency to display in email invoice
data.shop_currency = "Rp ";
// Customize blogshop business preferences. Leave " - " (dash) if not required
data.shop_bizname = "Template medical Modif herbal";
data.shop_bizaddress = "Kuala Lumpur, Malaysia";
data.shop_bizphone1 = "024-361 8321";
data.shop_bizphone2 = "024-361 8321";
data.shop_bizphone3 = "024-361 8321";
// Customize blogshop banking preferences. Leave " - " (dash) if not required
data.bank1 = "Bank BCA";
data.bank1_acc_no = "1234 1234 1111 22";
data.bank1_acc_name = "John Doe";

data.bank2 = "Bank Mandiri";
data.bank2_acc_no = "1234 1234 1111 22";
data.bank2_acc_name = "Jane Doe";

data.bank3 = "Bank BNI";
data.bank3_acc_no = "1234 1234 1111 22";
data.bank3_acc_name = "John Doe";

// Customize blogshop additional notes. Leave " - " (dash) if not required
// Additional notes to include in automated e-mail
data.note1 = "Our PAYPAL secured gateway at http://www.your_PAYPAL_secured_link.com";
data.note_detail1 = "Our Google Wallet secured payment gateway at http://www.your_GOOGLEWallet_secured_link.com";
data.note2 = "Altenative Our merchant KlikBCA at:";
data.note_detail2 = "http://www.klikBCA.com";

2. Untuk mengedit ucapan selamat datang dan icon gambarnya, masih di bagian edit html template, cari script berikut, lalu edit sesuai petunjuk di bawah.

<div class='info'>
<img alt='Customer service' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEistS3ZlEyoVJqlIjQn3BOuzt_hKcL12twqgqBonF3mdEdeaM-akxxUUzum2NfuA_8RcBFuIOHQeKT7Jof1AK5i2DfHWWqOojdf7R9YpQJ7X1Gj6gvcMqM3RfmubrgWb-FDCm4c_LwZw6vD/w658-h526-no/' width='100'/> <h2><b>Selamat datang di toko kami</b></h2>
Ucapan selamat datang ini bisa anda ganti sesuai keinginan anda, cari kalimat ini di html template dan ganti..
</div></div>

Keterangan :
link warna merah : ganti dengan link icon gambar anda.
kalimat berwarna biru : ini adalah judul, ganti dengan judul selamat datang anda.
Kalimat berwarna ungu : ganti dengan kalimat selamat datang anda sendiri.

3. Untuk membuat halaman checkout, masuk ke Laman >> buat laman baru >> beri judul checkout >> lalu save. Pastikan alamat urlnya adalah sbb : bloganda.blogspot.com/p/checkout.html.
Lalu klik edit laman checkout tersebut, masuk ke mode html, copy dan paste kode script berikut ke laman checkout tsb >> jika sudah benar klik publikasikan.

<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 border="1px"><tbody>
<tr><td><div class="checkout-form">
<form action="" id="contact" method="post">
<fieldset>
<label for="firstname">Nama Depan</label> :<br />
<input id="first_name" name="firstname" placeholder="First Name" title="Enter your First Name" type="text" /><br />
<br />
<label for="lastname">Nama Belakang</label> :<br />
<br />
<input id="last_name" name="lastname" placeholder="Last Name" title="Enter your Last Name" type="text" /><br />
<br />
<label for="email">E-mail Anda</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;">Please.., fill with Valid Email.</span></i></b></div>
<br />
<label for="phone">Phone/HP</label> :<br />
<input id="phone" name="phone" placeholder="Preferred mobile number" type="text" /><br />
<br />
<label for="delivery_address"><b>Kota Pengiriman? </b></label> <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 />
<br />
<label for="address">Alamat Lengkap</label> :<br />
<br />
 <textarea id="address" name="address" placeholder="Full address please for prompt delivery, include unit number, street, area, state and country."> </textarea><br />
<br />
<label for="postcode">Kode Pos</label> :<br />
 <input id="postcode" name="postcode" placeholder="Address postal code" type="text" /> <br />
<br />
<label for="message">Pesan Anda</label> :<br />
 <textarea id="comments" name="message" placeholder="Optional"> </textarea><br />
<br />
<div style="text-align: center;">
<a class="simpleCart_checkout button" href="javascript:;" id="sent-order">Kirim Pesanan</a></div>
<div>
<div>
<br /></div>
Rincian selengkapnya dikirimkan ke email anda secara otomatis. Kami berharap anda puas berbelanja di toko kami. Kami akan selalu menunggu kedatangan Anda kembali untuk pengalaman berbelanja di toko kami selanjutnya. Terima Kasih. </div>
<div>
<br />
Mohon baca keseluruhan <a alt="terms and policy" href="http://www.blogger.com/p/terms-policy.html"><b>Terms and Policy</b></a> Kami sebelum anda order. Semua rincian data yang dikirimkan dijaga secara rahasia dan tidak akan dipublikasikan. </div>
</fieldset>
</form>
</div>
</td>
<td><div class="checkout-details">
<h3>
<b>Mohon Dibaca dulu!!</b></h3>
<b>Panduan Checkout</b> <br />
<ol>
<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>Pada opsi Kota Pengiriman, pilih dari menu drop down kota Anda.</li>
<li>Jika tidak ada opsi pilihan, pilih Other, Informasi biaya kirim akan kami konfirm kemudian.</li>
<li>Kirimkan (Kirim Pesanan) order Anda. </li>
<li>Sebuah e-mail otomatis akan dikirimkan ke alamat email anda sebagai pemberitahuan (periksa di INBOX atau Folder SPAM). </li>
<li>Anda bisa menemukan rincian order dan metode pembayaran yang bisa membantu memilih sesuai dengan preferensi anda. </li>
</ol>
<b>Mitra Pembayaran Kami :</b> <br />
<ol>
<li>Bank BCA (Bank Transfer) </li>
<li>PAYPAL </li>
<li>Google Wallet </li>
<li>Bank Mandiri (Bank Transfer) </li>
<li>Bank BNI (Bank Transfer)</li>
<li>Bank BRI (Bank Transfer) </li>
</ol>
<b>Mitra Kurir Toko Kami :</b> <br />
<ol>
<li><b>JNE - </b>Kurir JNE. </li>
<li><b>Tiki - </b>Titipan Kilat. </li>
<li><b -="" b="" gt="" ind.="">POS Indonesia. </b></li>
</ol>
</div>
</td>
</tr>
</tbody></table>

Jika sudah benar, maka hasil tampilannya akan seperti ini :

4. Membuat halaman terima kasih, masih di bagian laman, klik laman baru >> isi judul dengan Success >> lalu publikasikan. Masih di laman, klik edit laman success tadi (pastikan alamat urlnya adalah bloganda.blogspot.com/p/success.html), masuk ke mode html, isi konten dengan script berikut :

<br />
Segera periksa Inbox email anda (atau folder SPAM jika tidak ada di Inbox) untuk detail informasi invoice pesanan Anda..<br />
Secepatnya kami akan memproses dan merespon dengan mengirimkan pesan SMS untuk order yang sudah Anda lakukan..<br />
<br />
TTD<br />
Admin

Atau anda bisa memodifikasi kalimatnya sendiri. Kemudian klik publikasikan.

5. Seperti halnya membuat halaman terima kasih pada poin 4 di atas, untuk membuat halaman error, anda harus membuat judul laman dengan Error dan pastikan alamat linknya adalah bloganda.blogspot.com/p/error.html, lalu isi dengan script seperti berikut ini atau anda bisa memodifikasinya sendiri :

Mohon periksa lagi input data yang anda masukkan kemungkinan belum lengkap atau ada kesalahan...<br />
<br />
Terima Kasih<br />
Admin

Memasang script Post Template

Script ini berfungsi sebagai template post, sehingga hasil postingan produk anda akan memiliki tampilan yang sama. Setiap kali anda melakukan entry baru, template ini akan muncul dan membantu anda untuk melakukan posting.
masuk ke setelan/setting >> post dan komentar >>copy dan paste script berikut ke halaman post template seperti gambar di bawah ini.

<div class="product_image">
<a class="cloud-zoom" href="link_gambar_anda.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="link_gambar_anda.jpg" /></a>
<span class="item_price">Rp 350,000</span></div>
<div class="product_describe">
Deskripsi produk tulis disini
</div>

Keterangan :

Untuk menampilkan script tersebut harus pada mode html (bukan mode compose!!) pada saat posting entry baru.
link_gambar_anda.jpg :ganti dengan link gambar tempat gambar produk anda disimpan (misal di picasaweb.com, photobucket.com atau hosting anda sendiri, cari panduannya di google banyak sekali)
Rp 350,000 : Ganti dengan harga produk anda, pisahkan ribuan dengan koma bukan titik!!
Deskripsi produk tulis disini : kalimat ini bisa anda pada mode compose dengan deskripsi produk anda sendiri.