Cara membuat scroll pada popular post

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Pada post sebelumnya saya membahas tentang mengedit popular post blogger dengan css. Popular post adalah sekumpulan postingan yang banyak dikunjungi atau dibaca oleh pengunjung berdasarkan hari, minggu, bulan, atau selama-lamanya menurut perhitungan google analytic. Widget popular post sangat berguna bagi blog karena dapat menambah jumlah page views dan mempermudah pengunjung dalam mengexplorasi blog anda. Sekarang saya akan membagikan tentang cara membuat scroll pada popular post. Scroll ini digunakan untuk menghemat halaman sidebar atau halaman lainnya diblog anda. Terutama bagi anda yang menampilkan gambar dan snippet (penjelasan post) pada popular post sehingga membuatnya terlihat panjang dan banyak menghabiskan ruang. Tutorial ini akan berlanjut, tetapi saya sarankan anda membaca postingan sebelumnya ya ! :)

• Memperindah Popular Posts dengan Nomor Urut Otomatis {2 style}

Ok sekarang mari kita maju ke topik pembahasan. Bagi anda yang tertarik, ikuti step-step berikut ini dengan teliti ya :

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.
4. 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: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>

• Letakkan Kode berikut ini <div style='overflow:auto; width:ancho;height:200px;'> sebelum kode <div class='widget-content popular-posts'>
• 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)
• Simpan template