Cara Membuat Widget Top Komentator Keren

Yanto Cungkup blogspot, edit html 249

Cara Membuat Widget Top Komentator Keren. Widget top komentator adalah widget yang berfungsi menghitung jumlah komentar terbanyak dari teman yang mengunjungi blog sobat. dengan menggunakan widget ini kita jadi mengetahui siapa saja teman yang aktif blogwalking dan meninggalkan jejak dikomentar.

Sebenarnya widget ini sudah cukup lama ada tapi tetap saya share karena permintaan dari salah satu sahabat yang tertarik dengan dengan model top komentator diblog ini, berikut kurang lebih permintaan beliau:

Mas Yanto maaf Oneng nie eh OOT maksudnya, saya baru engeh kalo di blog Mas Yan ini pake widget top komentator. Itu cara bikin widget seperti itu gimana mas? di share atuh, saya pengen pasang widget seperti itu lho mas, udah nanya – naya sama si Mbah Gugel tapi nemunya bukan yang seperti di blog ini… kalo gak keberatan dan kalo dah sempet nanti di share ya (by mas marnes kliker).

Selain fungsi diatas, fungsi widget ini juga dapat diartikan sebagai bentuk penghargaan kepada komentator dan selain itu juga untuk mempercantik tampilan blog. demonya silahkan lihat gambar dibawah ini:Cara Membuat Widget Top Komentator KerenPada dasarnya sama dengan widget komentator pada umumnya, tapi disini saya edit sedikit biar lebih menarik. ok bagi sobat yang ingin memasangnya dapat mengikuti tutorial Cara Membuat Widget Top Komentator Keren dibawah ini:

1.login ke dasboard blogger==>> template==>> edit template
2.silahkan cari kode </style> atau ]]></b:skin> tergantung template yang anda (gunakan(gunakan ctrl+f untuk mempermudah)
3.jika sudah ketemu kode </style> atau ]]></b:skin>, silahkan masukkan kode css dibawah ini tepat diatas </style> atau ]]></b:skin>.

#topcomment {list-style-type: none;margin: 0;padding: 0;background: none;font: normal 12px Georgia,serif; color:#003300; width: auto;box-shadow: 0px 0px 5px rgb(153, 153, 153);border: 1px solid #999;}
#topcomment li {background: none;border-bottom: 1px solid #cc0000;margin: 0 0 1px 0;overflow: hidden;padding: 5px;}
#topcomment a:hover {text-decoration:none; color: #009907; }
#topcomment li:hover { display:block; background: #760f05;text-decoration:none; color: #ffff00; }
#topcomment .img {float: left;margin: 0 10px 0 0;width: 60px;height: 60px;overflow: hidden;}
#topcomment .img img {vertical-align: middle;height: 90%;width: 90%;border-radius: 80px;box-shadow: 0 1px 3px e1d9d9;border: solid #ed0914 2px;}
keterangan:
  • warna merah adalah warna tulisan, silahkan diganti sesuai keinginan
  • warna ungu adalah warna tulisan ketika kursor didekatkan, silahkan diganti sesuai keinginan
  • warna biru adalah warna background ketika kursor didekatkan, silahkan diganti sesuai keinginan

4. Selanjutnya simpan template anda. sampai disini kode CSS berhasil ditambahkan. saatnya kita memanggil kode tersebut dengan cara:

1.pergi kehalaman tata letak==>> klik tambahkan gadget
2.pilih html / javascript
3.lalu masukkan kode berikut:
<script type=”text/javascript”>
function topkomentar(feed) {
document.write(‘<ul id=”topcomment”>’);
var i;
for (i = 0; i < feed.count; i++) {
var d     = feed.value.items[i];
var item;
var href  = d.link,
itez  = d.author[‘gd:image’].src.replace(//s(512|220)/g,”/s60″),
total = d.title.replace(/([^0-9])/g, “”),
nama  = d.author.name;
if(feed.value.items[i].link == “”) {
item =”<li>” + feed.value.items[i].title + “</li>”;
} else {
item  = “<li>” + “<span class=’img’><img src='” + itez + “‘/></span>” + “<div class=’nama’>”+nama+”</div>” + “Alamat Blog : <a href=” + href + ” target=’_blank’ rel=’nofollow’>Kunjungi</a>” + “<div class=’total’>Total Komentar : ” + total +”</div>” + “</li>”;
document.write(item);
}
}
document.write(‘</ul>’);
}
</script>
<script type=”text/javascript” src=”http://pipes.yahoo.com/pipes/pipe.run?YourBlogUrl=www.wongcungkup.com&amp;ExcludedNick1=yanto cungkup&amp;ShowHowMany=15&amp;_callback=topkomentar&amp;_id=23022d7836bf2dd3c10a329feb9be26a&amp;_render=json”></script>
<span style=”font-size: 80%; float:right;;margin-top:10px;”><a href=”http://www.wongcungkup.com/2014/12/cara-membuat-widget-top-komentator-keren.html” target=”_blank”>Get widget</a></span>
keterangan:
  • gantikan huruf warna merah dengan url blog anda
  • gantikan huruf warna biru dengan nama id g+ anda
  • gantikan huruf warna ungu dengan jumlah komentator

4.selesai

Demikian artikel wongcungkup tentang Cara Membuat Widget Top Komentator Keren, semoga artikel ini bermanfaat.

salam,


About Yanto Cungkup 479 Articles
saya hanya manusia biasa yang berusaha berguna bagi sesama dan terbuka untuk menjalin persahabatan dengan siapa saja.

249 Komentar

  3. Widget komentator sangat penting bsekaliuntuk mengetahui siap yang paling sering datang dan bisa jadi 10 Top Komentator.. tuh kan Profil saya Nampang disini Mas Yanto.. jangan di nakalin nitip wajah keren dikit sayayah..? ttettettett

    Balas

  4. Mas Yanto tak di sangka ternyata Pakar Coding juga .. yah..? dan artikel Widget Top Komentator ini salah satu bukti nya.. kemasan pembahasanya juga mudah di pahami. VALID HTML 5 CSS 3 Pula keren Deh Mas Sutar ini.. Alias (Mas Tasam 01) tt3tt3tt3tt3

    Balas

  15. muantab kang….selain beda tempilannya cukup menarik juga. mana simpel lagi cara pembuatannya. saya mohon izin comot kodenya dulu ya mas. buat saya pelajari, sapa tau ada ide lain bikin yang lain lagi heee. terima kasih sebelumnya.

    Balas

  37. Mau tanya inih Mas YAnto..!<br /><br />top komentator yg paling top/terkeren ituh kayak kennal..<br />tp ,, pernah liatnya di mana ya..?, aahh.. knapa sampe pikun kayak gini..!<br /><br />atao jgn jangan.. inih si ultramen Leo yang pernah jailin si nabilah..<br />sayang si boim nda ke sini..!<br />

    Balas

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*