Sabtu, 07 Januari 2012

Cara Memasang Entri Populer + Efek Slide

Posting kali ini,saya akan berbagi kepada anda tentang cara memasang entri populer + efek slide.Efek slide ini sangat hemat halaman blog anda karena efek sliding ini tidak menampilkan semua posting populer sekaligus.Dia akan bergeser satu per satu postingan.Jika anda memasang entri populer dengan menampilkan 10 posting pada halaman depan,maka 10 posting ini akan ditampilkan tetap di tempatnya dan jika anda memakai efek sliding ini,maka posting anda yang 10 posting akan menjadi 4 dan dia akan bergeser pada posting ke 10 dan kembali lagi ke posting ke 1 dan seterusnya.Pemasangan Entri Populer + efek slide memang agak memusingkan anda,maka perhatikanlah baik-baik langkah-langkahnya :

Pertama-tama,anda harus masukkan widget entri populer dulu,baru lakukan langkah-langkah di bawah ini : 

1. Login ke Blogger - Rancangan - Edit HTML - Centang Expand Template Widget
2. Cari kode ]]></b:skin> dan paste kode berikut di atasnya :
    #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; }

    3. Cari kode </head> dan masukkan kode berikut di atasnya :

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

    Perhatikan angka 2 (jumlah post yang ingin ditampilkan) anda bisa mengubahnya hingga sesuai dengan keinginan anda, maksimal 4 dan default 2.


    4. Cari kode <div class='widget-content popular-posts'> dan ganti kode <ul> yang berada di bawhnya dan gantilah kode tersebut dengan kode berikut :
     
    <div id='postlist-spy'>
    <ul class='spy'>

    5.Cari kode </ul> yang menjadi penutup dari kode <ul> dan masukkan kode </div> di bawah kode </ul>

    Anda dapat melihat demonya di sidebar blog saya

    Semoga anda mengerti seperti yang di atas.Posting ini sangat rumit.Hubungi saya melalui kotak komentar jika anda tidak paham / mengerti tentang cara-caranya. 

    Sumber : http://yanst3r.blogspot.com

    Tidak ada komentar:

    Posting Komentar

    Saat anda berkomentar,mohon jangan menulis kata-kata yang kotor dan menulis kata-kata yang tidak berkaitan dengan Artikel yang anda baca.Selengkapnya,silakan baca disini.Jika anda melanggarnya,komentar yang anda sampaikan akan saya hapus.