Template Toko Herbal, Toko Obat atau Toko Online Lain

6/15/2016 2
Ketika melakukan cek statistik unduhan beberapa template, ternyata template yang bernuansa hijau dan biasanya dipakai untuk toko herbal, toko obat atau beberapa produk yang berbau medis cukup banyak menarik perhatian pengunjung blog ini.

Ini juga ditunjukkan dengan banyaknya feedback melalui kolom komentar terhadap template dengan konsep hijau ini. Ada beberapa template yang cukup banyak peminat, baik yang versi gratisan maupun premium, Anda bisa cek di beberapa posting berikut ini:


Beberapa template yang Saya bagikan pada posting di atas cukup memberikan respon positif, khususnya untuk template herbal medical modif. Template ini ternyata memberikan respon yang paling banyak. Sayangnya masih banyak kelemahan untuk template Herbal Medical Modif ini.

Mungkin pada saat template tersebut di dibuat, fitur yang ada sudah cukup lengkap dan sesuai dengan kebutuhan pada saat itu. Namun seiring perkembangan teknologi dunia maya yang sangat pesat, ada beberapa fitur yang harus disempurnakan.

Nah, di posting kali ini, secara khusus akan membagikan update template Herbal Medical Modif tersebut. Tentu saja dengan sudah ditambahkan fitur-fitur yang mendukung SEO terbaru, khususnya untuk fitur yang paling penting, yaitu mobile friendly.

Benar. Kelemahan utama dari template terdahulu adalah belum disertakannya fitur responsive design. Sehingga cukup menjadi titik lemah dalam hal SEO pada saat ini. Karena sekarang akses internet sebagian besar sudah dilakukan melalui gadget, so, fitur Mobile Friendly menjadi sebuah keharusan bagi template.

Sedangkan untuk mengoptimalkan SEO lainnya pada toko online dengan blogspot, Anda bisa mendapatkan informasinya dari artikel bagus berikut ini


Nah, tulisan selanjutnya akan membahas mengenai fitur template Medical Green ini, serta bagaimana cara mendapatkannya dengan gratis. Silakan baca baik-baik.

Template Medical Green

Medical Green Template

LIVE DEMO

Beberapa fitur utama dari Template Medical Green ini :










Panduan pemasangan dan editing Template Medical Green

Sebagian besar cara editing dan pemasangan template ini hampir sama dengan template Herbal Medical Modif, karena ini adalah pengembangan dari template tersebut. Namun untuk lebih memudahkan, disini akan di jelaskan semuanya dari awal.

Langkah #1. Extract file template
Langkah #2. Copy semua script template dan pastekan ke bagian HTML template di blog Anda.
Langkah #3. Jika ingin mengganti banner header, cari URL gambar berikut ini :

https://lh6.googleusercontent.com/-WFaRLcuazlQ/Ua4NU2UcfrI/AAAAAAAAAIs/dGHSbYuMaZk/s950/headerherballebah.jpg

Ganti dengan URL banner Anda sendiri dengan ukuran 960 x 300 dpi
banner header medical green

Langkah #4. Mengedit menu utama, cari script berikut ini, lalu ganti dengan link dan data dari toko online Anda :

<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='menu-hanap' href='#' style='color:#fff;padding-left: 5px;padding-right: 5px;'><i class='fa fa-list'/> Menu</a>
<ul class='shnav shareink-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Fitur</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Tag and Styling</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 4</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Item 4</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='/p/checkout.html' itemprop='url'><span itemprop='name'>Checkout</span></a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

Keterangan :
Ganti huruf warna merah dengan data toko Anda.

menu dropdown responsive

Langkah #5. Mengganti kalimat selamat datang di html template. Cari dan temukan kalimat tersebut kemudian ganti dengan rangkaian kalimat selamat datang milik Anda sendiri.

welcome store

Langkah #6. Memasang Widget Customer Service. Pasang script berikut ini di widget customer service melalui tab tata letak / layout di blog Anda. Sebelumnya ganti dulu datanya dengan data toko Anda.

<div class="smart_ftbox conta">
<div class="kontak"><div class="iconct telp"></div>
<div class="cnt"><p>Telpon:</p> 0212345567</div></div>
<div class="kontak"><div class="iconct sms"></div>
<div class="cnt"><p>SMS/WhatsApp:</p> 085779188529</div></div>
<div class="kontak"><div class="iconct bbm"></div>
<div class="cnt"><p>BB Messenger:</p> ABCDEF</div></div>
<div class="kontak"><div class="iconct mail"></div>
<div class="cnt"><p>Email:</p> kontak@email.com</div></div>
</div>

Langkah #7. Mengedit pop up order via SMS. Masuk ke HTML Template, kemudian cari kata-katanya, selanjutnya tinggal edit disesuaikan dengan data Toko Anda sendiri. Tombol untuk SMS hanya akan muncul jika dibuka di HandPhone.

<!-- Konten popup, silahkan ganti sesuai kebutuhan -->
  <center>Order via <b>SMS/WhatsApp: 08123 456 789</b> atau <b>pin BBM : ABC1234</b> dengan format:<br/><br/>
    <span style='font-size:18px;font-weight:bold;border: dashed #333 1px;padding: 1px;color: #000;background:#fff;'>produk/jumlah(qty)/Nama/alamat/kota</span><br/></center><br/>
Format order tidak harus sama, yang penting bisa kami pahami. Secepatnya Kami akan melakukan konfirmasi melalui SMS ke no Hp Anda, setelah Order Kami terima.
  <center><br/>
  <a href='sms:08123456789?&amp;body=produk/Jumlah/Nama/alamat/Kota' id='tombolsms' style='font-weight:bold'><i class='fa fa-mobile'/> SMS DISINI!!</a>
</center>
<!-- Konten popup sampai disini-->


Order via SMS

Langkah #8. Setting data Shopping cart di HTML Template. Cari script berikut, kemudian edit datanya sesuai dengan data toko Anda.

  // Customize URL, links and Blogshop name
  data.shop_name = "Template medical Green";
  data.shop_url = "//medicalgreentemplate.blogspot.com";
  data.shop_thankyou = "//medicalgreentemplate.blogspot.com/p/success.html";
  data.shop_sendFail = "//medicalgreentemplate.blogspot.com/p/error.html";
  data.shop_email = "bisnis.aira@gmail.com";

  // Currency to display in email invoice
  data.shop_currency = "Rp&nbsp;";

  // Customize blogshop business preferences. Leave " - " (dash) if not required
  data.shop_bizname = "Template medical Green";
  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 = "WhatsApp: 08123456789";
  data.note_detail1 = "Pin BBM : 123abc";
  data.note2 = "Hotline : 08123456789";
  data.note_detail2 = "Secepatnya Kami akan melakukan konfirmasi order Anda melalui SMS ke nomor HP yang ssudah Anda daftarkan";
});

Langkah #9. Memasang laman Form Checkout. Buat sebuah laman, dan pastikan bahwa url nya memiliki format berikut :

namatoko.blogspot.com/p/checkout.html

Buat laman Succes dan pastikan URLnya adalah sebagai berikut :

namatoko.blogspot.com/p/success.html

Buat laman Error dan pastikan juga URLnya adalah sebagai berikut :

namatoko.blogspot.com/p/error.html

Khusus untuk laman Checkout, jika sudah jadi, masukkan script berikut ini pada mode HTML :

<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&nbsp;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</label>:<br />
<input id="first_name" name="firstname" placeholder="Nama" title="Masukkan Nama Anda" type="text" /><br />
<input id="last_name" name="lastname" placeholder="Last Name" style="display: none;" title="Enter your Last Name" type="text" value="-" /><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 />
<select id="deliveryLocation" style="display: none;"> <option selected="" value="Not_Selected"> - Tarif Pengiriman JNE OKE kota Pilihan - </option>
</select><br />
<label for="address">Alamat Pengiriman</label> :<br />
&nbsp;<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 />
&nbsp;<input id="postcode" name="postcode" placeholder="Address postal code" type="text" /><br />
<label for="message">Pesan Anda</label> :<br />
&nbsp;<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>
<!-- End checkout-form --></td>
<td><div class="checkout-details">
<b>Panduan Checkout</b> <br />
<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>
<b>Mitra Pembayaran Kami :</b> <br />
<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>
</ul>
<b>Mitra Kurir Toko Kami :</b> <br />
<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>
</div>
<!-- End checkout-details --></td>
</tr>
</tbody></table>
Keterangan :
Anda hanya bisa mengedit di bagian panduan order saja, untuk form jangan diedit jika tidak ingin terjadi error.
Editing bisa dilakukan pada mode compose

Untuk laman Success, tambahkan script berikut ini di bagian paling bawah pada mode html.
<script>  $(document).one('ready', function () {    for(simpleCart_items in localStorage) {      delete localStorage[simpleCart_items];    };  });</script>

Langkah #10. Memasang post template. Ini berfungsi agar setiap posting yang Anda lakukan bisa lebih mudah dan memiliki tampilan yang sama.

Masuk ke Setting/pengaturan >> pilih post dan komentar >> tambahkan script berikut ke post template:

<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
Gambar produk tambahan bisa diupload disini
</div>

Keterangan:
link_gambar_anda.jpg = Ganti dengan link gambar utama produk Anda. Gambar ini yang Akan tampil di homepage toko Anda. Gambar bisa diupload di hosting sendiri, atau di upload ke picasaweb.com.
Rp 350,000 = Ganti dengan harga produk Anda. Pastikan memakai koma ( , ) untuk menandai ribuan.

Langkah #11. Setting Tampilan Seluler. Agar tampilan mobile bisa muncul maksimal, seting tampilan seluler dengan memilik tidak, seperti pada gambar berikut ini:

Tampilan seluler

Cara Mendapatkan Template Medical Green

Anda bisa mendapatkan template Medical Green ini dengan dua cara :

1. Beli Template seharga Rp 50.000

Anda bisa memiliki template ini dengan harga yang cukup murah, hanya 50 ribu rupiah saja. Silakan langsung hubungi Admin melalui no kontak di sidebar untuk konfirmasi.

2. Secara Gratis.

Template ini bisa Anda miliki secara gratis dengan cara membuat sebuah review jika Anda memiliki sebuah blog, dengan 1 (satu) link saja dari postingan review yang Anda buat, dengan pilihan anchor text berikut ini:
  • Template toko blogspot herbal
  • Template toko obat
  • Toko Blogspot dengan Template Mobile Friendly
  • Template Toko Online Blogspot
Kemudian kontak admin melalui form kontak DISINI dengan memberikan link posting review template tersebut.
Tidak ada batasan karakter untuk review posting di blog Anda. Silakan Anda sesuaikan sendiri.

Update Template Simple Shop Free untuk Toko Blogspot Simple Gratis Download

5/13/2016 10
Seringnya tim blogspot melakukan update, sedikit atau banyak pasti berpengaruh terhadap tampilan template yang Saya bikin. Khususnya untuk template lama yang dilakukan desain ulang, baik dari sisi fitur responsive design maupun dari sisi lainnya.

Termasuk salah satunya adalah template Simple Shop. Template ini merupakan salah satu template yang memiliki banyak request download. Kebanyakan yang tertarik memakainya karena tampilannya yang memang simple dan proses edit serta settingnya yang tidak begitu merepotkan.

Beberapa kali update blogspot yang dilakukan untuk meningkatkan layanannya, ternyata juga berpengaruh terhadap template ini. Khususnya di bagian desain layoutnya, sehingga cukup menyulitkan pengguna untuk melakukan editing berbagai widget.

Selain itu, ternyata kebanyakan pengguna template simple juga menginginkan proses checkout yang lebih mudah. Ternyata banyak yang tidak memakai fitur shopping cart di template ini, karena lebih banyak yang memilih opsi checkout dengan menggunakan metode chat, baik itu melalui SMS, WhatsApp atau aplikasi chat lainnya. Jika dibandingkan dengan shopping cart yang melalui email.

Beberapa masukan di atas akhirnya menggerakkan Saya memperbaharui template simple shop free ini.

Berikutnya, akan saya jelaskan beberapa fitur perubahan atau tambahan untuk Template ini.

Silakan dibaca sampai tuntas, karena panduan setting juga akan langsung saya masukkan ke dalam lanjutan tulisan di bawah.

Template Simple Shop Free v.2

Template Simple Shop Free v.2

#Homepage. Ada perubahan yang cukup mendasar di tampilan homepage dari versi sebelumnya. 
Terdapat beberapa penambahan fitur seperti penambahan font awesome, perubahan warna dari yang sebelumnya hanya hitam putih, menjadi lebih kontras dengan beberapa varian warna antara hitam, putih, biru dan merah,

Pada template ini juga sudah ditambahkan meta tag, anda tinggal mengganti dengan meta data blog anda sendiri. Script meta tag yang bisa anda edit akan tampak seperti ini :
<meta content='Deskripsi blog disini' name='description'/>
<meta content='kata kunci blog disini' name='keywords'/>
Teks warna merah bisa diganti dengan data blog/toko masing-masing.

Ada beberapa perubahan di bagian header, namun tidak cukup siknifikan. Hanya penyempurnaan di beberapa bagian saja.
menu simple shop free v.2
Menu responsive pada header
Untuk editing bagian menu masih sama. Tinggal menambahkan script berikut ini ke bagian widget yang bisa diedit melalui menu tata letak/layout di bagian dashboard blog Anda.
<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>
Tinggal mengganti data menu dari script di atas dengan menu yang ingin anda masukkan.

Widget Selamat datang pada bagian header lebih mudah diedit dan ditambahkan di layout dashboard. Bagian ini bisa diisi ucapan selamat datang ataupun info berbagai promo terbaru toko Anda.

welcome widget
widget welcome store atau bisa untuk promo produk pada header

Ada penambahan link dan logo marketplate seperti facebook, bukalapak, tokopedia dan instagram. Sehingga diharapkan semua toko yang anda miliki bisa lebih terhubung.

link ke marketplace
Link ke toko lainnya di socmed atau marketplace

Untuk mengeditnya tinggal cari script berikut ini:
<!-- Code untuk link Facebook --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di FACEBOOK</span><img alt='Toko Sosmed' height='40' src='http://4.bp.blogspot.com/-q80QxCRphUA/VhkekxaHgRI/AAAAAAAADOg/Ykgrvgj3wEU/s1600/facebook.jpg' width='180'/></a>
<!-- Code untuk link Twitter --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di TWITTER</span><img alt='Toko Sosmed' height='40' src='http://2.bp.blogspot.com/-oaG8Q92SKE4/VhkelZpe-3I/AAAAAAAADOk/mLor7og8A60/s1600/twitter.jpg' width='180'/></a>
<!-- Code untuk link Instagram --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di INSTAGRAM</span><img alt='Toko Sosmed' height='40' src='http://1.bp.blogspot.com/-rmvPmfJqHmI/VhkemfaLW0I/AAAAAAAADOw/3mKu0hzK1-0/s1600/instagram.jpg' width='180'/></a>
<!-- Code untuk link kaskus --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di KASKUS</span><img alt='Toko Sosmed' height='40' src='http://2.bp.blogspot.com/-oMV0ZBTeZjY/VhkepIZsMRI/AAAAAAAADO4/1KSZNU61Xw8/s1600/kaskus.jpg' width='180'/></a>
<!-- Code untuk link Tokopedia --><a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di TOKOPEDIA</span><img alt='Toko Sosmed' height='40' src='http://1.bp.blogspot.com/-pcxtlT2NN74/VhkeqVYh0hI/AAAAAAAADPA/o7a-N3UXVss/s1600/tokopedia.jpg' width='180'/></a>
Anda tinggal mengganti # dengan link toko Anda sesuai dengan petunjuk di atas.

Pada widget Contact Us di bagian footer, Anda tinggal menambahkan kode script seperti ini :
<div class="smart_ftbox conta">
<div class="kontak"><div class="iconct telp"></div>
<div class="cnt"><p>Telpon:</p> 0212345567</div></div>
<div class="kontak"><div class="iconct sms"></div>
<div class="cnt"><p>SMS/WhatsApp:</p> 085779188529</div></div>
<div class="kontak"><div class="iconct bbm"></div>
<div class="cnt"><p>BB Messenger:</p> ABCDEF</div></div>
<div class="kontak"><div class="iconct mail"></div>
<div class="cnt"><p>Email:</p> kontak@email.com</div></div>
</div>
Setelah script tsb dimasukkan ke dalam widget contact us, tinggal diedit text warna merah dengan data kontak toko masing-masing.

#Product Page. Beberapa perubahan cukup mendasar saya lakukan di halaman produk ini. Yang paling utama adalah dengan menggantikan metode checkout yang sebelumnya menggunakan shopping cart, digantikan dengan metode pop up windows yang berisi informasi checkout/petunjuk order melalui sms/aplikasi chating.

Tombol Order checkout
Tombol Order
Panduan order ini sudah ada di script html template, cara mengeditnya tinggal mencari kata-kata/text seperti yang terlihat pada gambar di bawah, dan selanjutnya anda tinggal menggantinya sesuai dengan cara order dari masing-masing toko.
popup order via sms
Popup Order otomatis muncul ketika Order Now di klik

Masuk ke HTML Template, kemudian cari kata-kata tsb, selanjutnya tinggal edit disesuaikan dengan data Toko Anda sendiri. Tombol untuk SMS hanya akan muncul jika dibuka di HandPhone dan ketika tombol SMS di klik akan otomatis menuju ke aplikasi SMS di handphone pembeli.

<!-- Konten popup, silahkan ganti sesuai kebutuhan -->
  <center>Order via <b>SMS/WhatsApp: 08123 456 789</b> atau <b>pin BBM : ABC1234</b> dengan format:<br/><br/>
    <span style='font-size:18px;font-weight:bold;border: dashed #333 1px;padding: 1px;color: #000;background:#fff;'>produk/jumlah(qty)/Nama/alamat/kota</span><br/></center><br/>
Format order tidak harus sama, yang penting bisa kami pahami. Secepatnya Kami akan melakukan konfirmasi melalui SMS ke no Hp Anda, setelah Order Kami terima.
  <center><br/>
  <a href='sms:08123456789?&amp;body=produk/Jumlah/Nama/alamat/Kota' id='tombolsms' style='font-weight:bold'><i class='fa fa-mobile'/> SMS DISINI!!</a>
</center>
<!-- Konten popup sampai disini-->
Keterangan :
Edit text warna merah dengan data toko Anda dan cara order yang Anda inginkan.

Beberapa fitur tambahan lainnya adalah dengan adanya fitur related post, serta tombol icon shared ke sosial media dari AddThis.
Halaman Produk
Tampilan Product Page
Untuk format pengaturan pengisian konten produk, Anda bisa memakai script post template berikut ini:
Upload Gambar Utama produk Disini
<span class="item_price">Rp 350,000</span><br />
<table border="1px" max-width="100%"><tbody>
<tr style="background: #D5D2D2;"><td style="font-weight: bold; padding: 5px;">SKU</td><td style="padding: 5px;">Tulis kode produk</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Ukuran</td><td style="padding: 5px;">Tulis ukuran produk</td></tr>
<tr style="background: #D5D2D2;"><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;">Deskripsikan secara singkat produk Anda</td></tr>
</tbody></table>
<br/>
Tambahkan gambar atau deskripsi lainnya disini
Agar setiap tampilan memiliki layout yang sama, script tersebut harus di tambahkan di post template.
Lokasinya di bagian dashboard blog pada Setting/Setelan >> Post  and Comments/Post dan komentar >> cari opsi untuk menambahkan post template, dan pasang script tersebut.
Sehingga setiap kali posting produk, sudah ada templatenya dan lebih memudahkan untuk posting produk Anda.

#Test Template coba saya lakukan dengan beberapa tool online.
Untuk menguji speed loading, template ditest dengan memanfaatkan tool gtmetrix dan hasilnya adalah seperti ini :
GT Metrix simple shop
Speed Loading Simple shop free v.2 di GTMetrix
Untuk ukuran toko online, hasil tersebut sudah cukup lumayan.

Untuk menguji fitur mobile friendly, Saya memanfaatkan tool dari Google dan hasilnya adalah seperti ini :
test mobile friendly

Cara Download Template Simple Shop Free v.2

Template ini sengaja saya bagikan gratis. Namun yang Saya inginkan hanya untuk yang benar-benar serius memakai template ini saja dan bukan sekedar iseng, sehingga ada sedikit effort yang harus dilakukan untuk mendapatkannya.

Berikut ini cara mendapatkan link downloadnya.


  1. Like/follow salah satu Medsos Tukang Toko Online (Facebook, Google+ atau Twitter). Pilih salah satunya ( ada di bagian header, ujung atas kanan). Jika sudah pernah me like/follow, lanhgsung ke langkah 2.
  2. Konfirmasi melalui form kontak DISINI, Jangan lupa dikasih judul/subyek Nama template ini (Simple Shop Free v.2) dan sertakan bukti sudah follow /like nya.
  3. Setiap email akan Saya respon.


Semoga bermanfaat.

Blogspot Toko Online Memakai Template Toko Biruku

5/04/2016 2
Blogspot memang platform yang paling ramah ketika dipakai sebagai sebuah webstore sederhana. Dengan memanfaatkan berbagai fitur yang ada di platform ini, meski masih ada keterbatasan, namun blogspot tetap saja platform yang paling murah dan mudah untuk dikonversi menjadi sebuah webstore.

Tentu saja, untuk mengkonversi blogspot menjadi sebuah webstore yang layak tidak bisa serta merta dilakukan hanya dengan memanfaatkan fitur default bawaannya saja. Beberapa fitur perlu disesuaikan dengan kebutuhan sebuah webstore. Misalnya kemudahan melakukan transaksi, ini bisa dilakukan dengan menambahkan fitur shopping cart, atau fitur checkout lainnya. Beberapa modifikasi bisa dilakukan agar blogspot bisa sesuai dengan kebutuhan sebuah webstore.

Nah, dari informasi awal ini, Saya menawarkan sebuah template yang memang dirancang sedemikian rupa agar bisa memenuhi kebutuhan sebuah website toko online. Rancangan template ini Saya buat dengan memaksimalkan berbagai fitur yang ada pada blogspot, serta menambahkan beberapa modifikasi agar beberap fiturnya lebih ecommerce friendly.

Dengan memaksimalkan dukungan yang dimiliki oleh blogspot, template yang saya beri nama Toko Biruku (karena lebih dominan warna biru) ini, sudah terbilang sangat mencukupi apabila dimanfaatkan sebagai webstore.

Sebagaimana beberapa kaidah SEO yang salah satunya adalah SEO onpage, pemilihan template yang sesuai dan tepat merupakan salah satu kriteria dari SEO Onpage, seperti yang sudah Saya tulis dalam posting Mengoptimalkan Website Toko Online. Jadi jika Anda memang sengaja menggunakan blogspot untuk memajang produk anda (ecommerce/toko online), maka pilihan template yang paling tepat adalah dengan memakai template toko online.

Tips SEO lainnya bisa Anda baca di Kumpulan Tips SEO Blogger dan Panduan SEO.

Baiklah, uraian berikutnya adalah mengenai 'penampakan' template Toko Biruku, yang beberapa fiturnya sudah sedikit diulas di atas. Beberapa fitur andalannya akan dijelaskan dari uraian di bawah ini.

Template Toko Biruku



template blogspot toko biruku
Homepage Template Toko Biruku

LIVE DEMO

# Tampilan Halaman Produk

halaman produk template toko biruku
Tampilan di laman produk
Berbeda dengan Homepage-nya yang full page, pada halaman produk, template ini memiliki tampilan dengan sidebar widget. Homepage memang sengaja dirancang full page tanpa sidebar, agar produk yang dijual lebih bisa mencolok dan tidak terganggu oleh beberapa fitur lainnya, sehingga pengunjung toko juga lebih mudah menavigasinya.

Sedangkan di halaman produk, pemunculan sidebar berfungsi sebagai navigasi yang bisa membantu pengunjung untuk melihat referensi produk lainnya, atau informasi kontak dan info-info lainnya yang mungkin ingin Anda tampilkan di situ. Namun masih dengan gaya yang simpel agar tidak mengganggu produk utama yang sedang dilihat.

# Fitur Checkout
Fitur pilihan Checkout template toko biruku
Opsi Checkout di laman produk

Pada halaman produk ada 2 opsi checkout, yaitu melalui shopping cart (via email) atau langsung melalui SMS.
Fitur checkout melalui SMS, jka di klik akan ada jendela munculan yang akan memberikan informasi langkah-langkah yang harus anda lakukan untuk melakukan order melalui SMS, sedangkan pada tombol Add to Cart, Anda akan diarahkan ke halaman checkout yang akan mengarahkan anda untuk mengisi beberapa form order untuk kemudian akan terkirim ke email admin toko dan email pembeli.

Halaman checkout template toko biruku
Form order Laman Checkout 
# Fitur Selengkapnya bisa anda baca melalui tabel di bawah ini, dan jika tertarik bisa langsung melakukan orde, atau jika memiliki pertanyaan, silakan langsung kontak Tukang Toko Online melalui info kontak pada sidebar di blog ini.


MAIN FEATURESAVAILABILITY
Full Responsive DesignCheck Here
Grid View Homepage w/ Zoom Out Product Image
Homepage Slide Show
Responsive menu
Homepage Footer Widget
Social Shared Button
Related Post 
Order with PopUp Window notification & Shopping Cart
Meta Tag SEO Friendly
LicensePREMIUM!
Template PriceRp 80.000,-
Template + SettingRp110.000,-
Pesan TemplateKlik DISINI

Template Gothic Distro untuk Penyuka Hitam dan Gelap

4/09/2016 0
Gothic identik dengan warna kelam, khususnya warna hitam. Penyuka hal-hal yang berhubungan dengan gothic atau dengan segala hal yang bernuansa kelam atau warna hitam, meski tidak sangat banyak, namun merupakan segmen pasar yang sangat potensial.

Umumnya konsumen dengan segmen market seperti ini dikenal sangat loyal. Seperti halnya beberapa segmen pasar seperti biker, fisherman, diver dan masih banyak lagi niche (ceruk) menarik dan segmented yang memiliki pasar yang sangat fokus namun terkenal sangat loyal.

Nah, Tukang Toko Online mencoba membuat sebuah template yang bisa mengusung tema dari niche tersebut. Template ini sesuai namanya Gothic Distro, memiliki nuansa yang didominasi oleh warna hitam kelam. Dengan tema gothic, tentu saja warna inilah yang paling sesuai.

Ini sebenarnya adalah modifikasi dari template Shopping None yang sebelumnya sudah pernah dihadirkan di sini.

Beberapa fitur yang dimilikinya juga sama persis, seperti misalnya fitur checkout dan widget yang dimilikinya.

Untuk melihat fiturnya secara lengkap, Anda bisa langsung mengeceknya melalui link demonya di bawah ini.

Template Gothic Distro


Template Gothic Distro



MAIN FEATURESAVAILABILITY
Full Responsive DesignCheck Here
Grid View Homepage w/ Zoom Out Product Image
Homepage Slide Show
Responsive menu
Homepage Footer Widget
Social Shared Button
Related Post 
Order with PopUp Window notification & Shopping Cart
Meta Tag SEO Friendly
LicensePREMIUM!
Template PriceRp 80.000,-
Template + SettingRp110.000,-
Pesan TemplateKlik DISINI

Ji Gong Shop Template Toko Blogspot

2/20/2016 0
Masih seputar template toko online yang baru saja selesai bikinnya. Nama Ji Gong langsung terlintas begitu saja, ketika mulai oprek script sesaat setelah bangun tidur. Apalah arti sebuah nama. Yang jelas template ini dibuat untuk toko online dengan platform blogspot.

Langsung ke fitur yang ada di template ini, pertama simpel, full page di Homepagenya, SEO friendly pastinya, shopping cart ada, checkout via SMS juga ada, slide show dan masih banyak lagi yang bisa di cek sendiri di link live demo di bawah ini.

Template ini memiliki basic script yang dipakai oleh Template Shopping None yang dibuat sebelumnya.

Template Ji Gong Shop 


Ji Gong Shop Template




MAIN FEATURESAVAILABILITY
Full Responsive DesignCheck Here
Grid View Homepage w/ Zoom Out Product Image
Homepage Slide Show
Responsive menu
Homepage Footer Widget
Social Shared Button
Related Post 
Order with PopUp Window notification & Shopping Cart
Meta Tag SEO Friendly
LicensePREMIUM!
Template PriceRp 80.000,-
Template + SettingRp110.000,-
Pesan TemplateKlik DISINI

Jualan Produk Fashion dengan Template Shopping None

2/14/2016 0
Masih dengan Template Toko Blogspot. Tapi kali ini template yang dibuat Tukang Toko Online, lebih memfokuskan untuk memajang produk Fashion.

Template blogspot ini didesain dengan warna cerah, yaitu perpaduan warna merah, merah muda (sedikit ke pink), dipadukan background putih yang dimaksudkan supaya tidak mengurangi kecepatan loading. Serta beberapa penataan layout yang sangat simpel namun tetap elegan dan eye catching.

Template sengaja dibuat sederhana dan tidak begitu banyak fitur yang 'mengganggu' pengunjung, dimaksudkan agar pengunjung tetap fokus hanya pada produk yang dijual saja.

Pada homepage sengaja tidak ditempatkan sidebar widget, namun widget tetap muncul di halaman selain homepage. Fitur order memiliki dua pilihan checkout, bisa melalui shopping cart atau order langsung melalui SMS.

Pada halaman homepage juga sudah dilengkapi dengan slideshow berupa banner-banner promosi yang bisa Anda manfaatkan secara maksimal.

Selengkapnya mengenai fitur Template Toko Online ini bisa Anda cek langsung melalui link LIVE DEMO di bawah ini.

Template Shopping None


Template Shopping None



MAIN FEATURESAVAILABILITY
Full Responsive DesignCheck Here
Grid View Homepage w/ Zoom Out Product Image
Homepage Slide Show
Responsive menu
Homepage Footer Widget
Social Shared Button
Related Post 
Order with PopUp Window notification & Shopping Cart
Meta Tag SEO Friendly
LicensePREMIUM!
Template PriceRp 80.000,-
Template + SettingRp110.000,-
Pesan TemplateKlik DISINI