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 menerapkan dan memperbagus tags h2, h3 dan h4 dalam postingan

Related:Memperindah Popular Posts dengan Nomor Urut Otomatis {2 style}

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 Twitter Fans Box melayang

Related:Cara membuat animasi burung twitter di blog

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

• 
  Membuat Widget about Author box di blogger Widget Meet the Author Sebuah blog bagus, sebagus apapun itu pasti mempunyai author box baik pada widget atau dibawah setiap postingan. Author bo ...
• 
  Mengatasi Followers List is Private pada Gadget Google+ Followers Baru-baru ini saya mendapatkan email dari google. Mereka berkata : pasang google+ follower untuk memperluas audiens blog anda. Oke mungkin ini sebua ...
• 
  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 membuat kode warna pada blog Halo teman-teman.. ? Bagaimana kabar anda hari ini.. ? Saya sangat stress setelah lebih dari 20 postingan blog saya terhapus secara tidak sengaja m ...
• 
  cara menerapkan dan memperbagus tags h2, h3 dan h4 dalam postingan Kenyang banget udah bukber alias buka bersama, bareng temen-temen sekelas. Walupun menyitrika dompetku sehingga menjadi tipis, yang penting bisa lia ...
• 
  Cara membuat widget Email Subscription [4 style] Cara membuat widget Email Subscription [3 simple style]. Dengan menambahkan widget ini, anda membuat sebuah widget yang membiarkan pembaca untu ...