Cara Buat Entri Popular Dengan Animasi Spy

Wah... dah lama gak coret-coret nih, setelah agak vakum sejenak karena rutinitas kuliah dan kegiatan organisasi saya yang cukup padat dan menyita waktu, sekarang saya coba ingin belajar lagi dengan kawan-kawan semua lewat dunia maya, dan Alhamdulillah ya sesuatu banget saya ada blog dan baru direnovasi sedikit nich.... tapi lumayan lah ya,.....!!!

Oke, sedikit saya akan mencoba menularkan apa yang saya tahu, dan saat ini saya akan membahas tentang widget Entri Populer dengan animasi spy. nah fungsinya adalah untuk mempercanik tampilan blog kita agak gak terlihat kaku-kaku banget.

Mungkin langsung aja ya kawan, dah gak sabar kan gimana sih cara ngebuatnya? Oke silahkan simak langah demi langkahnya ya!

Buka akun blog anda, atau klik di sini

Pilih Button Rancangan kan pilih Edit HTML

Jangan lupa kasih tanda centang pada Expend Widget

Cari ]]></b:skin> atau dengan tekan Ctrl+F

Jika udah ketemu, silahkan letakkan script di bawah ini 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; }

Cari lagi script </head> dan masukkan script di bawah ini sebelum kode </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>

::: Note : angka 2 yang berwarna biru bisa kalian ganti karena itu adalah angka yang menentukan jumlah post yang akan tampil.

Selanjutnya silahkan cari kode <div class='widget-content popular-posts'>  dan silahkan ganti kode   <ul>   dengan script di bawah ini

<div id='postlist-spy'>

<ul class='spy'>

Kalo udah, silahkan  cari kode </ul> pertama setelah anda mencari kode <div class='widget-content popular-posts'> dan sisipkan script di bawah ini setelah kode </ul>  dan sisipkan script di bawah ini setelah kode </ul> 

</div>

Kemudia simpan!

Semoga Berhasil ya kawan!