Cara Membuat Widget Popular Post Dengan Animasi

Rating: 4.5 Dipostkan oleh Rosianto | Cara Membuat Widget Popular Post Dengan Animasi - Disini saya akan share tentang cara membuat Popular Post Animated Widget di blog kita. Sebagai catatan, mungkin widget tidak bisa berjalan pada beberapa template. Namun tidak ada salahnya untuk mencoba.

Ikuti langkah-langkah berikut :

• Silahkan pasang terlebih dahulu widget popular post, Design > Page Elemen > Add a Gadget > Popular Posts (New!) 
• Jika sudah, masuk ke Edit HTML > Centang Expand Widget Template. Ingat! Selalu back-up template kamu sebelum melakukan perubahan. Sekedar untuk jaga-jaga jika terjadi kegagalan.
• Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas kode ]]></b:skin> tersebut.

#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; }

• Cari kode </head> dan pastekan kode dibawah ini diatas kode </head> tersebut.

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

Keterangan:
Angka 2 pada kode diatas adalah jumlah post yang ditampilkan. Kamu bisa menampilkan hingga 4 popular post.

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

<div id='postlist-spy'>

<ul class='spy'>

• Langkah terakhir, cari kode </ul> yang pertama kali anda temukan setelah kode <div class='widget-content popular-posts'> dan masukkan kode </div> setelah </ul>

Simpan template kamu dan lihat hasilnya.

sumber


Download Software Terbaru 2012 | Game Terbaru 2012 | Film Terbaru 2012 | Informasi Terbaru