Cara Menambahkan Scroll Pada Popular Post atau Entri Popular di Blog

Buat sahabat yang blog yang belum tau bagaimana cara menambahkan scroll pada popular post, kali ini saya akan memberikan cara nya :

 

- Login terlebih dahulu mengunakan akun bloger 

- Buatlah Entri Populer/Populer Post dengan menambah Gadget pada sidebar, beri nama dengan "Populer Post" ( bisa diganti sesuai keingian ). 

- Simpan/save. sampai disini anda telah membuat Entri Populer/Populer Post ( tanpa fungsi scroll ) 

- Untuk menambahkan fungsi scroll pada Arsip Sekarang menuju Tata letak >> Edit HTML. Beri tanda centang pada Expand Template Widgets. 

- Cari Populer Post yang sudah di buat tadi, dengan CTRL+F dan ketikkan kata “Populer Post”, ( biasanya di pojok kanan bawah ). akan muncul kode hatml seperti di bawah ini:

<b:widget id='PopularPosts1' locked='false' title='Galery Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div style='overflow:auto; width:ancho;height:200px;'>
<div class='widget-content popular-posts'>
<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>
<b:include name='quickedit'/>
</div></div>
</b:includable>
</b:widget>


 

Letakkan Kode berikut ini <div style='overflow:auto; width:ancho;height:200px;'> sebelum kode <div class='widget-content popular-posts'> Selanjutnya Letakkan Kode </div> berikut Sebelum kode </b:includable>

*NB: Perhatikan tulisan berwarna merah di atas, kode height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan ).  Simpan template dan lihatlah hasilnya. Selamat Mencoba.