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 )