Pelajari

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!

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!