Pages

Subscribe:

Ads 468x60px

Labels

Sabtu, 25 Agustus 2012

cara bikin widget entri populer slide show

Langsung aja teman blog :
 
1.login blog masing2
2.klik menu design>page elemen>add gadget> dan pilih popular posts(new)
3.jika sudah pasang widget popular posts langkah selanjutnya  masuk ke >edit html>expan widget template
(jangan lupa selalu backup template asli untuk menjaga2 ada kesalahan)
4.cari kode berikut  ]]></b:skin> dan paste kode dibawah ini  di atas 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; }


5.lalu cari kode </head>  klo sudah ketemu paste kode dibawah ini di atas 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>


NOTA:  angka 2 yang di cetak tebal berwarna merah adalah jumlah popular posts yang di tampilkan.
silahakn ganti sesuai keinginan sobat,anda bisa menampilkan sampai 4 konten.

 6. terus cari kode <div class='widget-content popular-posts'> dan hapus kode <ul> yang ada dibawahnya. terus ganti dengan kode dibawah ini

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

7.langkah terahir cari kode  </ul> yang pertama kali sobat temukan dibawah kode <div class='widget-content popular-posts'> dan masukkan kode  </div>
dibawah kode </ul> tersebut.

8.jangn lupa simpan/save template. jika masih ragu silahkan klik preview dulu..

Tidak ada komentar:

Posting Komentar