Cara Mudah Membuat Scroll pada Popular Post

Cara Membuat Scroll pada Popular Post - Sebenarnya tutorial yang udah lama, namun gak ada salahnya di post lagi bagaimana cara membuat Widget Postingan populer dengan Fungsi Scroll alias bisa ditarik kebawah keatas, tentunya dengan tujuan biar bisa menghemat tempat, oke untuk contoh bisa lihat gambar saya dibawah ini,

Scroll pada Popular Post

Nah caranya Gampang banget, yakni ;

1. Masuk ke blogger
2. Buatlah Entri Populer/Populer Post dengan menambah Gadget. (jika diblog anda belum terpasang popular post). Dan save it..
3. Untuk menambahkan fungsi scroll pada popular post, masuk ke Template >> Edit HTML.CTRL+F dan ketikkan kata “Populer Post”. 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:300px;'>
<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>

4.  Letakkan Kode berikut ini <div style='overflow:auto; width:ancho;height:200px;'> sebelum kode <div class='widget-content popular-posts'>
5. Letakkan Kode </div> berikut Sebelum kode </b:includable>
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)
6. Simpan template

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Related Articles :