Cara Memasang Widget Animasi Entri Populer Pada Blog

Kali ini saya akan mencoba share tentang memasang widget animasi entri populer dan menampilkannya secara slide dengan mengunakan jQuery Spy.

Untuk lebih jelasnya langsung saja ikuti tutorial berikut ini :

1.    Login ke Blogger pilih Design >> Add Gadget >> Entri Populer

2.    Simpan Gadget sobat

3.    Setelah itu klik tab Edit HTML >> centang  Expand  Widget Templates

4..    sebelum sobat menambahkan kode css, nackup dahulu template sobat 

5.    Lalu 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; }

6.    Cari lagi kode </head>  dan 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.


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

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

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

</div>

9.    Simpan template sobat dan lihat hasilnya
Selamat mencoba dam semoha berhasil

sumber http://edopranata.blogspot.com/

Share

Like

G+

Tweet

Tweet