Cara Membuat Popular Posts Bergerak di Blogspot

Cara membuat popular post bergerak. Sebenarnya cara membuat popular post memang sudah disediakan oleh blogger, akan tetapi tidak dapat bergerak seperti yang ada di beberapa blog. Itu sebabnya di sini akan dijelaskan mengenai cara membuat popular posts bergerak agar supaya penampilan blog lebih menarik. Berikut langkah-langkah membuat popular post bergerak:

1. Login blogspot >> klik Desain >> klik Tata Letak/Layout. Lihat gambar di bawah ini:

2. Klik Tambah Widget atau Add a Gadget,
3. Pilih Popular Posts Add atau Entri Popular,
4. Save/Simpan.

5. Apabila Gadget sudah terpasang selanjutnya melakukan modifikasi HTML. Caranya, klik Edit HTML, jangan lupa centang Expand widget. Kemudian cari kode 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>

 6. Letakkan kode di bawah ini setelah kode diatas:

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

7. Cari kode: </ul> yang terletak di bawahnya. Kemudian, letakkan kode di bawah ini tepat sebelum kode tersebut:

 </marquee>

 Maka, kode HTML akan menjadi seperti berikut 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>

 Jika hendak menggantikan tinggi gadget, silakan ganti kode bercetak tebal/bold di atas. Selanjutnya, klik Privew/Pratinjau terlebih dahulu dan klik Simpan/Save jika telah sempurna. Selamat mencoba dan enjoy with BER-BAGI.blogspot.com