MEMASANG WIDGET ANIMASI POPULAR POST

Menanggapi permintaan share dari sobat blogger, Tips Wisata Murah tentang widget popular post yang bergerak [Popular Post Animated Widget], maka disini saya akan share tentang cara membuatnya di blog kita. Sebagai catatan, mungkin widget tidak bisa berjalan pada beberapa template. namun tidak ada salahnya untuk mencoba.

Ikuti langkah-langkah berikut:

• Silahkan pasang terlebih dahulu widget popular post, Design > Page Elemen > Add a Gadget > Popular Posts (New!) 
• Jika sudah, masuk ke Edit HTML > Centang Expand Widget Template. Ingat! Selalu back-up template kamu sebelum melakukan perubahan. Sekedar untuk jaga-jaga jika terjadi kegagalan.
• Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas 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; }

• Cari kode </head> dan pastekan kode dibawah ini diatas 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>

Keterangan:
Angka 2 pada kode diatas adalah jumlah post yang ditampilkan. Kamu bisa menampilkan hingga 4 popular post.

• Cari kode <div class='widget-content popular-posts'> dan hapus kode <ul> yang ada dibawahnya dan ganti dengan kode:

<div id='postlist-spy'>

<ul class='spy'>

• Langkah terakhir, cari kode </ul> yang pertama kali anda temukan setelah kode <div class='widget-content popular-posts'> dan masukkan kode </div> setelah </ul>

Simpan template kamu dan lihat hasilnya.

Demikian , selamat mencoba dan moga berhasil!

Thanks to Edo Pranata for this valuable tutorial...keep move on!

Read more »