Tutorial Simple Cara Membuat daftar Komentator di Blogger Anda

Membuat daftar komentator – Pada umumnya sebuah blog hanya menampilkan komentar di kolom yang sudah disediakan di bawah postingan artikel yang telah dibuat. Tetapi disini tujuan saya menampilkan list siapa saja yang memberikan komentar terbanyak dan dapat dilihat oleh semua pengunjung.

Adapun caranya akan saya paparkan dibawah ini dengan jelas agar anda tidak kesulitan dalam menerapkan tutorial ini. Untuk membuat daftar komentator sangat mudah dan simple sekali. Disini anda hanya tinggal memasang code script di blogger anda bisa anda cek kode HTML/Java Scriptnya dipembahasan dibawah ini:

#Cara Memasang Code HTML/Java Script Membuat daftar Komentator Blog

Langkah awal anda harus masuk terkebih dahulu diblogger anda kemudian masuk di halaman dasboard Blog anda. Pada saat ini anda siap untuk menerapkan kode HTML/Java Script daftar komentator blog.

• Selanjutnya anda masuk di tataletak dan klik tambahkan Gadget
• Lalu anda klik HTML/Java Script tepat dibawah Entri yang diunggulkan.
• Step selanjutnya anda copy code  dibawah ini dan pastekan tepat dikolom HTML/Java Script kemudian anda beri judul dan klik save untuk menyimpannya.

Code Java Script

<style type="text/css">
  .top-commentators {
  margin: 3px 0;
  border-bottom: 1px dotted #ccc;
  }
  .avatar-top-commentators {
  vertical-align:middle;
  border-radius: 30px;
  }
  .top-commentators .commenter-link-name {
  padding-left:0;
  }
  </style>
  <script type="text/javascript">

 var maxTopCommenters = 8; 
  

var minComments = 1;     
  var numDays = 0;         
  var excludeMe = true;    
  var excludeUsers = ["Anonymous", "someotherusertoexclude"]; 
  var maxUserNameLength = 42;
  //
  var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
  var txtNoTopCommenters = 'No top commentators at this time.';
  var txtAnonymous = '';
  //
  

var sizeAvatar = 33;
  

var cropAvatar = true;
  //
  var urlNoAvatar = "http://2.bp.blogspot.com/-pWdg8wLsedo/UmVWQxLdwrI/AAAAAAAAEVk/-z7YgKykkuU/s1600/avatar_blue_m_96.png" + sizeAvatar;
  var urlAnoAvatar = 'http://1.bp.blogspot.com/-6B6DXCp8dek/UmVPm7D2mOI/AAAAAAAAEVU/Xz-3z2nRpUk/s1600/avatar1.png' + sizeAvatar;
  var urlMyProfile = '';
  var urlMyAvatar = '';
  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="avatar-top-commentators" 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="commenter-link-name" 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);
        var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
     
        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;
    });
    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-commentators">');
      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>

Untuk menambah daftar list komentar anda dapat merubah nya di code var maxTopCommenters = 8;. Dan juga jika anda ingin merubah ukurannya bisa merubah code var sizeAvatar = 33; Sekian.

Kesimpulan

Membuat daftar Komentator di blogger sangatlah mudah, anda tinggal salin kode diatas dan anda simpan di halama HTML/Java Script. Tujuan dari daftar Komentator ini untuk memudahkan melihat banyaknya komentar suatu blog. Dan dapat ditayangkan mana saja komentar terbanyak dan juga Top komentator di blogger.

Jadi buat agan-agan yang mau mencobanya bisa  menerapkan step yang sudah saya bahas diatas semoga bermanfaat.