Panduan Instal Template Gothic Distro

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 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 Ucapan Selamat Datang di Homepage

Masuk ke Template >> klik edit HTML >> cari tulisan berikut ini :

Selamat datang di Toko Online Kami, Anda bisa menjelajahi showroom online kami ini yang menyediakan berbagai kebutuhan Anda. Kami melayani order seluruh Indonesia. Selamat Berbelanja....

Selanjutnya ganti dengan kata-kata Anda sendiri.
Simpan Template

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='/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 data menu tsb. dengan data blog anda.

Logo Header

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

Setting slide show

Masuk ke template >> klik edit html >> cari kode berikut :

<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='easyslider'> <div class='image_reel'><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9PQFQWd767Tz2-aGD7a2edTOE-HxtS2hC41d-SMTHQ77J24YtdXMP_xab94CjqoHvRJKvsieQPzAYqAYchRDFVm1D1Nh6o_vVEsagMPlWV0Ts3TL8EWyTKgD9XiPZ0J-_p8Z4tABjeWI/s1000-Ic42/banner+distro.png'/></a><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmLvZpTYum4HVPsd5h4xguZ6v-aQfiU_xtKsyOxNL8v_ltyJWydAF7-JL6ca6z04rFhPooga8UbVUPlRSzseuoQkR7H9HBdMdUceu-BpXZ9lrKgIBxmwsZhw5tllLMmFEY6VgfMhRGRI/s850-Ic42/batman+logo.jpg'/></a><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8NUHkDbgiJ2-1vM9WMU3ZjQoJ1_srcfH7CNSka0jbMUZ-XEcB_XV2nPtP-6wRMuSE0bnMLiIgokC5jR0IYaR3sMSdIDP_-kM6kptWXNFz9YaAEc6GIQYd2toRT6T14uRllvPUwz0-r58/s1000-Ic42/discount+banner.jpg'/></a><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHG4vu-gNUBn2-kqMMOv529YOGR96GBT__KCmQ1G3lAL7Ha_bkM5lNDhMlOiIXdBllkPlqR38uHWUZwKwPG_eKmvFyJgs6nEMgpoGGnioIOqvY0APtsufX7nLUXXjDo6i_ZQUaShotR4/s940-Ic42/gothic+banner.jpg'/></a><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgptwBBVxlRr4Q7MNP4KsghE8fkSuRqSMDfgpSfgV2U20jP6XfzuoPmgfqNsqbseHYgX3rkmqUfBNl9m7mJGVgfQrBCDYkBavv8Jqx8qP6B9txIDbYNPou98ztyz4Q0b_cw-r4MSuiUMS8/s979-Ic42/perfect+black.jpg'/></a> </div> <div class='descriptionslider'><div class='easytitledes'><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div><div class='easytitledes'><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div>
<div class='easytitledes'><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div>
<div class='easytitledes'><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div>
<div class='easytitledes'><a href='...post-link5.html'>Post-Title 5</a><p>Description / Caption 5</p></div>
</div> <div class='paging'><a class='' href='#' rel='1'/><a class='' href='#' rel='2'/><a class='' href='#' rel='3'/><a class='' href='#' rel='4'/><a class='' href='#' rel='5'/> </div></div></b:if>

Keterangan:
Ganti text warna merah dengan data slide berupa link gambar dan link di blog Anda.

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

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: #8A8787;"><td style="font-weight: bold; padding: 5px;">SKU</td><td style="padding: 5px;">kode produk</td></tr>
<tr><td style="font-weight: bold; padding: 5px;">Ukuran</td><td style="padding: 5px;">Isi Ukuran Produk</td></tr>
<tr style="background: #8A8787;"><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;">Deskripsi singkat produk</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

Setting Shopping Cart

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

   // Customize URL, links and Blogshop name
data.shop_name = "Gothic Distro Template";
data.shop_url = "//gothicdistrotemplate.blogspot.co.id/";
data.shop_thankyou = "//gothicdistrotemplate.blogspot.co.id/p/success.html";
data.shop_sendFail = "//gothicdistrotemplate.blogspot.co.id/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 = "Gothic Distro Template";
data.shop_bizaddress = "Jakarta, Indonesia";
data.shop_bizphone1 = "021-234 5678";
data.shop_bizphone2 = "021-234 5678";
data.shop_bizphone3 = "021-234 5678";
// 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 = "Kontak Pin BBM :abc123";
data.note_detail1 = "Kontak whatsapp: 081234 567 891";
data.note2 = "Hotline : 021-2345678";
data.note_detail2 = "Secepatnya kami akan mengkonfirmasi order dari anda melalui SMS dari no telpon yang anda daftarkan";
});
//]]>
</script>

Keterangan :
Ganti text warna merah dengan data blog anda.
Pastikan kode lainnya tidak terhapus

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

<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</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 />
 <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 />
<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>
</td>
</tr>
</tbody></table>

Keterangan :
1. 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. Dari Menu laman/page >> 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 lagi.
5. Pembuatan Laman error sama seperti di atas, hanya judulnya ganti 'Error'.

Update !!:
Khusus untuk laman "Success", tambahkan script berikut di bagian paling bawah pada mode HTML:

<script> $(document).one('ready', function () { for(simpleCart_items in localStorage) { delete localStorage[simpleCart_items]; }; });</script>

Lalu Publish laman tersebut.

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/AVvXsEgNA5pS7k2QwA0UE85OElSACboRzL9H0NwG6pbYVz4vhGZnfblSONza5wW3LAydz23Qu7O7O1AXmV8OxBU_cobLGSyb7dxLZqZbZXGA-MQ_g0E_XEfY7f3HHZltOY57IinsYvLpBh_l2mk/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/AVvXsEjwKB0YL-Dm7VQal1OHLOvSWpTTq63a70rHJ0YSmSoWz2Qda3JIV0EW9C1TlukUMvZX7-hXorg9R7hK6PX0jjRtLslZCbDYNPSrVB_j032-lRIyyiphUlTWg57rn3VQ4f7tNw2CmmFLxFQ/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/AVvXsEjnkhsJ5PhP7i0ybQTGrGuha914C3CGcZgp0wECvxMIyaHgc5y-wUVVL-3Lk1BsfO7yLWqVHONwDdGEF7kgGiZrbvpqvbC6YBC1FQnG76lMm7h9LMFICXhOdNTpKr3S1SNkdi-53_1RzdE/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/AVvXsEgWGXyZfr07kvvg5Bemvr7hyphenhyphenV_MrBlgfrwC5eUgiSPOwyldUFiMLutOrXQ7wxOgYNsu9J_PWtMuAtQHaCB7wkTUejUoWY9l6-rW3QZ0dx3aFQLIGmHty2klr_6a_LxOWBl_hKhIp5xDoMo/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/AVvXsEj8Wu15a2_OKrtFqqlutoH38-YQxrOGi0hC0dk0Ot1khsVL2UOkr_fwWih1u5gUp3JjJBxAyJTkHHP3u6atu7iNm9zU0gHthaBZM_Qixuo1mHJJ2slv76VJQ8LpFLaUyoozZhnv1IkwuEc/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.

Setting Tampilan Seluler

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