Panduan Setting Template BluTemp v.2



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 BluTemp v.2 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.



Penampakan Homepage

Setting Header
Perhatikan Screen shoot berikut ini, ikuti langkah-langkah editingnya.




Keterangan :

  1. Menu paling atas bisa anda atur dari layout/tata letak di dashboard blog anda.
  2. Untuk mengedit kontak customer service menuju ke edit html template dan cari kode seperti gambar di bawah, lalu ganti dengan data kontak anda sendiri. 
  3. Untuk mengedit sosial icon, adalah dari edit html template. Dari dashboard blog anda, menuju ke Template >> klik edit HTML, lalu cari kode berikut ini :berikut scriptnya :
    • <ul> <li><a class='facebook' href='#Prifile-url'>Facebook</a></li>
      <li><a class='twitter' href='#Prifile-url'>Twitter</a></li>
      <li><a class='google' href='#Prifile-url'>Google</a></li>
      <li><a class='rss' href='#Prifile-url'>Skype</a></li>
      <li><a class='linkedin' href='#Prifile-url'>Yahoo</a></li>
      </ul>
    • Keterangan : Ganti warna merah dengan link socmed anda.
  4. Anda bisa memasang judul blog atau logo blog dari halaman tata letak/layout. Dari sini anda bisa mencari widget Header, lalu klik Edit dan masukan Judul, deskripsi atau bisa juga memasukkan logo Toko online Anda, lalu klik Save.
  5. Untuk mengedit menu navigasi ke dua, Anda langsung menuju ke edit html template dan cari kode berikut ini :
    <nav id="menu"><input type="checkbox">
    <label>≡<span>Menu</span></label>
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="#">Menu A<font size="1">▼</font></a>
    <ul class="menus">
    <li><a href="#">menu 1</a></li>
    <li><a href="#">menu 2</a></li>
    <li><a href="#">menu 3</a></li>
    <li><a href="#">menu 4</a></li>
    <li><a href="#">menu 5</a></li>
    <li><a href="#">menu 6</a></li>
    </ul>
    </li>
    <li><a href="#">Menu B<font size="1">▼</font></a>
    <ul class="menus">
    <li><a href="#">menu 1</a></li>
    <li><a href="#">menu 2</a></li>
    <li><a href="#">menu 3</a></li>
    <li><a href="#">menu 4</a></li>
    <li><a href="#">menu 5</a></li>
    <li><a href="#">menu 6</a></li>
    </ul>
    </li>
    <li><a href="http://www.tukangtokoonline.web.id/">Unduh Template Disini</a></li>
    </ul>
    </nav>
Ganti warna merah dengan link atau menu anda sendiri.
Setting Slider
1. dari dashboard blog, masuk ke Template >> edit HTML, lalu cari kode berikut ini :

<ul class='slides'>
<li>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3M2jubF-V6xgjPT4NVLeh0l5MgVM4T_qlU0FluK_Hn_snMGdZonPfLgzOJau85dA_KDcnzAdwBS6DdIRH7q-574bS47A4quqsJJoBUiOEI6AQOlSbN7lJJ7xg2aAm195h_RKrhTc4sg/s1600/slide_01.jpg'/>
<div class='slider-caption'>
<h4>It is a long established fact that a reader </h4>
</div>
</li>
<li>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj_7kBORWzp0yjj6zdOyctZ9H9gKxXsBRaXlsG9LCQmO9XHsqjlsp22fFeNXeJ4Mg-_PVBBo7Y26HRKVyC95cGvyd72OVNpDdzNGCnVAQ-PLh90f376p3Q67asmfFu5aXNrLqmvn5wYQ/s1600/slide_02.jpg'/>
<div class='slider-caption'>
<h4>It is a long established fact that a reader </h4>
</div>
</li>
<li>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ozpZ8M8V_7zhSDd7eWZoKCyHl6aBedaDD59shbTOcBb4SY9vFEM2fSHOc8yIBZ0RXWl7Zo3m5S2IrJkzytA2atOEcSK_-HzkGaKCsxO273QK5-jVU_q6zBAMoFXINtlMXUV_O3SkPA/s1600/slide_03.jpg'/>
<div class='slider-caption'>
<h4>It is a long established fact that a reader </h4>
</div>
</li>
</ul>
Keterangan :

  • Ganti Link dan Tulisan warna merah di atas dengan Link Gambar dan Deskripsi keterangan masing-masing Gambar Slide Anda.
  • Standart Ukuran Gambar Slide adalah 960 x400 pixel

Setting Post Template

1. Masuk ke dashboard blog >> setelan >> Post dan Komentar, lalu copy kode script di bawah ini :

<div class="item_image">
<img border="0" class="item_thumb" src="LINK_GAMBAR_ANDA.jpg" height="529" width="640" />
<span class="item_price"> Rp 7000</span>
</div>
<div class="item_Description">
Ganti dengan deskripsi produk anda
</div>
Keterangan:

  • Pada saat posting entri post baru, akan muncul post template tersebut secara otomatis.
  • Pastikan anda ada di mode HTML, dan sudah mengupload Gambar Produk anda di free hosting seperti picasaweb.com atau photobucket. Lalu ambil Linknya dan pasang di tulisan berwarna merah di atas.
  • Sisanya bisa Anda edit di mode compose.


2. Copy Scrip ke kolom Template Entri seperti gambar di bawah ini. Jadi, tiap kali entri posting baru akan muncul post template seperti ini.


Setting Shopping Cart

Dari Dashbord Blog Anda langsung menuju ke template >> edit HTML, cari kode berikut ini:
  // Customize URL, links and Blogshop name
  data.shop_name = "Template blueTemp v.2";
  data.shop_url = "//blutemp-v2.blogspot.com/";
  data.shop_thankyou = "//blutemp-v2.blogspot.com/p/success.html";
  data.shop_sendFail = "//blutemp-v2.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 blueTemp v.2";
  data.shop_bizaddress = "Semarang, Indonesia";
  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";
Ganti kata-kata yang berwarna biru dengan data anda sendiri.
Atau ganti dengan karakter dis ( - ) jika anda ingin mengosongkannya. 
Preview, lalu Save Template anda.

Membuat Halaman Checkout / View Cart

Buat sebuah page (laman statis) dengan judul View Cart, lalu isikan script di bawah ini pada mode HTML (Catat..! bukan mode compose). Preview atau Pratinjau dulu hasilnya, lalu Publikasikan kalau sudah oke. Pastikan alamat URL page tersebut adalah"namabloganda.blogspot.com/p/view-cart.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 Depan</label>:<br />
<input id="first_name" name="firstname" placeholder="First Name" title="Enter your First Name" type="text" /><br />
<label for="lastname">Nama Belakang</label> :<br />
<input id="last_name" name="lastname" placeholder="Last Name" title="Enter your Last Name" type="text" /><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 />
<b>Lokasi Pengiriman?</b><br />
<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 />
<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 />
<ol>
</ol>
<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>
<ol>
</ol>
<b>Mitra Pembayaran Kami :</b> <br />
<ol>
</ol>
<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>
<li>Bank BRI (Bank Transfer) </li>
</ul>
<ol>
</ol>
<b>Mitra Kurir Toko Kami :</b> <br />
<ol>
</ol>
<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>
<ol>
</ol>
</div>
<!-- End checkout-details --></td>
</tr>
</tbody></table>

 Anda bisa mengedit text yang berwarna biru pada mode compose.

Membuat Laman Succes

Buat sebuah page dengan judul Success, isi terserah anda, karena ini nantinya akan menampilkan ucapan terimakasih atau sebuah halaman sebagai penanda kalau data order yang dikirimkan sudah berhasil. Pastikan alamat URLnya adalah "bloganda.blogspot.com/p/success.html" 

Membuat Laman Error

Buat sebuah page dengan judul Error , isi terserah anda, halaman ini akan muncul jika data order yang dikirimkan terdapat kesalahan, kurang valid atau tidak lengkap. Pastikan alamat URLnya adalah "bloganda.blogspot.com/p/error.html" 

Setting Tampilan Seluler

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