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/
sip gan..tapi aku masih bingung
ReplyDeleteheheh
mohon bimbingannya
ane newbie
follbak ya
http://4kopisusu.blogspot.com
pnjang bgt tutorx bos, msh bgung nich
ReplyDeletebro,udah gw pasang tapi entri populernya koq pendek bgt...gmn set tingginya??
ReplyDeleteartikelnya bagus.... tp ane cukup pake yg default aj gan, biarpun penampilannya kurang menarik, tp gak usah edit2 kode...
ReplyDeletethanks dah berbagi.
mantap sob artikelnya....
ReplyDeletetapi masih sangat membingungkan, apalagi saya yang masih awam dengan blogger.....
http://bloganeuk-pidie.blogspot.com