Membuat Widget TOP Comentator

Sobat blogger ketemu lagi nich, hehheh, bagaimana apa masih aktip ngeblognya....????
Baiklah sobat blogger kali ini ane akan coba share salah satu Widget yang menurut ane ya keren trik ini ane kasih nama Membuat Widget TOP Comentator, dengan widget ini sobat akan dapat menampilkan komentator-komentaror di blog sobat untuk vreviewnya kurang lebih seperti ini :


Atau jika sobat ingin melihat Demonya sobat bisa klik widget disamping "TOP 10 KOMENTATOR"

Baiklah sobat Blogger untuk tutornya :

1. Seperti biasa Login ke Akun Blogger sobat
2. Klik Tata Letak >>> Add widget
3. Klik HTML/Javascript Copy Paste Kode ddibawah ini :
 <style type="text/css">
    .top-commenter-line {margin: 3px 0;}
    .top-commenter-line .profile-name-link {padding-left:0;}
    .top-commenter-avatar {vertical-align:middle;}
    </style>
    <script type="text/javascript">
    //
    // See http://joens-tutorial.blogspot.com/2013/03/membuat-widget-top-comentator.html
    //
    // CONFIG:
    var maxTopCommenters = 10;   // 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 = ["M. Alex Joenaedi ", "someotherusertoexclude"];     // 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 = 16;
    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;
          }
      }
   
      if(json && json.feed && json.feed.entry && json.feed.entry.length) 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 && json.feed && json.feed.entry && json.feed.entry.length && 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> 
4. Klik Save

Keterangan :
Ganti Tulisan yang di blok angka 10 menandakan jumlah komentator yang akan ditampilkan
M. Alex Joenaedi adalah nama akun admin dari blog/nama akun komentator yang tidak ingin sobat tampilkan, di top komentator .
Untuk keterangan yang lainnya, saya kira sudah standar.

Sumber : http://pastebin.com/mFXpKTah


22 Responses to "Membuat Widget TOP Comentator"

  1. visit my site in gmail : http://sukatribal.blogspot.com

    ReplyDelete
  2. Bagus mas ... widget ini akan memberi semacam penghargaan bagi sahabat lain yang memberikan komentarnya ...

    ReplyDelete
    Replies
    1. Insya allah mas, terimakasih atas kunjungannya mas.

      Delete
  3. ijin untuk mencoba ach,,,manawi di idinan kitu oge hehehe,,,,,,,,wilujeng malming kang bro,,,

    ReplyDelete
    Replies
    1. Mangga kang, ehhehhe.
      punten nembe kawaler, haturnuhun ku kasumpingana.

      Delete
  4. datang lagi dimari kang kpn" ta ijin coba yah,,,makasih tutornya semoga sukses selalu

    ReplyDelete
    Replies
    1. Terimakasih atas kunjungannya mas Cahyo, amin mas

      Delete
  5. ye nama sy paling atas :D

    ReplyDelete
    Replies
    1. Iya mas Reki terimakasih atas support yang telah mas reki berikan.

      Delete
    2. oke sma2 sob, semoga sukses selalu :)

      Delete
  6. met mlm mas wah trimaksih banyak mas info nya sangat membantu jdi muda untuk melihat siapa yang banyak srng berkunjung heheh

    ReplyDelete
    Replies
    1. Sama2 mas, iya mas teriomakasih mas atas kunjungannya.

      Delete
  7. mantep nih mas tutornya,makasih ya :)

    ReplyDelete
  8. wew............ keren ya ada pic-nya biasanya cuma pake pake tulisan n nomor :D .kapan-kapan pake deh ^_________^ .

    ReplyDelete
  9. mksh pak... langsung dipakai saja sama saya

    ReplyDelete
    Replies
    1. sama2 mas, silakan, terimakasih atas kunjungannya

      Delete
  10. Kalau bolh, blog ini dipasang juga widget yg begituan sob,
    biar nanti ane masuk salah satu top comentatornya.
    salam, mohon supportnya...

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat