Manual Install Template Premium Tukang Toko Online: Panduan Setting Template The Raid

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:

<b:if cond='data:blog.pageType == "error_page"'> <title>404: Maaf halaman yang ada cari tidak ada | Namablog</title> </b:if> <b:if cond='data:blog.pageType != "item"'>  <b:if cond='data:blog.searchQuery'> <title>Pencarian keyword untuk :: <data:blog.searchQuery/> :: | Namablog</title> </b:if> <b:if cond='data:blog.pageType == "archive"'>  <title>Arsip Artikel Bulan <data:blog.pageName/> | Namablog</title>  <meta expr:content='"Arsip Artikel Bulan " + data:blog.pageName + " selengkapnya silahkan kunjungi di Namablog"' name='description'/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'>  <title><data:blog.pageName/> | Namablog</title>  <meta expr:content='data:blog.pageName + ". Silahkan baca artikel " + data:blog.pageName + " selengkapnya di Namablog"' name='description'/> <b:else/>  <b:if cond='data:blog.searchLabel'> <title>Pencarian pada Label :: <data:blog.pageName/> :: | Namablog</title>  <meta expr:content='"Pencarian pada kategori ::" + data:blog.pageName + ":: selengkapnya silahkan kunjungi di Namablog."' name='description'/> <b:else/>  <title><data:blog.pageTitle/></title>  <meta expr:content='data:blog.pageTitle + " Tulis deskripsi blog anda disini."' name='description'/> </b:if> </b:if> </b:if>  <meta content='keyword1, keyword2, dst' name='keywords'/> <b:else/>  <title><data:blog.pageName/> - Namablog</title>  <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' itemprop='description'/> <b:else/>  <meta expr:content='data:blog.pageName + ". Silahkan baca artikel " + data:blog.pageName + " selengkapnya di Namablog"' name='description'/> </b:if>  <meta expr:content='data:blog.pageName + ", keyword1, keyword2, dst"' name='keywords'/> </b:if>

Keterangan :

Ganti text warna merah 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 :

<li><a class='homer' href='/'><i class='fa fa-home'/> HOME</a></li>
<li><a href='#'><i class='fa fa-user'/> ABOUT</a></li> <li><a href='#'><i class='fa fa-bullhorn'/> Cara Order</a></li> <li><a href='#'><i class='fa fa-tags'/> CATEGORIES</a> <ul class='sub-menu'>
<li><a href='#'>Sub-Menu 1</a></li> <li><a href='#'>Sub-Menu 2</a> <ul>
<li><a href='#'>Sub Sub-Menu 1</a></li> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> <li><a href='#'>Sub Sub-Menu 5</a></li> </ul>
</li>
<li><a href='#'>Sub-Menu 3</a> <ul>
<li><a href='#'>Sub Sub-Menu 1</a></li> <li><a href='#'>Sub Sub-Menu 2</a></li> <li><a href='#'>Sub Sub-Menu 3</a></li> <li><a href='#'>Sub Sub-Menu 4</a></li> <li><a href='#'>Sub Sub-Menu 5</a></li> </ul>
</li>
</ul>
</li>
<li><a href='#'><i class='fa fa-envelope'/> CONTACT</a></li> <li><a href='#'><i class='fa fa-sitemap'/> SITEMAP</a></li> <li><a href='#'><i class='fa fa-exclamation-triangle'/> DISCLAIMER</a></li> </ul>

Keterangan :
Ganti text warna merah 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 Iklan 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.

Edit Widget FanBox Facebook

Untuk mengedit Fanbox Facebook, masuk ke menu layout/tataletak >> klik widget kiri-atas-artikel seperti berikut :

Anda bisa memasang Fanbox Facebook dengan kode script berikut ini di kolom widget tersebut:

<script type="text/javascript">
//<![CDATA[
document.write('<iframe src="http://www.facebook.com/v2.3/plugins/page.php?app_id=&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FNM7BtzAR8RM.js%3Fversion%3D41%23cb%3Df37a7397d8%26domain%3Dnamatokoanda.blogspot.com%26origin%3Dhttp%253A%252F%252Fnamatokoanda.blogspot.com%252Ff1f37dc2f8%26relation%3Dparent.parent&container_width=250&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fidpagefacebookanda&locale=en_US&sdk=joey&show_facepile=true&show_posts=false&width=250" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" style="border: none; visibility: visible; width: 250px; height: 224px;" class=""></iframe>');
//]]>
</script>

Keterangan:

Ganti text warna merah dengan data id page facebook dan url blogspot Anda.

Widget Fanbox ini juga bisa anda ganti isinya dengan banner iklan Anda sendiri.

Ukuran banner maksimal yang bisa dipasang adalah berbentuk segiempat.

Anda bisa memasang banner dengan kode script berikut ini di kolom widget tersebut:

<img src="link-gambar-anda-disini.jp" alt="deskripsi gambar" title="judul gambar"/>

Keterangan:

Ganti text warna merah dengan link gambar anda dan data banner anda

Edit Widget Hot Info

Masuk ke lay out / tata letak, cari dan edit widget 'Hot Info'. Selanjutnya tinggal masukkan informasi terbaru mengenai program terbaru apapun tentang toko Anda di kolom widget ini.

Maksimal adalah 45 karakter.

Setting Widget Contact

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

<i class="fa fa-mobile"/> 0812345678910<br>
<i class="fa fa-whatsapp"/> 0812345678910<br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigs6BJ2NaiBYYik2-M74D-2MvOBtn-iOkS1wpBInFYURoJ_dAtyffkb8opXF-AUkV8JmuUKcnB6epJrU8xboIXmT96t_kywzHh7xJd7a1m770pAEmjHyuaY7VIL3I8lNzxySXb6UqrlR4/s18/logo-bbm-android.png"> abcd1234<br>
<i class="fa fa-user"/> : Bob Marley

Keterangan :
Ganti text warna merah dengan data toko anda.

Setting slide show

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
pengaturan({
blogURL: 'http://theraidtemplate.blogspot.co.id',
MaxPost: 5,
RandompostActive: true,
ImageSize: 620,
NumCharacter: 150,
idcontaint: "#skitterslideshow",
cmtext: "Komentar",
NoCmtext: "No Comment",
pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqkK9D-XDakCW4ARXhczWcjuQZuiSIYBMv2TPu84Cc4rjVsFcJhTwaEvrtzyGuB5U3uALLLHw7upXfKlBa0sk95PXFYwt5_cWzQAbIJmhbvB6a50YT7RHKrANq9mwi5IiKjhCpE2KSho/s1600/noimage.jpg",
tagName: false
});
});
//]]>
</script>

Keterangan:
Ganti text warna merah dengan url blog 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.

Menambahkan Badge Diskon

Edit produk yang ingin tambahkan badge diskon, tambahkan script berikut ini di bawah kode script price <span class="item_price>Rp 150,000</span> (edit pada mode HTML).

<span class="diskon">-25%</span>

keterangan :
ganti -25% dengan program diskon yang anda tawarkan.

Selanjutnya Publish posting yang anda bikin atau edit tadi.

Menampilkan Harga Tercoret

Masuk ke mode html di halaman posting produk, ganti kode berikut :

<span class="item_price">Rp 150,000</span>

dengan kode :

<span class="item_price" style="text-decoration: line-through;">Rp 150,000</span>

Isi harga dengan harga produk sebelum diskon.

Setting Widget Kategori Produk

Masuk ke Tataletak/layout >> edit 2 widget kategori produk >> masukkan kode script berikut ini:

<script>
document.write("<script src=\"/feeds/posts/default/-/nama%20label?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Keterangan:
Ganti text warna merah dengan nama label yang ingin anda tampilkan.
Perhatikan text label harus sama persis huruf besar dan kecilnya
Ganti spasi dengan %20, jika label menggunakan spasi.

Setting Order PopUp

1. Masuk ke Template>> klik edit HTML >> Cari kode berikut ini :

<div class='popup-container'> <center>Order via <b>SMS/WA: 08123 456 789</b> atau <b>pin BBM : 1234abcd</b> dengan format:<br/> <span style='font-size:18px;font-weight:bold;'>nama-produk/jumlah(qty)/nama-sesuai-rekening/bank/jumlahtransfer</span><br/></center><br/>Transfer langsung ke Akun Bank berikut:<br/><b>Nama: John Doe<br/>Bank : PII<br/>No. Rek.: 123-123-234-000-012</b><a class='popup-close' href='#closed'>X</a>

Keterangan:
Edit text warna merah dengan aturan order dan data toko online anda.

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