Cara Membuat Animasi Entri Popular

KALI ini saya akan membagikan beberapa tips cara membuat animasi entri popular yang saya dapat dari sini !

oke caranya !!

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