Widget Popular Posts Dengan Efek Marquee

Setelah sebelumnya saya mengetengahkan tutorial menambahkan widget popular posts pada blog, kali ini saya kembali update dengan modifikasi berbeda pada widget popular posts blogger. Yaitu widget popular posts dengan efek marquee, berjalan keatas.
Untuk jelasnya bagaimana efek marquee pada popular posts silahkan klik button live demo berikut.

Untuk membuat popular posts dengan efek marquee ini, saya sarankan untuk anda memback up template terlebih dahulu guna menghindari kesalahan dalam penambahan kode pada template.
Baiklah tahapan pembuatannya sebagai berikut:
1. Login ke akun anda>> Pada dasbor masuk pada bagian tata letak>> Tambah gadget dan pilih popular posts seperti gambar berikut

Jika anda sudah menambahkan widget ini maka lewati langkah no 1
2. Masuk ke bagian template>> Edit HTML
3. Ceklist pada bagian Expan widget templates
4. Cari kode <div class=’widget-content popular-posts’> dan simpan kode marquee dibawah ini setelah 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%'>
<ul>
<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>
</ul>
</marquee>
</ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>

6. Simpan template dan lihat hasilnya pada blog anda!