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 ! :)

• Membuat Scroll Pada Blog Archive (Arsip Blog)
• Cara membuat scroll pada Threaded comment
• 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

Related:Cara mendapatkan approve google adsense dengan mudah

Related:Cara membuat tombol share stylish dibawah postingan

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 !

Related:Cara Membuat Daftar Isi otomatis dengan desain Keren

Related:Cara Memasang Google+ Comments pada Custom Templates

Sekian post tentang cara membuat Scroll pada Popular Post. Saya 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

Facebook Twitter Pinterest WhatsApp Telegram Linkedin

Related Posts

• 
  Cara Menampilkan Widget / CSS / Script Pada Halaman Tertentu Banyak cara mempercepat loading blog, seperti yang sudah saya post sebelumnya tentang Cara Mempercepat Loading Blog | Perce ...
• 
  Cara memasang Widget Recent Tweet melayang Seperti yang sudah saya katakan pada post sebelumnya yaitu tentang Cara menambahkan Widget Twitter Feeds di Blogger. Twitter adalah sala ...
• 
  Cara membuat comment policy with dropdown effect Sibuk dengan bimbel dan pesantren ramadhan di sekolah tidak menyurutkan saya untuk menulis postingan kali ini. Bukan niat untuk nulis, tapi niat u ...
• 
  Cara membuat Twitter Fans Box melayang Sumber: mytechcafe.blogspot.com Banyak web masters menggunakan media twitter sebagai media informasi blognya kepada pembaca. Twitter ...
• 
  Cara Membuat Animasi Pesan dengan JQuery Rotator Di Blogger Halo ? ada yang baru nih ! apa ? ini nih yang keren dan amazing :D haha.. Kadang-kadang orang selalu memasukan kutipan kutipan atau kata-kata bi ...
• 
  Membuat komentar standar menjadi fantastis disertai counter Banyak blogger memasang threaded comments di blognya. Threaded comments berguna agar interaksi kotak komentar antar komentator dengan admin semaki ...