CARA MEMBUAT POPULAR POST BERGANTIAN

Beberapa waktu yang lalu ada seorang sahabat bertanya kepada Mas Mur,, gimana sih bikin popular post yang ada animasi spy kayak di Facebook. Maksudnya yang dapat bergerak turun bergantian gito.

Kemudian Mas Mur jawab, lho kan tinggal cari aja di om google, banyak kok yang sudah membahas ini. Namun, sahabat Mas Mur ini masih bingung mencarinya. Maklum namanya juga baru sama-sama belajar. Akhirnya untuk menjawab pertanyaan itu Mas Mur pun tanya sama om google.

Memang sih banyak sekali postingan yang membahas masalah ini. Namun terkadang butuh kejelian juga. Terkadang bisa jadi tidak cocok dengan blog kita. Untuk itulah Mas Mur pun mengadakan percobaan, mmodal nekat pokoke, lok template rusak yang nanti dibenahi gto tho sob.
Nah Alhasil, Mas Mur menemukan salah satu blog yang sekiranya pas buat Mas Mur, yaitu punya Kang Iskaruji beliau membahas dengan singkat, nah berikut ini adalah kodenya :

Pertama yang harus dilakukan sobat adalah login ke blog sobat
Kemudian dari Dasbor > Rancangan > Elemen Halaman > tambahkan Gadget  > Popular Post
Kemudian silahkan sobat masuk ke edit HTML
Namun perlu diingat bahwa jangan lupa untuk selalu membackup template blog sebelum melakukan perubahan. Hal ini diilakukan untuk mengadakan pembenahan ulang ketika terjadi kesalahan pengeditan tadi.

Dalam edit HTML silahkan sobat cari kode ]]></b:skin>
 taruh kode ini diatasnya

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

Setelah itu, masih ada yang harus sobat tambahkan lagi yaitu cari kode </head>
Dan letakkan Kode ini diatasnya..

<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 sobat dan lihat hasilnya....
Jika ketika mencari kode tidak ketemu mungkin sahabat belum mencentang Expand Template Widget.
Dan untuk mempermudah mencarian kode silahkan sobat gunakan CTRL + F

Selamat mencoba...
Jika masih ada yang belum berhasil bisa ditanyakan sob....akan Mas Mur coba menyelesaikannya.

Subscribe to receive free email updates: