Cara Membuat Widget Top Komentator Keren

By | 19/12/2014 at 20:54 pm
249 Comments

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,

249 thoughts on “Cara Membuat Widget Top Komentator Keren”

    1. Saud Karrysta

      MasYanto jangan marah yaPertamax saya yang kemarin di ambil sekarang saya ambil lagi ya..?

      Reply ↓
    4. Indra Kusuma Sejati

      Kalau cara enimak dengan hasil buatan widget top komentar keren ini jadi rebutan pertama, saya ikut nagtri saja deh di sini…..

      Reply ↓
    8. khoirun naim mian

      harga kopi , panas 2500 dingin 3000 , mendingan minum cepet2 keburu dingin nanti harganya bisa nambah hehehe

      Reply ↓
    16. Cilembu thea

      hah.<br />di dasboard say ini artikel cara pasang widget top komentar baru 2 jam yang lalu, komentarnya udah 108, sungguh luar biasa nih blog teh euy…sangat makjleb kang.<br />pasang top komentar kali mah nih saya juga ya?

      Reply ↓
  2. Wicky Barcelonista

    thanks infonya sob,, sangat bermanfaat sekali bagi saya.. :)<br /><br />kalau ada waktu,,kunjung balik blog baru saya ya sob &gt;&gt; tutorialblogwiky.blogspot.com (^_^)<br /><br />terima kasihh..<br />

    Reply ↓
    1. Saud Karrysta

      Oke Mas Wicky sama sama makasih atas kunjunganya.. Maaf hanya bantuin bales sajaMas Sutar nya lagi buat Kopi buat saya apa buat sendiri ya..? Salam Kenal Mas Wicky 🙂

      Reply ↓
    3. Indra Kusuma Sejati

      Nungu kopi sambil nyimak caranya Kang Yanto mengajarkan untuk membuat widget top komentatornya si sini juga ada ya….. ?

      Reply ↓
  3. Saud Karrysta

    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

    Reply ↓
    2. Indra Kusuma Sejati

      Nah, ini yang jadi masalahnya saya tidak ada di dalam widget top komentar keren 10 ini. Tap saya tinggalin juga deh komentarnya untuk di sini.

      Reply ↓
    9. yanto cungkup

      siapa?o saya <br />iya nih kenapa fhotoku nggak ada ditop komentator blog ini ya?<br />padahal saya paling aktif disini loh

      Reply ↓
  4. Saud Karrysta

    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

    Reply ↓
  5. Saud Karrysta

    Permisi dulu saya Belum cek blog saya dan harus blogwalking kesemua Sahabat Blogging saya dengan rute 30010 sahabat yang harus di datangi mau bantuin gak..?

    Reply ↓
  6. KOPERASII LESTARI

    Mantapss.. Hampir sama dengan Widget Most Commented ya kang? Cuma bedanya lebih detil..

    Reply ↓
    3. Indra Kusuma Sejati

      Walau pun sama-sama pemberi komentar, yang penting bisa masuk dalam widget top komentar seperti di atas ya Kang ? he,, he, he,,

      Reply ↓
    4. yanto cungkup

      begitulah kira2 kang mas<br />jadi dapat mengetahui secara nyata seberapa banyak teman yg berkomentar diblog

      Reply ↓
  7. Sucipto Kuncoro

    Luar Biasa! sangat informatif sekali bisa mendorong komentator agar lebih sering berkomentar 🙂

    Reply ↓
    1. yanto cungkup

      menurutku hanya sedikit pengaruh dari memasang widget ini bila tujuannya mendorong komentator agar lebih sering berkomentar.<br /><br />saya baru beberapa hari pasang koq,tp lihat semua artikel saya pasti banyak komentarnya mas.saya memasang widget ini bertujuan untuk menghargai orang yg berkomentar diblog saya

      Reply ↓
  8. Renggo Starr

    Lumayan, buat apresiasi komentator terbanyak. Hehe.<br /><br />Salam kenal bang, newbie nih saya.

    Reply ↓
    2. Indra Kusuma Sejati

      Semoga bisa menyambung silaturahmi dengan masuknya akang di dalam 10 top komentar yang tersedia ya……

      Reply ↓
  9. Marnes Kliker

    Akhirny request saya dishare juga nie, terimakasih banyak Mas Yanto, sekarang tinggal saya coba praktekan, mudah-mudahan bisa ngikutin sesuai petunjuk di atas 🙂

    Reply ↓
    2. Marnes Kliker

      iya mas nie baru ta&#39; coba praktekin, mudah-mudahan berhasil, kalo gagal tolong dibantu ya, gak pake acara sim salabim sama prokk…porkk..prokk…lho 😀

      Reply ↓
    3. yanto cungkup

      iya mas,berhasil tuh sekarang waktunya prok prok prok sambil nyruptu kopi.<br />tadi sudah kulihat ternyata saya juga masuk top komennya cuman kalah sama orang subang tuh.<br />siapa tadi namanya saya lupa lagi

      Reply ↓
  10. Indra Kusuma Sejati

    Kalau dilihat dari tutorialnya sangat membantu saya kan untuk membuat widget top komentar keren ini. Terimakasih atas informasinya kang.<br />

    Reply ↓
  11. Wong Crewchild

    bersaing sama mas marnes neh :)<br /><br />biar top dan keren harus pasang widget ini

    Reply ↓
    2. Saud Karrysta

      Nih saya sudah Bersemangat dan sudah makan 2 kali. Hayu Mas Wongf Kejarlah Daku kau ku jitak tt3tt3tt3

      Reply ↓
    3. Saud Karrysta

      Saya yang Nyiptain TOP Komentator itu.. gak percaya yah..? Mas Yanto aja yang gak bilang2 ngambil nya// tttt

      Reply ↓
  13. Wahyu Putra Perdana

    Saya masih belum masuk top komen nih. Harus lebih giat lagi ngirim komen Hehehehe

    Reply ↓
  14. Ainnul Yaqin

    wiihhh asikk saya termasuk ke top 15 komentator terkeren ternyata 😀 dan ngomong ngomong saya juga kpincut nih kang kpengen masang 😀

    Reply ↓
    1. yanto cungkup

      ayo pasang saja mas<br />tp nggak usah dipasang disini ya,soalnya saya udah memasangnya.hahaha

      Reply ↓
  15. Mbah dinan

    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.

    Reply ↓
    2. Saud Karrysta

      Silahkan Mbah ambil saja script dan sekalianBlog Mas Yantonya sama Admin di bawa biar keren deh tt3tt3

      Reply ↓
  16. ana sriwahyuni

    bisa dijadiin ide nich mas Yanto,, saya curi ya ide artikel top komentator artikel blog ini, entar saya kembalikan idenya berupa link saja, saya salin dulu kodenya mas.. 🙂

    Reply ↓
    2. Saud Karrysta

      Ajak saja Mas Yantonya Mbak Ana tar kalau sudah sampe Rumah.. siksa aja Mas Yanto nya hhahahaah

      Reply ↓
    1. yanto cungkup

      kalau widget ini ngikut setelan templatenya kang.kalau template kang ibrahim dah responsive berarti yaresponsive

      Reply ↓
  22. santika fadilah

    Hadir mas, dengan komentar tertinggal, minimal aku ngisi absensi artikel yang ini hehe..

    Reply ↓
  23. Arie Gondes

    wah, mantap Mas widget top komentatornya, evek hover nya keren, pas sama bg foternya Mas *sip<br /><br />Ma&#39;af baru bisa berkunjung Mas

    Reply ↓
  24. Dede Thea

    SALAM SENJA MAS YANTO,,,,apa kabar sory nih baru sempat berkunjung lagi,mohon maklumnya saja mas,,,hehehe BTW tutornya bener-bener keren nih,,,,,boleh dicoba nanti kalau sudah ada waktu luang,,,,,,,

    Reply ↓
    1. Aldino Sya

      salam malam..Mas DEDE.. mas yanto lagi buat kopi…, jd sy untuk sementara.. yg temani tamu..

      Reply ↓
  25. Buret

    terlambat datang ke t4 mas Yan, antrian paling belakang.<br />ternyata saya udah mausk jajaran komentator di blog mas Yan, haha

    Reply ↓
  26. Inam Achsan

    wah kapan2 bisa dicoba nih tampilanya juga simpel dan elegan, biar lebih akrab sama temen2 yang sering di blog. soalnya blogq masih polosan, hehe thanks mas sharenya.<br /><br />mampir ya dipostq yg baru 🙂

    Reply ↓
  27. Marnes Kliker

    Barusan udah saya coba praktekin mas, Alhamdulillah lancar jaya dan berhasil, makasi ya 🙂

    Reply ↓
    1. Aldino Sya

      sama2 Mas Marnes.. poto mas marnes di gambar postingan mas yanto.. gantengnya makin keluar.. ituh rahasianya apa sih.. bagi ke kita lah..mas..!

      Reply ↓
    4. Marnes Kliker

      lha itu mah foto saya masih bujangan mas, kalo sekarang mah dah abis kegantengannya sama bini saya wkwkwkwk….

      Reply ↓
  29. Aldino Sya

    sy bingung juga dgn widget komentator inih Mas Yan..!<br />pandai berhitung sendiri.. ya.. padahal tdk pake kolkulator..!

    Reply ↓
  30. PURNAMA

    wah bs di coba nih triknya…mungkin dengan adanya widget komentator bisa menambah minat pengunjung blog, terimakasih gan infonya

    Reply ↓
  33. Saud Karrysta

    MalamMas Yanto. kembali simak tutorial Membuat TOP Komentatornya ya Mas di blog saya tak Pasang. soalnya sudah terlalu banyak script laion takutnya pada komplain yang berkunjungnya

    Reply ↓
    1. yanto cungkup

      nggak dipasang juga nggak papa mas,itu kan hak kita masing2 sebagai admin blog.<br />pokoknya kalau saya kesana ada kopinya

      Reply ↓
    3. Saud Karrysta

      Mas Yanto akhir2 ini sering membuat saya Merinding dengan kata 2 nya yang bijak. makasih ya Mas? Ya udah seh demi Kang Dede dan semua Sahabat saya pasang nih tutorialnya Mas Yanto. *salam santun buat semua Sahabat blogging :-bd<br /><br />Pesan : Tinggal Mas Yanto Pasang Smiley PR deh tt3tt3tt3

      Reply ↓
  34. Dian Anarchyta

    Ini bagus sebenarnya di pasang di blog, tapi blog ku banyak komentar menggunakan name/url

    Reply ↓
    1. Saud Karrysta

      Betul ya Mbak Dian.. jadi tau siapa saja yang sering mampir ke blog kita jadinya.. Gak apa apa mungkin Mbak kan meraka sudah berkunjung dan meluangkan waktu. ehh maaf bukan menggurui *salam

      Reply ↓
    3. Dede Thea

      saya sudah pasang lho yang paling top kunjunganya adalah MAS YANTO dan KANG KARRSYT coba deh dilihat hahahaha

      Reply ↓
    5. yanto cungkup

      iyanih saya selalu dapet nomer 2 top komentarnya dibawah mas saud nih kang dede<br />bukan hanya diblog sampean tp diblog mas marnes juga gitu deh

      Reply ↓
  35. Saud Karrysta

    Koq setelah saya cek nominal komentar saya kemarin sudah 165 KOQ SEKARANG JADI NGURANGI. JANGANJ ANGAN Mas Adminya Iseng ngapusin deh tt3tt3. protes gak ya..? hh3hhh3

    Reply ↓
    2. Saud Karrysta

      Kan saya FANS berat nomer satunya blog Wongcungkup iya kan. masa sampean lupa sih..?? wahhh perlu di ingatkan nih tt3tt3tt3 😀

      Reply ↓
    3. Saud Karrysta

      Ohhh ya Mas coba lihat aja di gambar postingan sama di di widgetnya sama gak coba..? beda kan.. iya kan.. keren kan saya? hhhhh

      Reply ↓
    4. yanto cungkup

      kayaknya update tiap menit dihitung jumlah komentar dalam seminggu terakhir deh mas.<br />saya juga nggak ngerti sih

      Reply ↓
  36. Adie

    Ini nih mas widget yg akhr2 ini sya cari, trnyata ada di blognya sam otnay..mksh sam..tk pasang dulu.

    Reply ↓
    1. yanto cungkup

      silahkan mas<br />maaf saya berkunjung balik keblog sampean nggak ninggalin jejak,soale nggak ada form komentarnya sih

      Reply ↓
  37. Aldino Sya

    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 />

    Reply ↓
  39. Anisayu Nastutik

    Aduh.. Maafin diri ini <br />Karena ga ngetop disini <br />Sebab jumlah komenku pasti <br />Hanya beberapa kali <br /><br />

    Reply ↓
    1. Saud Karrysta

      Sama Mbak Anisayu blogku juga masih Layu. jika pasang top komen sapa yang mau jadi Top komen nnya coba..?

      Reply ↓
  41. Hary Wardiansyah

    kang Yanto scriptnya boleh saya simpan ya kang 😀 . . ijin praktek kang muheheheee

    Reply ↓
    2. Saud Karrysta

      Langsung ambil saja Kang Hary. mumpunhg Mas Yantonya lagi ngilang.. Mas Marnes gak ada TuannRumahnya pulang aja deh. Lapur gak ada air gak ada kopi tt3tt3tt3

      Reply ↓
  42. Dede Thea

    Mendingan pasang Top comentator daripada pasang link,,,,,malah ini memudahkan kita untuk berkunjung balik pada rekan yang mengunjungi blog kita,,,,,,tulkan master Yanto hahahaha

    Reply ↓
    1. Saud Karrysta

      Betul sekali ya Kang Dede dari pada tukar Link mending. pasang top Komentator/ saya setuju. Mas Yantonya lagi sibuk banget kaya nya Kang

      Reply ↓
    1. Marnes Kliker

      Kayaknya sih emang lagi sibukan beneran ini mah mas…coba ditengokin mas, ada apa gerangan?

      Reply ↓
  46. Wahyu Eka Prasetiyarini

    wah bagus juga nih widget nya, ada tumbnail foto komentator nya ya, wah jadi pengen juga pasng di blog saya mas, tp blog saya kan wp hehehe 😀

    Reply ↓
  50. Muhammad Adam Hussein

    Hasilnya jadi keren apalagi mas sendiri udah memasangnya, terimakasih banyak ya?

    Reply ↓
  51. Dandy Rizky

    .Sering liat beginian sih mas, tapi baru ini nemu cara untuk membuat widgetnya. <br />.Ctrl+D dulu deh mas. hehe. 🙂

    Reply ↓
  52. Daniel Nagata

    Setelah saya terapkan, kok hasilnya tak seperti yang mas yanto miliki di blog ya….cenderung lebih besar dan memakan tempat jadinya. Mohon pencerahannya mas yanto

    Reply ↓
  53. Daniel Nagata

    Oke Kang Yanto, setelah saya perhatiakn rupanya ada kekeliruan saya dalam memasang css di template. sekarang sudh oke, silahkan di lihat2 dan terima kasih atas bantuannya

    Reply ↓
  54. Daniel Nagata

    Mohon ijin buat pasang di blog yang atunya lagi kang yanto…..saya tertarik untuk menirukan gaya blog ANda ini, mantap

    Reply ↓
    1. Yanto Cungkup Post author

      coba ulangi lagi mas,mungkin ada salah satu kode yg terlewat nggak terpasang.soalnya sudah banyak temen yg pakai ini tp nggak ada masalah tuh

      Reply ↓
      1. Mangs Aduls

        sepertinya ada yang hilang. di situ disebut ada yang warna ungu.
        warna ungu :bye: yang mana?

        Reply ↓
  59. rudhy theart

    Mau bilang thanks to bang marnes kliker yang udah request karena saya juga mau pasang ini, buat mas yanto special thanks tapi gak pakai segelas kopi

    Reply ↓
  60. Eka Ikhsanudin

    nah ketemu juga Top Komentator untuk Blogspot, copy dulu ah, terus mau disimpen :yahoo: kalo gak lupa nanti mau dipasang di Blog hahahhayyy :yahoo:
    makasih Kang

    Reply ↓

Tinggalkan Balasan

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.