Cara Memasang Widget Animasi Entri Populer Pada Blog

Di munggu sore yang mendung 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

Share this history on :

Tweet

Widget

• Cara Membuat Widget Label Dua Kolom
• Follow Twitter Bird dengan Excellent Flash
• Cara Mempercantik Widget Profil
• Cara Mudah Membuat Tombol Share Melayang di Blog
• Buku Tamu Show/Hide Di Sidebar
• Cara Pasang Widget (Buku Tamu) Facebook
• Cara Memasang Widget Followers di Pojok Blog
• NONTON TV | TV STREAMING ONLINE
• Cara Pasang TV Streaming Online Indonesia
• Cara Pasang Text Berjalan Recent Post dan Total Comment
• Cara menampilkan total post dan comment
• Cara Memasang Widget Follow Tersembunyi
• Agar amung.us pada widget sidebar tidak melayang
• Google Translate Versi Baru
• Menghilangkan Sidebar Saat Membuka Posting
• Cara Membuat Search Engine Di Blog
• Cara Membuat Related Post Thumbnail/You Might Also Like di blogger
• Cara Pasang Follow me Twitter di Blog
• Background Buku Tamu
• Pasang Counter Di Blog
• Cara Membuat Buku Tamu Blog Show/Hide di Bagian Atas
• Membuat Chatbox Bergaya Absolute Vertical Sliding Panel
• Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka
• Cara mudah membuat Scroll pada widget

Title : Cara Memasang Widget Animasi Entri Populer Pada Blog
URL : http://blogcunayz.blogspot.com/2011/06/cara-memasang-widget-animasi-entri.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Memasang Widget Animasi Entri Populer Pada Blog sebagai Sumbernya.