Cara Membuat
Popular Post Bergerak Kebawah atau lebih tepatnya bergerak slide, banyak cara yang bisa kita gunakan agar sidebar yang ada di blog kita kelihatan cantik atau keren, salah satunya yaitu dengan cara membuat widget bergerak, kali ini saya akan memberikan satu lagi cara sederhana untuk mempercantik tampilan blog kita yaitu dengan membuat widget popular post bergerak, atau jika anda berniat untuk opimalkan blog, baca artikel saya sebelumnya yaitu tentang
Cara Membuat Popular Post Seo Friendly,.
kembali ke topik permasalahan tentang membuat popular post bergerak, apa itu Popular Post ? seperti apa itu Popular Post ? Cari di google dengan kata kunci pengertian Popular Post . :D
Okey untuk membuat Popular Post caranya cukup mudah hanya sedikit edit HTML saja.
Tidak usah berpanjang lebar lagi dan Simak Caranya Berikut Ini.
Cara Membuat Popular Post Bergerak
1. Pertama ya sobat harus login terlebih dahulu ke blog sobat
2. Pilih Tata Letak => add gadget => pilih HTML/java script
3. Masukkan script Berikut ke kolom yang tersedia
<style scoped='scoped' type='text/css'>
#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; }
</style>
<script type='text/javascript'><!--//--><![CDATA[//><!--
jQuery(function () {
jQuery('ul.spy').simpleSpy();
});
(function (jQuery) {
jQuery.fn.simpleSpy = function (limit, interval) {
limit = limit || 4; // 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>
4. Simpan dulu template sobat
5. Sekarang sobat menuju ke Template => Edit HTML Cari Kode ini
<div class='widget-content popular-posts'> di bawah kode ini ada kode
<ul> . hapus kode
<ul> dan Ganti dengan Kode dibawah ini:
<div id='postlist-spy'> <ul class='spy'>
Tunggu dulu sob, sobat scroll kebawah, sobat cari kode
</ul> dan paste kode
</div> setelah kode tersebut. lihat pemasangannya berikut ini.
<div class='widget-content popular-posts'>
<div id='postlist-spy'> <ul class='spy'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/> bla bla bla bla bla bla bla . . . . . ............................... ................. </li>
</b:loop>
</ul></div>
</div>
</b:includable>
Note:
- Warna Biru adalah kode yang ditambahkan.
- Warna Hijau adalah kode yang dicari.
6. Sekarang simpan template sobat dan lihat hasilnya. Mudah kan
cara membuat popular post bergerak. jangan lupa baca juga
Popular Post seo Friendly. Semoga bermanfaat sobat, jika ada yang kurang jelas silahkan bertanya melalui komentar dibawah.
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini