Membuat Widget Postingan Paling Banyak Dikomentari

Membuat Widget Postingan Paling Banyak Dikomentari – Sekian lamanya update artikel di blog ini, sampai-sampai saya hampir lupa password login ke akun google saya sendiri. Walaupun sibuk dengan urusan di dunia nyata, kali ini saya ingin melowongkan waktu sejenak di dunia maya, yang postingan kali ini berhubungan dengan widget blogspot. Spesifiknya tentang Membuat Widget Postingan Paling Banyak Dikomentari, atau dalam bahasa inggris Widget of Most Comments, kurang lebih seperti itu bunyi judul besarnya.

Widget ini bisa dibilang cukup bermanfaat demi kelangsungan blog. Agar blog tentunya lebih seo friendly. Ditambah lagi tidak banyak menggunakan javascript, yang katanya orang-orang javascript itu membawa malapetaka pada loading blog. Contoh dari widgetnya dapat dilihat langsung pada sidebar blog. Berminat untuk membuat widget ini? Ikuti tutorial berikut:

Langkah 1 : Simpan kode css di bawah ini

/* Most Commented Widget */
.commentbubble {background: #016e78;width: 40px;float: right;margin-top:7px;margin-left:10px;font-weight: bold;font-family: georgia,Helvetica;font-size:1.3em;padding:2px 5px 5px;color: #FFF;position: relative;border-radius:2px;text-align:center }
.commentbubble:after {content: ' ';position: absolute;width: 0;height: 0;right: 0;top: 100%;border-width: 5px 8px;border-style: solid;border-color: #016e78 #016e78 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);top: 29px;right: 6px;}
#sidebar ul {background:#33adb8;  margin: 0 !important;  padding:0 !important;border-radius:2px  }
#sidebar ul li {list-style: none;border-bottom: 1px dashed #dedede;padding:13px 20px 11px !important; line-height:1.7em;min-height:45px }
#sidebar a:link, #sidebar a:visited, #sidebar a:active {font-size:15px; color:#fff;font-weight:bold;}

Langkah 2 : Kopi paste kode ini pada widget HTML/Javascript lalu simpan.

<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"> <div class="commentbubble">' +pComment +  "&#160;&#160;</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.bungfrangki.com
&ShowHowMany=7
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

Pada langkah 1 sesuaikan kode cssnya dengan kode css sidebar blog anda.
Pada langkah 2 ganti nama blog www.bungfrangki.com dengan nama blog anda dan angka 7 ganti dengan jumlah yang ingin ditampilkan.

Sekian tutorial ini, semoga bermanfaat.

Source : http://www.mybloggertricks.com/2014/05/most-commented-posts-widget-for-blogger.html