Cara Membuat Scroll pada Entri Populer

Teknologi, (AnakDetik) - Kesempatan kali ini AnakDetik akan mencoba membantu blogger untuk membuat Scroll pada Entri Populer yang bertujuan untuk mempermudah / membuat simple tampilan Entri Populer supaya tidak memakan banyak ruang kebawah dan agar terlihat lebih rapih. Untuk para blogger yang tertarik untuk menerapkannya di blog kalian berikut cara menerapkannya, diantaranya :

1.  Masuk ke blogger sobat terlebih dahulu  

2.  Buatlah Entri Populer/Populer Post dengan menambah Gadget. (jika diblog anda belum 

     terpasang popular post) lalu save it.  

3.  Langkah selanjutnya untuk menambahkan fungsi scroll pada popular post, masuk ke  

     Template >> Edit HTML 

4.  Tekan CTRL+F dan ketikkan kata “Entri Populer” pada kolom yang tertera. Setelah itu 

     Cari kode yang mirip seperti dibawah ini :

<b:widget id='PopularPosts1' locked='false' title='Terpopuler' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div style='overflow:auto; width:ancho;height:500px;'>

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

</div>

</div>

</b:includable>

</b:widget>

 5. Setelah menemukan kode diatas letakkan kode berikut ini <div style='overflow:auto; width:ancho;height:500px;'> sebelum kode <div class='widget-content popular-posts'>

6. Letakkan kode </div> sebelum kode </b:includable>

7. Setelah itu Simpan Template.

Note :

• Perhatikan tulisan berwarna merah di atas, kode itulah yang harus disisipkan, sedangkan tulisan yang berwarna biru pada height:260px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 260 sesuai dengan keinginan anda)
• Untuk mempermudah pencarian  pada Edit HTML copykan saya kode yang ingin dicari pada kolom yang tertera, seperi : <div class='widget-content popular-posts'> atau </b:includable>.

Demikianlah  Tutorial cara membuat Scroll pada Entri Populer diharapkan dapat membantu para blogger untuk dapat menghias laman blognya.

Sumber : Admin / Beberapa Sumber