5


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/

G+

Post a Comment

  1. sip gan..tapi aku masih bingung
    heheh
    mohon bimbingannya
    ane newbie
    follbak ya
    http://4kopisusu.blogspot.com

    ReplyDelete
  2. pnjang bgt tutorx bos, msh bgung nich

    ReplyDelete
  3. bro,udah gw pasang tapi entri populernya koq pendek bgt...gmn set tingginya??

    ReplyDelete
  4. artikelnya bagus.... tp ane cukup pake yg default aj gan, biarpun penampilannya kurang menarik, tp gak usah edit2 kode...
    thanks dah berbagi.

    ReplyDelete
  5. mantap sob artikelnya....
    tapi masih sangat membingungkan, apalagi saya yang masih awam dengan blogger.....

    http://bloganeuk-pidie.blogspot.com

    ReplyDelete

 
Top