Cara Membuat Widget Popular Post With Scroll

Daftar Isi

Popular Post

Widget Popular Post With Scroll merupakan salah satu dari sekian banyak widget yang disediakan oleh blogger.com. Adapun maksud dari pemasangan widget Widget Popular Post antara lain untuk memberikan informasi baik untuk admin blog maupun pengunjung blog tentang postingan blog mana yang terpopuler atau paling sering diakses.

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. Maka inilah salah satu fungsi scroll pada widget popular post ini, selain juga untuk pertimbangan kerapian widget-widget blog yang sudah terpasang. Jika anda tertarik ingin menggunakan fungsi scroll pada widget popular post, silakan ikuti langkah-langkah berikut ini :

Pertama :

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 kemudian silakan cari kode seperti di bawah ini.

<div class='widget-content popular-posts'>

Kemudian tambahkan kode berikut tepat dibawahnya :

<div style='overflow:auto; width:ancho; height:700px;'>

Untuk lebih jelasnya, 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:700px;'>

<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 anda tambahkan untuk memberikan fungsi scroll pada widget popular post di blogmu. Dan untuk mengatur tingginya, silakan rubah height:700px sesuai dengan keinginan Anda dan atur sesuai area pada blog Anda.

Semoga bermanfaat

Sumber : agungtalaga.blogspot.com