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

  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

  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

  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

  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

  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

  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

  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

  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

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*


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