Cara Membuat Scroll pada Popular Post

Scroll pada popular postPada 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 ! :)
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


Last Words

Bagaimana? sangat mudah sekali bukan? Jadi kesimpulannya, sekarang ukuran popular post anda dapat diatur dengan leluasa dan jumlah pageviews blog bertambah. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya !

Sekian post tentang cara membuat Scroll pada Popular PostSaya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk cara membuat Scroll pada Popular Post. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!


Share this

Related Posts

close