Membuat Popular Posts Marquee Berputar Keatas

Situseo Blog : Modifikasi dengan menambahkan script marquee pada popular posts default blogger sehingga menghasilkan widget popular posts yang bergerak berputar atau rolling keatas, jika sebelumnya pernah dibahas mengenai cara membuat popular posts animasi gambar berputar dengan menambahkan kode css.

Untuk membuat popular posts bergerak berputar keatas, saya sarankan untuk membuat back up template terlebih dahulu untuk menghindari kesalahan dalam penambahan kode pada template, tahap membuatnya sebagai berikut :

1. Masuk akun Blogger - Design/Rancangan - Add Gadget dan pilih Popular Posts seperti gambar dibawah ini, jika dalam blog kalian sudah terpasang widget popular posts tidak perlu menambahkan widget ini, kalian lewati saja cara no. 1.

2. Kemudian masuk ke bagian Edit HTML
3. Ceklist pada bagian Expand Widget Templates
4. Cari kode <div class='widget-content popular-posts'> dan simpan kode marquee dibawah ini pada bagian bawah kode tersebut

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

5. Selanjutnya cari kode </b:loop> dan tambahkan kode </marquee> dibawah kode </b:loop>

Sehingga secara keseluruhan kodenya menjadi seperti dibawah 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'>
<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>

6. Save template, dan buka blog kalian untuk melihat hasilnya.

Jika sebelumnya pernah kita bahas mengenai cara Membuat Popular Posts Dengan Animasi Gambar Berputar dengan tambahan kode css didalamnya, jika tertarik untuk mengetahui cara membuatnya, kalian bisa mebacanya pada postingan sebelumnya denga meng-klik link cara membuat popular posts dengan animasi gambar berputar diatas.

Semoga bermanfaat,