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.
View Demo   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!
View Demo   Demikian tutorial membuat popular posts dengan efek marquee kali ini. Semoga bermanfaat!
Jika ingin mencoba efek lain pada widget popular posts silahkan klik link titel posts berikut:

• Widget Popular Posts Dengan Efek Border Dan Background Color
• Widget Popular Posts Dengan Efek Spinning dan Zooming
• Widget Popular Posts Dengan Efek Animasi Spy

Selamat berkreasi!