Memasang widget top komentator dengan avatar

Memasang widget top komentator dengan avatar

Dengan widget ini anda dapat membuat daftar pengunjung yang sering berkomentar di blog anda. Anda dapat mengkonfigurasi jumlah maksimum komentator dan jumlah minimum komentar seseorang sehingga masuk dalam daftar komentator teraras blog anda. Selain itu Pemilik blog dan daftar torehan lain (misalnya "Anonymous") dapat tidak di munculkan dari daftar top komentator ini, dan setiap pengaturan bisa di set dengan mudah.

Cara memasang widget ini

Tambahkan gadget HTML / Javascript ke blog Anda, dan paste kode berikut ke dalamnya.

    <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">
    //
    // Top Commentators gadget with avatars, by MS-potilas 2012 modification by defri defandaky.
    // Gets a list of top commentators from all comments, or specified number of days in the past.
    // See http://defandaky.blogspot.com
    //
    // CONFIG:
    var maxTopCommenters = 5;   // jumlah maksimal top komentar
    var minComments = 1;        // jumlah minimum top komentar
    var numDays = 0;            // standart waktu (ex. 30), atau set 0 dari "semua waktu"
    var excludeMe = true;       // true: mengecualikan komentar author
    var excludeUsers = ["Anonymous", "nama profile anda"];     // jika nama anonim tidak di terapkan
    var maxUserNameLength = 42; // 0: untuk tidak memotong, >4: untuk membatasi panjang username
    //
    var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
    var txtNoTopCommenters = 'Tidak ada top komentar untuk sekarang.';
    var txtAnonymous = '';      // kosongkan, atau isi dengan nama pengguna lokal jika Anda ingin melokalisasi
    //
    var sizeAvatar = 45;       // ukuran avatar //
    var cropAvatar = true;
    //
    var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRogWVJMVAfv2vING7Rq6YuYYy4yk_hbQOB31EYThnYhFgExRjAlUyB9uKhs5nLhzg9CqQ-Fnn72lgkbAS-n0FHE5Bf3-WPyMF4BKmk_k91GxVOGLA7rKKFWtV942QKgXzCN2ECGxHPco/"+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 = ''; // isi url profile jika anda belum memasang widget profile
    var urlMyAvatar = '';  // biarkan kosong secara (default) atau isi sebuah url gambar
    // 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/profile blog anda";
      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>

konfigurasi Script

Ada dua definisi CSS yang dapat diubah sesuai dengan keinginan Anda. Setelah itu kode javascript dan variabel dapat dikonfigurasi. Berikut adalah daftar dari variabel dan penjelasan singkat.

maxTopCommenters: jumlah maksimum top komentar
minComments: jumlah minimum top komentar
numDays: dari berapa hari (ex. 30), atau 0 dari "sepanjang waktu" (max 500 komentar)
excludeMe: mengecualikan komentar author, atur true
excludeUsers: mengecualikan untuk array username
maxUserNameLength: pemotong panjang usename
txtTopLine: menentukan kernel, apa yang ditampilkan pada setiap baris. Teks ini dapat memiliki variabel sederhana, yaitu: [#], [gambar], [user], dan [count]. [#] Diganti dengan posisi pada daftar, [image] oleh gambar avatar komentator, [user] dengan nama komentator dan [count] oleh jumlah komentar. Teks juga dapat berisi html.
txtNoTopCommenters: apa yang akan ditampilkan, jika daftar kosong
txtAnonymous: username "Anonymous" lokal, atau kosongkan jika teks bahasa Inggris "Anonymous" yang akan digunakan
getTitles: jika di atur ke true, judul dari posting akan muncul, jika di set false, maka akan muncul url profile blogger
urlMyAvatar: diatur di sini url ke avatar Anda
urlMyProfile: jika Anda tidak memiliki gadget profil di halaman, tempatkan url profil Anda di sini!
urlAnoAvatar: anonim avatar, Anda dapat mengubah avatar anonim, jika Anda inginkan.
urlNoAvatar: ikon (logo Blogger) bagi Blogger yang belum mengatur foto profil mereka. Anda bisa mengganti ikon dengan pengaturan ini  atau biarkan secara(default:).
cropAvatar: crop avatar
sizeAvatar: ukuran avatar komentar dalam pixel

Jika blog Anda memiliki banyak komentar (ribuan), saya sarankan Anda untuk menggunakan pengaturan "komentator di atas 30 hari" ubah di (set numDays variabel 30), sehingga tidak akan memakan waktu terlalu lama untuk memuat dan menghitung semua komentar.

Semoga berhasil....

Memasang widget top komentator dengan avatar


Memasang widget top komentator dengan avatar

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Blog Hatsaka. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Blog Hatsaka dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

• CSS widget popular post Blogger
• 4 Style CSS widget Label Blogger
• Widget Recent Post Dengan Thumbnail Tooltips
• Membuat javascript random teks
• Modifikasi widget link list dengan css di blogger

Ditulis oleh Columbia Mary pada tanggal Sunday, July 14, 2013