Cara Membuat Widget “Paling Banyak Dikomentari” pada Blogger

Secara default, widget dengan jenis daftar posting yang disediakan di blogger hanyalah widget popular posts dan widget arsip. Pada posting ini, saya akan menambahkan widget lain dengan jenis daftar posting, yaitu widget yang mengurutkan posting dari yang paling banyak di komentari dengan menampilkan jumlah komentarnya.

Widget ini dibuat oleh pemilik blog mybloggertricks.com dengan menggunakan script yang sudah ada dari yahoo. Dengan style yang cukup elegan dan dilengkapi bubbles yang berisi angka jumlah komentar, widget ini sangat bagus untuk ditampilkan pada blog anda.

Widget ini sangat bermanfaat untuk memicu pengunjung agar ikut berdiskusi pada posting yang paling banyak di komentari. Alhasil, posting lama anda akan selalu terupdate karena ada komentator yang baru. Perlu diingat bahwa halaman yang terupdate pada blog anda biasanya disukai mesin pencari, bahkan walaupun posting tersebut dibuat sudah lama.

Posting paling banyak dikomentari

Nah, untuk menambahkan widget daftar posting paling banyak di komentari ini, silahkan ikuti langkah-langkah dibawah :

1.  Login ke Dashboard blogger > Pilih Blog > Layout

2. Klik Add a Gadget

3. Pilih HTML/JavaScript

4. Masukkan kode di bawah ini :

<style>
.commentbubble {
background: #292D30;
width: 49px;
float: left;
margin: 2px 20px 35px 0px;
font-weight: bold;
font-size: 1.3em;
text-align: right;
font-family: georgia,Helvetica;
padding: 0px 0px 5px 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.devaradise.com/id/
&ShowHowMany=6
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json”
type=”text/javascript”></script>

Keterangan Kode :

– Sebelum di tambahkan ke widget baru, sebaiknya pastekan dulu kode di atas ke notepad, agar menghapus semua style font yang terbawa dari blog ini.
– Ganti http://www.devaradise.com/id/ dengan URL blog anda

– Pada bagian ShowHowMany=6ganti angka 6 sesuai dengan jumlah posting yang ingin anda tampilkan.

– Kode yang saya highlight dengan warna kuning, itu adalah kode warna untuk bubble yang berisi jumlah komentar tiap posting. Silahkan ganti sesuai dengan selera anda. Gunakan Tools Color picker untuk mendapatkan kode warna yang tepat.

– Ganti kode #dedede  Jika anda ingin mengganti warna garis titik-titik dibawah setiap judul posting.

5. Klik save, dan widget sudah ditambahkan.

Bila ada pertanyaan, silahkan tanyakan di komentar.
Sekian, Semoga bermanfaat 🙂

~Muhammad Syakirurohman~

14 Comments

  1. Perlu dicoba ini

  2. Masih work nggak gan? barusan nyoba script dari blog sebelah nggak work

  3. nggak work lagi bang scriptnya

  4. Salam Perkenalan Dari Malaysia

    Terima kasih atas perkongsiannya.

    Ianya berhasil saya rasa kerana apabila dimasukkan kod tersebut, url blog secara automatik bertukar dari natrahnorlin.blogspot.com ke natrahnorlin.blogspot.my

  5. Wah boleh juga nih di praktikan mas… Terimakasih banyak sudah saharing ilmunya. Salam

  6. kalau blog saya masih sepi komentar pas, jadi widget seperti ini belum minat untuk memakai nya. tapi boleh nanti kalau sudah ramai komentar nya di coba! 😀

  7. mantab lah gan…

  8. ga bisa mas, ga muncul

  9. nggak muncul gan

  10. sudah saya praktekkan… tp kok gak bisa tampil ya gan… btw, klo bikin koment kayak pnya agan yg begini ini gmana gan???

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *