Membuat Widget Popular Post Menggunakan Scroll

0
Popular Post
Widget ini merupakan salah satu dari sekian banyak widget yang disediakan oleh blogger.com. Widget ini saya sarankan bagi para blogger pemula untuk memasangnya dan untuk para blogger senior, mohon saran dan kritiknya jika dalam penjelasanku ada yang yang keliru. Adapun maksud dari pemasangan widget ini adalah untuk memberikan informasi baik untuk admin blog maupun pengunjung blog tentang sejauh mana postingan blog kita diakses. Widget ini juga akan memberikan info kepada admin blog maupun pengunjung blog tentang artikel yang paling banyak dibaca. Namanya juga widget popular post. Hehee.....

Dalam pemasangan widget ini, secara default atau masih dari pengaturan bawaan dari blogger.com, semakin banyak jumlah postingan popular yang akan ditampilkan maka akan semakin besar pula widget ini membutuhkan area pada halaman blog. Nah, untuk itu, lewat postingan ini saya mau berbagi informasi tentang memasang fungsi scroll pada widget popular post ini. Hitung-hitung sebagai pertimbangan kerapian widget-widget blogmu yang sudah terpasang. Kalau sobat-sobat blog mau menggunakan fungsi scroll pada widget popular post blogmu, silakan ikuti langkah-langkah berikut ini :

Pertama :
Hal pertama yang harus kita lakukan adalah silakan login ke akun blog Anda. Pada halaman dasbor Anda, silakan pilih Templates dan pilih Edit HTML dan pilih Procced.

Kedua :
Sebelum mengedit kode HTML blog Anda, silakan cecklist pada pilihan Expand Widget Templates mencari kode seperti di bawah ini..
<div class='widget-content popular-posts'>

Lebih lengkapnya silahkan perhatikan kode di bawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<div style='overflow:auto; width:ancho; height:770px;'>
<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>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Perhatikan kode yang berwarna merah. Kode itulah yang kalian tambahkan untuk memberikan fungsi scroll pada widget popular post di blogmu. Dan untuk mengatur tingginya, silakan rubah height:770px sesuai dengan keinginan Anda dan atur sesuai area pada blog Anda.

Demikian artikel tentang Popular Post With Scroll dan semoga bermanfaat..
Author Image

About Ahmad Habibullah
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design