Home » » Cara Membuat Widget Top Komentator Di Blog

Cara Membuat Widget Top Komentator Di Blog

Written By Afrizal Syaifudin on Saturday, March 16, 2013 | 8:00 AM

.
Cara Membuat Widget Top Komentator Di Blog
Z-T Blog - hay sobat.. :D lagi-lagi saya mau share buat sobat cara membuat widget Top Komentator dengan Scroll, widget ini untuk mengetahui siapa saja orang yang sering berkomentar di blog kita, dan pastinya widget ini bisa kalian manfaatkan untuk mengadakan Award Top Komentator, ya kaann..? hehee :D .langsung saja ya ke caranya.. :)
  1. Masuk ke tata letak
  2. Tambahkan Gadget
  3. pilih HTML/JavaScript
  4. lalu masukan kode di bawah ini..
  5. Lalu simpan.. :)
<div style="overflow:auto; width:100%px; height:250px; padding:0px; border:1px solid #999999;">



<div dir="ltr" style="text-align: left;" trbidi="on">


<br /></div>
<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
margin-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;}
.top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;}
.top-commenter-avatar {vertical-align:middle;width:30px;height:30px;
}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 30; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 0; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Anonymous"]; // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = ''; // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = ''; // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;




var authorUri = "";


if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;




var avaimg = urlAnoAvatar;


var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");




var authorName = author.name.$t;


if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';




if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)


authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';




text = text.replace('[user]', authorcode);


text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}




var topcommenters = {};


var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();




if(urlMyProfile == "") {


var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}




for(var i = 0 ; i < json.feed.entry.length ; i++ ) {


var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);




//Calculate difference btw the two dates, and convert to days


var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;




if(excludeMe && authorUri != "" && authorUri == urlMyProfile)


continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;




var hash=entry.author[0].name.$t + "-" + authorUri;


if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}




// convert object to array of tuples


var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);




tuplear.sort(function(a, b) {


if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});




// list top topcommenters:


var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>



</div>

Keterangan :
  1. kode yang berwarna Orange adalah jumlah top komentator yang ingin di tampilkan, sobat bisa mengubahnya sesuka hati.. :)
nanti hasilnya akan seperti ini gambar di bawah ini,,
Cara Membuat Widget Top Komentator Di Blog
gambar di atas adalah gambar yang saya ambil dari Z-T Blog.. :D ,ok sekian untuk hari ini.. :) semoga widget ini bermanfaat.. hehee :D ,jangan lupa tinggalkan jejak di komentar.. terima kasih.. :)

39 komentar:

  1. lannjjutkan kawan dah ane coba tutorialnya tanks sob'
    http://kangshinokami.blogspot.com/

    ReplyDelete
  2. selamat siang menjelang sore sob..selalu hadir untuk Sobat ZT-Blog ^_^
    sippp artikel nya bagus untuk disimak..
    come back ^_^

    ReplyDelete
  3. wahhh, mantebb gan.. Pengen coba nih...

    ReplyDelete
  4. Wah trik yang sangatt bagus nih...

    ReplyDelete
  5. wih hebat, sudah saya coba dan berhasil

    ReplyDelete
  6. Kapan-kapan ane mau nyoba ini gan...

    ReplyDelete
  7. lumayan nih buat nambah ilmu blogging....

    ReplyDelete
  8. sebelumnya sudah pernah sobat.. hehee.. :D

    ReplyDelete
  9. wah makasih infonya bro, tapi menurut ane ini cuma harus dipasang saat mengadakan lomba top komentator aja

    ReplyDelete
  10. nice gan, tutorial yg bermanfaat....

    ReplyDelete
  11. mantap banget ni mas, izin coba ni mas...

    ReplyDelete
  12. silahkan di coba sobat, thx kunjungannya.. :)

    ReplyDelete
  13. ga berani ngutak-ngatik widget, takut ribet ╮(─▽─)╭ #ndeso

    ReplyDelete
  14. keuntungannya apa gan ???

    bikin blog jadi berat ga ???

    ReplyDelete
  15. @Monica Santoso, ini bukan ngutak-ngatik, ini hanya menambahkan.. :D

    @hamami trafgar law, keuntungannya biasanya widget ini digunakan pada saat ada yang mengadakan kontes blog yaitu 'top komentator'.. :)

    ReplyDelete
  16. cara ngurut dari yg terbanyak sampe yg sedikit gimana gan ?
    sebelumnya thanks banget nih..

    http://nandarious.blogspot.com/

    ReplyDelete
    Replies
    1. widget di atas sudah otomatis mengurutkan dari yang terbanyak sampai yang terdikit..

      Delete
    2. tapi saya ko ga ngurut ya pas pake yg punya agan ini ?
      tapi yaudh makasih ya tutornya :D

      Delete
    3. ah yg bner gan, bisa ksih SS nya..?

      Delete
  17. postingan yang menarik gan, terima kasih banyak atas tutorial nya ijin nyoba...
    btw, saya follow gan #360, follback yah...terima kasih...

    ReplyDelete
    Replies
    1. atas nama siapa.. akan saya follback, tapi kemana ya..?

      Delete
  18. sip gan...semoga dengan tutorial ini, bisa semakin membuat khusus website saya naik. saya mau tanya nih, untuk bisa naikkan rank diangka ratusan gmn cranya, krena wbsite sya kalau secara global masih diangka 8jtaan. :(

    ReplyDelete
    Replies
    1. maksudnya bagaimana gan..? rank yang di mana..?

      Delete
  19. Wah...sangat bermanfaat sob...ditunggu kunjungan baliknya...

    Kira-kira saya masuk top commentator nggak ya ?

    ReplyDelete
    Replies
    1. kunjungan balik kemana sob..? :D
      , saya kurang tau tuh.. :D

      Delete
  20. gan, kalau di pasangnya di jadikan page / halaman bisa ga ya??

    ReplyDelete

Terima kasih telah berkunjung! Silahkan tinggalkan komentar untuk respon/pertanyaan.

=== RULES ===

1. Dilarang Spam.
2. Dilarang live link.
3. Dilarang nama komentator menggunakan Keyword.
4. Dilarang berkomentar yang seolah memuji (Out Of Topic).
5. Isi komentar relevan dan berkualitas yang berkaitan dengan artikel.

Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.