Cara Membuat Popular Post bergerak di blogspot

Saya mau share cara membuat Popular Post bergerak ke atas, contohnya dapat dilihat di blog ini. mungkin bagi para blogger membuat popular post sudah pada tau dan sudah ga asing lagi karena memang sudah disediakan di menu tambah widget, namun itu masih dalam tampilan biasa atau tidak bergerak. Nah, pada kesempatan ini saya akan memberikan trik agar popular post tersebut jadi bergerak. Caranya sebagai berikut:

• Bagi yang belum pasang widgetnya pertama-tama biasa masuk ke Desain - Tata Letak

• Kemudian klik tambah gadget.
• Lalu pilih Entri Populer centang semua kotak
• Simpan.

Apabila Gadget sudah terpasang kemudian klik Desain-Template yang posisinya dibawah Tata Letak.
Kemudian klik Edit HTML - lanjutkan dan jangan lupa centang tanda Expand Template Widge.
Setelah itu cari kode: 

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>

Kemudian tambahkan kode dibawah ini setelahnya

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'> 

setelah itu cari dibawahnya lagi kode </ul>, dan masukan kode dibawah ini tepat sebelum/diatas kode </ul> tersebut.

</marquee>

Sehingga hasil akhirnya seperti ini :

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
 <b:includable id='main'>
 <b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content popular-posts'>
 <ul>

<marquee align='left' direction='up' height='140' onmouseout='this.start()'   onmouseover='this.stop()' scrollamount='3' width='100%'>

<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if></b:if>
</li> </b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>

Catatan :

Untuk Merubah Tinggi Gadget dan Kecepatannya silahkan ganti kode yang berwarna merah

Simpan Template anda dan lihat hasilnya

Sumber :  http://azzam10.blogspot.com/2012/04/cara-membuat-popular-post-bergerak-di.html