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 552 Articles
saya hanya manusia biasa yang berusaha berguna bagi sesama dan terbuka untuk menjalin persahabatan dengan siapa saja.

249 Komentar

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

    Balas

  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

  5. 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..?

    Balas

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

    Balas

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

    Balas

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

    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

  16. 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.. 🙂

    Balas

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

      Balas

  23. 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

    Balas

  24. 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,,,,,,,

    Balas

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

    Balas

  26. 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 🙂

    Balas

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

    Balas

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

    Balas

  33. 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

    Balas

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

      Balas

    • 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

      Balas

    • 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

      Balas

    • 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

      Balas

  35. 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

    Balas

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

      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

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

    Balas

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

    Balas

  46. 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 😀

    Balas

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

    Balas

  52. 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

    Balas

  53. 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

    Balas

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

    Balas

  59. 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

    Balas

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*


Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.