Cara Membuat Popular Post Bergerak Ke Atas

Cara Membuat Popular Post Bergerak Ke Atas

Cara Membuat Popular Post Bergerak Ke Atas - Mungkin blog ini telah sering mengulas tentang Bagaimana cara membuat popular post, tetapi dengan versi berbeda-beda. Sekitar 3 hari yang lalu saya memposting Cara Membuat Populart Post Bergaya Scroll dan kali ini saya akan mengeshare Cara Membuat Popular Post Bergerak Ke Atas dimana artikel popular post tersebut bergerak naik keatas secara berurutan seperti halnya bagian End dari sebuah Film di TV.
Mau liat Screenshotnya saya pikir tidak usah karna Popular Post ini sudah diterapkan pada blog ini, Anda hanya liat di sidebar blog ini, Kalau anda tertarik membuatnya Yuk ikuti langkah-langkah berikut :

1. Login ke Blogger
2. Pilih Menu Tata Letak
3. Tambahkan gadget Entri Popular atau Popular Post
4. Pilih Menu Template -> Edit HTML
5. Sobat cari kode berikut :

<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>

6. Kalau sudah ketemu, Letakkan kode berikut tepat diatas kode yang tadi

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

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

</marquee>

Jangan dulu di save, cocokan dulu dan hasilnya 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>

8. Setelah terlihat cocok, Simpan Template anda

Regards,

Twitter                ( @firmantgb )
Facebook           ( Firman Maulana Tgb )

visit link download