cara bikin widget entri populer slide show

ditengah malam yang sunyi senyap tiba-tiba terimspirasi bikin posting tutorial bloger hehehe..

dari pada melamun dan bersedih karena sikap seseorang yang tak mau berubah mendingan tulis post hitung-hitung buat pelajaran pribadi(catatan online) benar gak? hehe..

Oke untuk membuat widget popular posts bergerak seperti di blog ini (disidebar kanan degan tittle entri populer) sobat  harus memasang dulu widget popular post dengan cara berikut:

1.login blog masing2

2.klik menu design>page elemen>add gadget> dan pilih popular posts(new)

3.jika sudah pasang widget popular posts langkah selanjutnya  masuk ke >edit html>expan widget template

(jangan lupa selalu backup template asli untuk menjaga2 ada kesalahan)

4.cari kode berikut  ]]></b:skin> dan paste kode dibawah ini  di atas kode ]]></b:skin>tersebut

#postlist-spy {
font-size: 11px;
overflow: hidden;
margin-top: 5px;
padding : 0; }
#postlist-spy ul {
width: auto;
overflow: hidden;
list-style-type: none;
padding: 0;
margin: 0; }
#postlist-spy li {
padding: 0;
margin: 0 0 5px;
list-style-type: none;
float: left;
height: auto;
overflow: hidden;
line-height: 12px;
text-indent: 0px;}
#postlist-spy li a {
margin-left: 0; }
#postlist-spy li a img {
margin-top: 0;
float: left; }

5.lalu cari kode </head>  klo sudah ketemu paste kode dibawah ini di atas kode  </head>tersebut

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>


<script type='text/javascript'><!--//--><![CDATA[//><!--
jQuery(function () {
jQuery('ul.spy').simpleSpy();
});
(function (jQuery) {
jQuery.fn.simpleSpy = function (limit, interval) {
limit = limit || 2; // Number popular post shown - maximal 4 default 2
interval = interval || 10000;
return this.each(function () {
// 1. setup
// capture a cache of all the list items
// chomp the list down to limit li elements
var jQuerylist = jQuery(this),
items = [], // uninitialised
currentItem = limit,
total = 0, // initialise later on
height = jQuerylist.find('> li:first').height();
// capture the cache
jQuerylist.find('> li').each(function () {
items.push('<li>' + jQuery(this).html() + '</li>');
});
total = items.length;
jQuerylist.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
jQuerylist.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
// 2. effect
function spy() {
// insert a new item with opacity and height of zero
var jQueryinsert = jQuery(items[currentItem]).css({
height : 0,
opacity : 0,
display : 'none'
}).prependTo(jQuerylist);
// fade the LAST item out
jQuerylist.find('> li:last').animate({ opacity : 0}, 1000, function () {
// increase the height of the NEW first item
jQueryinsert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
// AND at the same time - decrease the height of the LAST item
// jQuery(this).animate({ height : 0 }, 1000, function () {
// finally fade the first item in (and we can remove the last)
jQuery(this).remove();
// });
});
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
setTimeout(spy, interval)
}
spy();
});
};
})(jQuery);
//--><!]]></script>

NOTA:  angka 2 yang di cetak tebal berwarna merah adalah jumlah popular posts yang di tampilkan.
silahakn ganti sesuai keinginan sobat,anda bisa menampilkan sampai 4 konten.

 6. terus cari kode <div class='widget-content popular-posts'> dan hapus kode <ul> yang ada dibawahnya. terus ganti dengan kode dibawah ini

<div id='postlist-spy'>
<ul class='spy'>

7.langkah terahir cari kode  </ul> yang pertama kali sobat temukan dibawah kode <div class='widget-content popular-posts'> dan masukkan kode  </div>
dibawah kode </ul> tersebut.

8.jangn lupa simpan/save template. jika masih ragu silahkan klik preview dulu..

tutorial blogger ini sudah selesai  .dan perlu di ingat tidak semua template bisa berjalan dengan widget ini.tapi setidaknya dicoba dulu oke... jika bingung jangan sungkan layangkan pertanyaan sobat di kotak komentar di bawah ini

moga bermamfaat  thanksss