Cara bikin auto slider entri posting populer

Trik agar antri populer jadi auto slider agar tidak memakan tempat jika di sematka wedget tersebut baik di sidebar left atau di sidebar right kode dan caranya seperti berikut:

1.loggin ke dhosbor akun blogger
2.klik tab rancangan/disign
3.klik Edit HTML
4.Centang Expand Widget Template
5.Cari code ]]></b:skin>
6.Copy  code di bawah ini lalu VASTE tepat di atas ]]></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; }

5.Cari code </head>
6.Copy  code di bawah ini lalu VASTE tepat di atas </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>

Ket:(limit = limit || 2; // Number popular post shown - maximal 4 default 2)adalah julah entri yang di tampilkan.

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

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

8.Langkah terakhir, cari kode </ul> yang pertama kali anda temukan setelah kode <div class='widget-content popular-posts'> dan masukkan kode </div> setelah </ul> yang pertama anda temukan tadi.
9.Save tample anda dan cek hasilnya.

SEKIAN DAN TERIMA KASIH

Ditulis Oleh : Anonymous

Artikel Cara bikin auto slider entri posting populer ini ditulis oleh Anonymous pada hari . Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara bikin auto slider entri posting populer dapat Anda sampaikan melalui kotak komentar dibawah ini.

:: Get this widget ! ::

Anda sedang membaca artikel tentang Cara bikin auto slider entri posting populer dan anda bisa menemukan artikel Cara bikin auto slider entri posting populer ini dengan url http://tutorial-onlineku.blogspot.com/2012/08/cara-bikin-auto-slider-entri-posting.html. Anda boleh menyebarluaskan atau mengcopy artikel Cara bikin auto slider entri posting populer ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.Tutorial Onlineku | Tutorial Blogspot | Tutorial Blogger | Tutorial Bagi Fomula

Share :