Manual Install Template Premium Tukang Toko Online: Panduan Setting Template Toko Blue

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 Suka Biru 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:

<meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/> <meta content='blogger' name='generator'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <link expr:href='data:blog.url' rel='canonical'/> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType != "error_page"'> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if></b:if> <b:if cond='data:blog.pageType == "error_page"'> <title>Page Not Found - <data:blog.title/></title> <meta content='5;/' http-equiv='refresh'/> </b:if> <b:if cond='data:blog.pageType == "archive"'> <meta content='noindex' name='robots'/> </b:if> <b:if cond='data:blog.searchLabel'> <meta content='noindex,nofollow' name='robots'/> </b:if> <b:if cond='data:blog.isMobile'> <meta content='noindex,nofollow' name='robots'/> </b:if> <b:if cond='data:blog.pageType != "error_page"'> <meta expr:content='data:blog.metaDescription' name='description'/> <b:if cond='data:blog.homepageUrl != data:blog.url'> <meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/> </b:if></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta content='xxxxx' name='keywords'/></b:if> <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/> <link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if></b:if> <link href='/favicon.ico' rel='icon' type='image/x-icon'/> <link href='https://plus.google.com/xxxxx/posts' rel='publisher'/> <link href='https://plus.google.com/xxxxx/about' rel='author'/> <link href='https://plus.google.com/xxxxx' rel='me'/> <meta content='xxxxx' name='google-site-verification'/> <meta content='xxxxx' name='msvalidate.01'/> <meta content='xxxxx' name='alexaVerifyID'/> <meta content='Indonesia' name='geo.placename'/> <meta content='xxxxx' name='Author'/> <meta content='general' name='rating'/> <meta content='id' name='geo.country'/>
 <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:blog.url'> <meta expr:content='data:blog.url' property='og:url'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.pageName'> <meta expr:content='data:blog.pageName' property='og:title'/> </b:if></b:if></b:if></b:if> <meta expr:content='data:blog.pageTitle' property='og:title'/> <b:if cond='data:blog.pageType == "item"'> <meta content='article' property='og:type'/> <b:else/> <meta content='website' property='og:type'/> </b:if> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' property='og:image'/> <b:else/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/> <b:else/> <meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/> </b:if></b:if> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> <b:else/> <meta content='xxxxx' property='og:description'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='xxxxx' property='fb:app_id'/> <meta content='xxxxx' property='fb:admins'/> <meta content='en_US' property='og:locale'/> <meta content='en_GB' property='og:locale:alternate'/> <meta content='id_ID' property='og:locale:alternate'/> <meta content='summary' name='twitter:card'/> <meta expr:content='data:blog.pageTitle' name='twitter:title'/> <meta content='xxxxx' name='twitter:site'/> <meta content='xxxxx' name='twitter:creator'/>

Keterangan :

Ganti xxxxx dengan data blog anda.

Edit Icon Sosial Media

Masuk template >> klik edit html >> cari kode berikut ini

<a href='http://facebook.com/tukangtokoonline'><i class='fa fa-facebook' style='font-size:18px;margin-right:5px;color:#2A7CBA'/></a>
<a href='http://twitter.com/tukangtokonline'><i class='fa fa-twitter' style='font-size:18px;margin-right:5px;color:#2A7CBA'/></a>
<a href='http://plus.google.com/+tukangtokoonlinewebid'><i class='fa fa-google-plus' style='font-size:18px;margin-right:5px;color:#2A7CBA'/></a>
<a href='#'><i class='fa fa-rss' style='font-size:18px;margin-right:5px;color:#2A7CBA;'/></a>
<a href='#'><i class='fa fa-pinterest' style='font-size:18px;margin-right:5px;color:#2A7CBA;'/></a>
<a href='#'><i class='fa fa-linkedin' style='font-size:18px;margin-right:5px;color:#2A7CBA;'/></a>
<a href='#'><i class='fa fa-youtube' style='font-size:18px;margin-right:5px;color:#2A7CBA;'/></a>

Keterangan:
Ganti text warna merah dengan data url id sosial media anda

Edit Drop Down Menu

1. Masuk ke Template >> klik Edit html >> cari kode berikut ini :

<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='#' itemprop='url'><span itemprop='name'>Site Link</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Error Page</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 data menu tsb. dengan data blog anda.

Logo Header

Ukuran maksimal logo toko yang bisa dipasang adalah lebar 300px dan tinggi 100px (300x100 pixel)

Memasang Banner Header

Masuk ke lay out /tata letak di dashboard anda, edit widget Banner di samping widget header, lalu pasang script untuk menampilkan gambar banner iklan Anda.

< img src="url-banner-iklan-anda-disini.jpg" alt="deskripsi banner iklan anda" title="judul banner iklan anda"/>

Keterangan :
ganti text warna merah dengan link banner iklan anda dan data toko anda
Secara otomatis gambar akan digenerate ke ukuran maksimal 500x100 pixels.

Setting Widget Contact

Masuk ke layout >> klik widget Contact >> pasang/masukkan kode berikut ke dalam kolom:

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

Keterangan :
Ganti dengan data kontak toko anda.

Setting halaman produk / posting

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

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

Upload gbr produk utama disini<br/>
<span class="item_price">Rp 999,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;">IP-S6</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Ukuran</td><td style="padding: 5px;">50 mm x 20 mm x200mm</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;">IOS, processor quad core, RAM 2 GB, external memory up to 64 gb</td></tr>
</tbody></table><br/>
deskripsi produk dan gambar tambahan disini

3. Simpan setelan.

Hasilnya adalah ketika mulai entry posting baru, maka otomatis sudah ada template post yang berisi kolom yang mana saja yang bisa anda edit.

Setting Order PopUp

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.


<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?&body=produk/Jumlah/Nama/alamat/Kota' id='tombolsms' style='font-weight:bold'><i class='fa fa-mobile'/> SMS DISINI!!</a>
</center>


Simpan template

Edit Toko Social Media

Masuk ke template >> klik edit html >> cari script berikut ini :

<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di FACEBOOK</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-TTJ-fKrwtbzV3ahRvU7Rj1_h2xP9oJ3WpsnzeJUXBkJCG2IlsgZrAu45FSUHYa-1jQ2Y-iu2PXJlVx0l2rmXhkDRf5VGCr9YqE_HzCqmvos2wyXl8Io0y_HPqwVh-uhXj7oZCIq5q5g/s1600/facebook.jpg' width='180'/></a>
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di TWITTER</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ050mSvePhdnATvoLV9ZCzauDfPxaaKGP-GOEPznc9rWE-ClBbgVR6xXEyCjgZvGA7oyjRnVsVu-h50Vra-sMj4yt30VPvK5zY9xO1rf8jnfdpzEOp-1HgrljyHVKSOXHZK9tauOusXQ/s1600/twitter.jpg' width='180'/></a>
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di INSTAGRAM</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zFvJejTlhR9ZILoq-O1nPTqT4RDgdkq4UaEuhCGrfe52121AgvDfBMvkQr5yb97-REpz7fT2vpWlw6M5kunWlUHhuE27g60QCvIXxdh3My6hjX-eifnb1MRUpDcqtvanx81s2q69344/s1600/instagram.jpg' width='180'/></a>
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di KASKUS</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha7tzLv0QTISNMf8mxHQCQSYuNczBSZZcOl6F6Tg8ACXN_BhsiPBkaAS82hPceL3CUH-j58w0D73r_pB_bPKLFScDYAjP_FGfj75oHatR3OVLRrmZz2wu1Kp3VynAiKmw9ZWmFP43E-ts/s1600/kaskus.jpg' width='180'/></a>
<a class='tooltip' href='#' target='_blank'><span class='bubble'>Temukan Kami di TOKOPEDIA</span><img alt='Toko Sosmed' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxKF4N13DRMJ5RdP4HBHPZvhJoqQHfMMLkJDASLYFcCGbxDWz6f9lfX_rzCXuh866Pb4wNsd-V6uY5OWlSLawYmLyUUX3-eqQIrQ5A5knsV1GEK_brcFMF5U-7r1HXNfpAtjAW_apIXjg/s1600/tokopedia.jpg' width='180'/></a>

Ganti '#' dengan link toko anda di social media.

Simpan template

Membuat Widget Testimoni

Masuk ke tata letak/layout >> klik edit widget testimoni >> masukkan script berikut ini:

<div class="testimonials-box"><div class="testimonials-slider">
<div class="slide"> <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="link-gambar-user"/></div> <div class="testimonials-carousel-context"> <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div> <div class="testimonials-carousel-content"><p>PESAN TESTIMONI KONSUMEN DI SINI</p></div> </div> </div>
<div class="slide"> <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="link-gambar-user"/></div> <div class="testimonials-carousel-context">   <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div> <div class="testimonials-carousel-content"><p>PESAN TESTIMONI KONSUMEN DI SINI</p></div>
</div> </div>
<div class="slide"> <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="link-gambar-user"/></div> <div class="testimonials-carousel-context">   <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div> <div class="testimonials-carousel-content"><p>PESAN TESTIMONI KONSUMEN DI SINI</p></div>
</div> </div> </div> </div>

Ganti text warna merah dengan data pemberi testimoni dari customer anda.

Memasang Widget Cek Resi

Masuk ke tata letak / layout >> edit widget cek resi di bagian footer >> masukkan script berikut :

Lacak resi <b>JNE</b> di sini<br /> <form action="http://www.jne.co.id/index.php" method="get" name="input" target="_new2"> <input name="mib" value="tracking.detail" type="hidden" /> <input name="awb" size="14" style="border:1px solid #b2b2b2;margin-bottom:-20px;width:120px;padding:5px;border-radius:0px;" type="text" /> <input value="Cek" style="border:1px solid #DC3F3F;padding:4px;border-radius:0px;font-weight:bold;background:#EE5858;color:#fff" type="submit" /></form> Lacak resi <b>TIKI</b> di sini: <br /> <form method="post" action="http://www.tiki-online.com/tracking/track_single" name="input" target="_blank"><input id="TxtCon" name="TxtCon" size="14" style="border:1px solid #b2b2b2;margin-bottom:-20px;width:120px;padding:5px;border-radius:0px;" type="text" /> <input id="button" name="button" value="Cek" style="border:1px solid #DC3F3F;padding:4px;border-radius:0px;font-weight:bold;background:#EE5858;color:#fff" type="submit" /></form> Lacak resi <b>POS Indonesia</b>: <form method="get" action="http://www.posindonesia.co.id/home/modules/mod_search/tmpl/libs/lacakk1121m4np05.php" name="input" target="_blank"><input name="barcode" size="14" style="border:1px solid #b2b2b2;margin-bottom:-20px;width:120px;padding:5px;border-radius:0px;" type="text" /> <input value="Cek" style="border:1px solid #DC3F3F;padding:4px;border-radius:0px;font-weight:bold;background:#EE5858;color:#fff" type="submit" /></form>

Terakhir Simpan Widget

Setting Tampilan Seluler

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