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!






Artikel Menarik Lainnya :



21 comments

avatar
28 May, 2013

terimakasih artikelnya sangat bermanfaat.

Best Regards
Ferri Yusrizal
http://catatan-fey.blogspot.com/

BalasHapus
avatar
31 May, 2013

tapi kok gak bisa ya gan

BalasHapus
avatar
yoyo suharyo Author
31 May, 2013

@ahmad suyadimasa gk bisa gan.. pasti bisa.. pasti agan salah menempatkan kodenya.. terbukti kok bisa.

BalasHapus
avatar
Anonymous
27 July, 2013

Terima kasih atas infonya. saya aka coba.
Kunjungan baliknya gan

BalasHapus
avatar
yoyo suharyo Author
28 July, 2013

monggo gan.. ok siap meluncur.. wusshh

BalasHapus
avatar
27 October, 2013

Maksih Tutornya..mau sya praktekkin di blog sya

BalasHapus
avatar
Anonymous
12 November, 2013

sukses gan
di tunggu kunjungan baliknya dan follow baliknya gan
seorang blogger sejati pasti menepati janjinya :D

BalasHapus
avatar
Anonymous
03 December, 2013

terima kasih kang ujang info nya

BalasHapus
avatar
12 September, 2014

Terima kasih Agan informasinya pas ini yang sedang aku cari, mau aku praktekin ya Agan.
fast diet

BalasHapus
avatar
29 September, 2014

wahh bgus sangat membantu tolong kunjungi blogsaya dong rawatrambutyu.blogspot.com tolong bantu saya

BalasHapus
avatar
Anonymous
11 October, 2014

wah terima kasih artikel yang bermanfaat.

BalasHapus
avatar
13 December, 2014

http://unikcspedia.blogspot.com/

BalasHapus
avatar
17 December, 2014

Gan apa gunanya sih pasang popular post ada srcollnya gini ?
Apa pengaruh terhadap SEO ?
Kunjungi blog saya ya mas Cara membuat popular post di blog

BalasHapus
avatar
27 February, 2015

trima kasih gan....lowongankerja1.info

BalasHapus
avatar
29 March, 2015

Thanks artikelnya gan, nice share.

BalasHapus
avatar
02 April, 2015

kok ndak bisa muncul min scrollnya? Jasa Website

BalasHapus
avatar
10 June, 2015

Wuih muantap popular postnya, mau coba praktekkan dulu ah

BalasHapus
avatar
12 June, 2015

terimakasih banyak Gan sangat bermanfaat banget Tutorialnya sukses terus ya gan.... Sebenarnya ada cara cara serupa di blog lain, tapi seperti biasa saya selalu menerapkan cara atau tutorial tutorial SEO dari blog yang banyak di komentari orang, karena bagi saya itu menunjukkan bahwa blog tersebut benar benar profesional dan SEOnya terbukti handal. . .

BalasHapus
avatar
16 April, 2016

thanks banget gan tutorialnya.
udah saya coba & hasilnya jadi.
kunjung balik juga y gan ke www.turiswangamers22gtr.blogspot.com

BalasHapus
avatar
18 October, 2016

alhamdulillah. trik nya manjur gan.. follback ya www.hadziq.web.id

BalasHapus
avatar
23 December, 2016

sangat bermanfaat gan...
hanya sedikit koreksi gan, mustinya itu 'Popular' bukan 'Populer'...
Memberikan Scroll pada Popular Post itu sangat membantu proses Loading Blog agar Lebih Cepat dan Ringan...
www.uchiha-uzuma.com

BalasHapus