Cara Membuat Widget Artikel Terbanyak Dikomentari di Blogger

Sebagian besar Blogger pasti memiliki widget Artikel Terpopuler. Tujuannya, agar pengunjung dapat melihat artikel yang sedang populer di suatu blog, dengan demikian angka Pageview meningkat dan Bounce Rate bisa menurun. Meskipun widget Artikel Terpopuler sudah cukup bagus, menurut saya itu kurang GREGET.

Sebuah widget yang terlupakan dan memang jarang sekali dipakai yaitu Most Commented Posts Widget atau Widget Artikel Terbanyak Dikomentari. Secara desain, widget ini sederhana namun mampu menarik pengunjung jika pencampuran kode CSS sesuai dengan nuansa blog. Saya mempunyai 2 buah widget sejenis namun dengan tampilan yang berbeda.

Cara Membuat Widget Artikel Terbanyak Dikomentari di Blogger

1. Log in ke Blogger.com => Tata letak / Layout => Tambah gadget / Add gadget => HTML/Javascript

2. Masukan kode di bawah ini

<style>

/* ######### Widget Posts Terbanyak Dikomentari by CRONOSAL ##########*/

.commentbubble {

background: #292D30;

width: 39px;

float: left;

margin: 2px 10px 35px 0px;

font-weight: bold;

font-size: 1.5em;

text-align: center;

font-family: trebuchet,Helvetica;

padding: 0px 0px 10px 0px;

text-align: right;

color: #FFF;

text-shadow: 4px 1px #202022;

position: relative;

top: 5px;

}

.commentbubble:after {

content: ' ';

position: absolute;

width: 0;

height: 0;

right: 0px;

top: 100%;

border-width: 5px 8px;

border-style: solid;

border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);

top: 34px;

right: 6px;

}

</style>

<script type="text/javascript">

function getYpipePP(feed) {

document.write('<ul style="list-style:none; ">');

var i;

for (i = 0; i < feed.count ; i++)

{

var href = "'" + feed.value.items[i].link + "'";

var pTitle = feed.value.items[i].title;

var pComment = + feed.value.items[i].commentcount;

var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important; border-bottom: 1px dashed #dedede; line-height:2em; "> <div class="commentbubble">' +pComment + "  </div>" + "<a href="+ href + '" target="_blank">' + pTitle ;

document.write(pList);

//to remove comment count delete this line

document.write('</a></li>');

}

document.write('</ul>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?

YourBlogUrl=http://www.artikelnaufal.blogspot.com

&ShowHowMany=5

&_id=390e906036f48772b2ed4b5d837af4cd

&_callback=getYpipePP

&_render=json"

type="text/javascript"></script>

Keterangan

Ganti tulisan berlatar biru dengan alamat blog sobat
Pada tulisan berlatar merah ganti sesuai keinginan
Pengaturan CSS dapat diubah

3. Klik Simpan / Save kemudian Lihat blog / View Blog

Kode diatas sudah cukup ringan, namun jika ingin yang lebih ringan dan sederhana bisa juga menggunakan kode sederhana dibawah ini. Metode penggunaannya sama dengan kode diatas.

<script language='javascript'>

aBold = true;

numposts=9999;

maxshowresult=5;

home_page = "http://artikelnaufal.blogspot.com/";

</script><script type="text/javascript" src="https://googledrive.com/host/0B47y9IEQFP-heEhKSHVtMGRXSVE"></script>

Keterangan

Tulisan berlatar ungu adalah mode bold, jika ingin menonaktifkan cukup ubah menjadi false
Tulisan berlatar hijau adalah jumlah maksimal posting yang terdeteksi
Tulisan berlatar oranye adalah jumlah yang ditampilkan
Tulisan berlatar biru adalah homepage blog sobat

Atau pada widget sidebar blog ini (Banyak Dikomentari)

Jika ada pertanyaan, silahkan ajukan lewat kolom komentar.