Animated Widget Popular Post

Oke, kali ini saya akan mencoba memberikan sedikit tips dan trik blogger yang belum lama saya temukan sendiri, dengan mengikutsertakan jQueri di dalamnya. Untuk sekarang ini saya akan menjelaskan tentang widget Entri Popular yang baru oleh Blogger dan menampilkannya secara slide dengan mengunakan jQuery Spy. Langsung aja, sekarang anda bisa mencobanya sendiri dengan mengikuti langkah2 di bawah ini :

- Login ke Blogger Dasbor - Page Element
- Tambahkan 1 buah widget Entri Popular pada salah satu sidebar anda dan save (lihat gambar di bawah)

- Setelah anda menambahkan widget Entri Popular lalu masuk ke Edit Html - Checklist Expand Template Widget
- Cari kode ]]></b:skin> dan masukkan kode CSS berikut di atasnya atau sebelum kode ]]></b:skin>

#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; }

- Masukkan code JavaScript berikut sebelum </head>

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

Catatan :
Angka 2 yang berwarna merah pada javascript diatas adalah jumlah post yang di tampilkan, anda bisa mengubahnya hingga sesuai dengan keinginan anda, maksimal 4 dan default 2.

- Selanjutnya anda cari kode <div class='widget-content popular-posts'> dan ganti kode <ul> yang ada dibawahnya dengan :

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

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

</div>

DEMO: Animated Widget Popular Post

Source: edopranata.blogspot.com