Berikut ini panduan template gratis toko online platform blogger. Jika ingin mengganti sub-domain blogspot dengan membeli domain baru, maka nama blog http://yogya-batik.blogspot.com dapat ditulis menjadi yogya-batik(dot)com, dan tetap memakai layanan hosting gratis Blogger. Topik ini pernah saya tulis dengan judul Bagaimana cara membuat toko online e-Commerce - didalamnya saya maksudkan Bloggerstore tahun 2013 lalu (Anda bisa kunjungi Blogger Store di blog ini). Tampaknya ini masih relevan. Akan lebih jelas pemahaman toik ini dengan tambahan dan pengulangan materi content dari blog tetangga berikut ini.

Shopping cart yang digunakan adalah simplecart buatan wojodesign.com. Template Sudah dimasukkan currency IDR (Rp) pada script, tetapi tetap saja tidak bisa digunakan untuk transaksi langsung via Paypal, karena Paypal belum menerima Rp sebagai alat pembayaran. Jika tetap ingin pakai template ini, barangnya dinilai pakai US Dollar!!!. Atau arahkan untuk bayar via transfer bank.

Kini akan dijelaskan instalasi template dan beberapa fitur yang terdapat pada template ini.

Posting Artikel

Dalam membuat artikel baru, perhatikan struktur kode di bawah ini :

<div class="product_image">

<a class="cloud-zoom" href="url-image.jpg" rel="softFocus: true, position:'inside', smoothMove:2"><img border="0" class="item_thumb" src="url-image.jpg" /></a>

<span class="item_price">$00.00</span></div>

<div class="product_describe">

Description your product.............
</div>

PENJELASAN

• Warna merah  :
  Masukkan url gambar produk anda pada kedua kode warna merah diatas. Usahakan gambar yang Anda upload ukuran panjang dan lebar sama, misalnya 300x300px
• Warna kuning :  Harga produk
• Warna biru      :  Deskripsi dari produk

Dalam membuat posting baru HARUS diawali dengan KODE diatas. Untuk memudahkan (agar tidak berulangkali copy paste kode tersebut sewaktu membuat artikel terbaru) masukkan kode tersebut pada kolom post template. Caranya :

• Masuk ke SETTING, pilih POST AND COMMNETS >> POST TEMPALTE.
• Klik ADD. Lalu masukkan kode diatas pada kotak kosong seperti gambar dibawah.
• Langkah terakhir SAVE SETTING.

Shopping Cart

Fitur Shopping Cart disini digunakan untuk memudahkan admin toko online dalam transaksi via Paypal. Tapi karena Paypal belum menerima pembayaran Rp, maka setting currency masih dalam US$. Untuk mengganti akun Paypal blog demo ini dengan akun Paypal Anda, cari kode berikut :

<script type='text/javascript'>

simpleCart.email = &quot;johnytemplate @ gmail(dot)com&quot;;

simpleCart.checkoutTo = PayPal;

simpleCart.currency = USD;

simpleCart.taxRate  = 0.02;

simpleCart.shippingFlatRate = 3.25;

simpleCart.shippingQuantityRate = 1.00;

simpleCart.cartHeaders = [&quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

</script>

Ganti email warna merah diatas dengan email Anda (email sudah didaftarkan di Paypal)

Fitur Pendukung

1. Slider terpasang disini bekerja otomatis, menampilkan artikel terbaru Anda dengan jumlah 8 posting. Jika ingin menampilkan per kategori (label), cari kode dibawah ini pada Edit HTML (jangan lupa centang expand widget templates) :
   
   
   <script>

   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>
   
   Ganti dengan kode berikut :
   
   
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/your label?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>
   
   Ganti kode warna biru dengan label yang ingin Anda tampilkan pada slider.
   
   
2. Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa mencentang kotak expand widget templates) :
   
   

   (UNTUK MELIHAT SCRIPT KLIK KOTAK KECIL DISAMPING INI)

<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>

KETERANGAN
Warna biru : ganti dengan alamat feed anda.

Widget Contact Online
Masukan kode berikut pada kotak HTML/Javascript

3.   (UNTUK MELIHAT SCRIPT KLIK KOTAK KECIL DISAMPING INI)

   <table border='0' cellpadding='0' cellspacing='0' height='1' width='100%'>
   <tbody>
   <tr>
   <td height='1'>Customer Service A</td>
   
   <td align='right' height='1'><a href='ymsgr:sendIM?youryahoousername1'><img border='0' height='16' src='http://opi.yahoo.com/online?u=youryahoousername1&m=g&t=1' style='padding-top:3px' width='64'/></a></td>
   </tr>
   </tbody>
   </table>
   
   <div style='display: block;'>
   <table border='0' cellpadding='0' cellspacing='0' height='1' width='100%'>
   <tbody>
   <tr>
   <td align='left' height='1'>Custumer Service B</td>
   <td align='right' height='1'><a href='ymsgr:sendIM?youryahoousername2'><img border='0' height='16' src='http://opi.yahoo.com/online?u=youryahoousername2&m=g&t=1' style='padding-top:3px' width='64'/></a></td>
   </tr>
   </tbody>
   </table></div>
   
   <p align="center"><a href="http://mas-template.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfi3Q0ONlfu713jypw47ultiLLYVXzLAoeQ9pLR1e7-WTEVYQzvnNjii4Ol_ySq6RDTxpfykQ17dtW16CKCqFe1KYZ0qKanEdOK6THFvdMD1EUjIVj7CWE42ZE1-2Mm-EUEFBnQQ-J7I4/s1600/donate.png" alt="twitter maskolis" /></a></p>
   Ganti youryahoousername1 dan youryahoousername2 dengan ID yahoo Anda.
   
   
4. Template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply, Anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa centang kotak expand widget templates :
   
   
   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2440873145683465163&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
   
   Warna merah pada kode diatas ialah ID blog demo dan harus diganti dengan ID blog Anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar berikut :
   
   
   
   
   
5. Widget popular post thumbnail, setting seperti pada gambar dibawah ini :
   
   
   
   Yang perlu diperhatikan ialah centang hanya thumbnail, biarkan kotak snippet tidak dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda. Untuk lebih jelas tutorial disini.

Fitur lain saya kira mudah, seperti memasang Yahoo Messenger dan lain-lain. Template ini dilengkapi efek zooming. Jika Anda arahkan cursor pada gambar, gambar itu akan otomatis membesar sesuai dengan letak cursor. Saya rasa cukup penjelasan template ini, seperti biasa jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kotak komentar.

Showcase
Jika Anda ingin melihat blog yang sudah memakai template ini. bisa dilihat disini :
Toko Madu Mulia Alam Nusantara
Johny Online Store

Sangat disarankan

1. Baca tutorial pemasangan template ini sampai selesai.
2. Disarankan upload gambar produk dengan ukuran length and width sama (e.g. 300x300px).
3. Agar hasil akhir penggunaan template maksimal dan tata-letak post teratur, JUDUL POST jangan terlalu panjang, karena akan menggeser gambar ke bawah.
4. Untuk percepatan loading, simpan javascript yang ada di template ini ke tempat penyimpanan Google Code Anda. Cara menyimpan di Google Code baca tutorial disini.

Update currency

Untuk merubah simbol currency dari $ (dollar) ke Rp (rupiah) pada shopping cart :

1. Cari URL script ini di Edit HTML :
   
   
   http://jagad.googlecode.com/files/WojosimpleCart-IDR.js
   
   Setelah ketemu ganti dengan URL script berikut :
   
   

   https://masolis-javascript.googlecode.com/svn/trunk/blackstorecart-rupiah.js
   
   
2. Langkah selanjutnya, masih pada Edit HTML ganti USD pada kode ini :
   
   
   simpleCart.currency = USD;
   
   
   menjadi
   
   
   simpleCart.currency = IDR;
   
   
3. SAVE template.

Currency akan berubah menjadi Rp. Perlu dingat!!! INI hanya sekedar penggantian currency ke Rp, tidak bisa untuk checkout (pembayaran langsung) via Paypal. Karena Paypal belum menerima Rp sebagai alat pembayaran.

Updates nama barang

Beberapa komentar masuk, diantaranya menginginkan tampilan nama barang di shopping cart, untuk itu ganti yang lama dan download ulang. Template ini sudah di-updates dengan menampilkan nama barang (lihat demo)

Template toko online terbaru Johny Magstore
Dua template Toko Online tanpa shopping cart

Demo | Download

Update Bloggerstore Template

My Google Code was banned again, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

---

Komentar masuk : (cara pembayaran via bank lokal)

1. kalo pembayaran via bank lokal gimana setingnya?
   jadi checkoutnya biar ke rek lokal gitu loch..bca, mandiri, bri dll dan tentu saja dilengkapi dengan data diri dan alamat pembeli untuk tujuan pengiriman...
   tengkiyu mas... tambah sukses!!!!
   
   
2. Jawab :
   Bisa dibuat page terlebih dulu dengan judul order yang berisi form pembayaran. Anda bisa membuatnya lewat google docs contohnya ini :
   
   

   https://docs.google.com/spreadsheet/viewform?hl=in&pli=1&formkey=dEo5aEw4aTBNYlNWODF2VEZkOW10dmc6MQ#gid=0

Ada 2 tombol dibawah gambar produk - yaitu add to cart dan view detail - untuk SHOPPING CART.

Jika tidak mau pakai sistem shopping-cart sebagai alat transaksi, maka ubah tombol add to cart menjadi order dan diarahkan ke direct link halaman formulir order yang sudah dibuat sebelumnya.

Contoh form pemesanan misalnya seperti ini (contoh form ini dibuat menggunakan docs google).

Jadi jika Anda gunakan form order untuk transaksi penjualan, fitur shopping cart tidak akan terpakai, Maka hapus saja semua script CSS dan javascript untuk shopping cart pada template ini.

Read More

cara memasang monotize pada dasbor blog

Anda mungkin salah satu yang bingung kenapa pada dasbor blog anda tidak ada fasilitas Monetize/Uangkan meskipun blog anda telah berumur 6 bulan, sedangkan teman anda yang baru kemarin membuat blog ada fasilitas Monetize/Uangkan. setelah saya cek ke dasbor blog saya ,,sekarang saya tahu kenapa blog saya dulu juga tidak ada tab monotizenya. tapi sekarang saya dah temukan keluhan ini dan bagaimana cara mengatasinya.

Fasilitas Monitise/Uangkan ini digunakan untuk memasang iklan adsense anda apabila anda telah daftar ke Adsense dan diterima oleh google maka penempatan iklan berdasarkan yang disarankan oleh google. Agar lebih familiar google menyediakan fasilitas untuk menempelken iklan tersebut yaitu dengan fasilitas Monetize/Uangkan, anda tinggal menempatkan sesuai dengan keinginan google. untuk mempermudah saya kasih tool :

Anda buka dulu dasbor blog anda, klik pengaturan lihat ada kolom formatanda cari Bahasa maka yang harus anda isi dengan Inggris, meskipun blog anda Bahasa Indonesia, tapi kalau anda mau diterima oleh Adsense lebih baik memakai bahasa inggris.

Lihat perubahannya maka di dasbor anda akan berubah yang tadinya hanya ada Kolom Posting, Pengaturan Tata Letak kini ada Uangkan/Monetize.

Selamat mencoba semoga bermanfaat, jangan lupa kasih komentar ya…. wassalam

Read More

Cara Buat Tulisan Berjalan / Effect Marquee di Blog

Efek marquee artinya memberikan atau membuat kesan berjalan/bergerak pada suatu text. Efek Marquee atau tulisan berjalan umumnya di letakkan di bagian atas Header blog atau di bagian Footer Blog dan biasanya Efek marquee berisikan teks ucapan selamat datang. Untuk menampilkan tulisan berjalan pada blog, kita hanya menyisipkan kode HTML SEBELUM dan SESUDAH teks yang akan ditampilkan. Di bawah ini terdapat delapan efek marquee yang saya berikan, silahkan di copy paste di blog sobat.

Read More

Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan Carousellite script tanpa menambahkan efek easing dan mousewheel.

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXJAV0L3XUwO8MRENYMZvxX5lhCv_TLhOsAkKSQRBNucJGY062CO6DfyhkZEr89SrCzOQKmn2rEs2xHzmGmKZGFSDOd0doZO7nRGKeU82Zq3nJi8kC9XO2wjf8HWQ6Xbr_iJtJfHersCM/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOjJUdsqOkqvuvtVA21hmeYeLheM2BA2mKUROGQRAIoir-2i9iU7cKyqZdWhJtm4cffp1I7iHYf0WfSAITLYtdjzxAlwG3YmOYaM2Fhn0gEjYDnpfHdN1pQDqx_1ZkmJBuXDdV4Jr-aHg/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYBW2QOrguB23_Gi1KyvsNszUrHE4fj2mOdEHeDYW3kxRUgSST4C9BjKrTVnW4VgnDO8EHJQ1Wfsx0c0hLqji_vWnAs9eKnXGPYnzEE9KMJscgx2RvvuVfWm3jhgU6JPMHr-3rpMRb3no/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_47JSvZwkde5SFk7yc_9W-PpxAI8rlv9loxo0XhNkv-W9jeK5BniiHWPgBkpxTIypwR-yaRtMYQhDUH2gnKFTEttS4St1OUeVefkPwNRRmEPE_Akqo8lSKd6e-yd0gKmprbu6fLxJ_s/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAAlajYbCYDmxYoHCvpGXTBhp2opIximUxzsQxxwwFNl87gnEkiTggj2KLh6OISq8aWAnw6oOphyphenhyphensvDmp5zu57HxTmaPKghkhBH6-rQ75oa0d4WOCDYY_iJq7LiY_T6_BDz48CbwLuPE/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwKWSb4O04z9kHoopb1-ZtCtsU1_h-hMPyMwXAWeUNFTM9XgIxKLUypDINwlzld7zLapjDgVTgjWB-89Up_fvcz_1ycIh_1EbkAcOlJlrDSiLSaOjmMaoXK_BiwSP2IoW6Ql-EmYDh08/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode</head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVzPZXBHNWFbKM9RWOKmVh3RfMFEQUWyU_N2s3QomdKucsFHXhBpu76sB3As6-IF8Rn4FVgxU8Z6aVNajJmugyc-lUc2_m1TMyBN4BLM2vA4jLbvkLQiBYgh3JnzkCZuas85cxdrTwLw/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Keterangan :

Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.jswalaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).

7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)
</script>
</b:if>

Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 

8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

Read More