Memasang widget top komentator dengan avatar

Widget

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/AVvXsEhQLPXyqQDNWXmpbyo1cmdOaYXNtrD_fjI6aZU7e0MlM-qKKVGhPR2eus3O6O1PtjiO8RHZDektsm89S726bb_IjNFS184sc46sk6HxJdPIdg5XoHTvzn1IKLRczfi_-ZgQJrfFR3bBJYk/"+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>');
    

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

Artikel Terkait

  • Pencarian dengan tombol bersihkan
    Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda. Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link i…
  • Membuat javascript random teks
    Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik l…
  • Sidebar Menu Accordion jQuery
    Apa fungsi menu accordion? Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat se…
  • Membuat Sticky post di blogger dengan gadget
    Demo Membuat sticky post di blogger dengan gadget sangat mudah, mari kita lihat bagaimana kita bisa membuat sticky post menggunakan gadget HTML / Javascript. Saya tidak menemukan "solusi penuh" di mana sticky post dapat bekerja seperti seharusnya, yaitu hanya tampilkan pada halaman depan dari blog, tapi tidak pada halaman lain. . Menamb…
  • widget amoung tanpa javascript
    Memasang widget amoung memang bukan hal yang rahasia bagi blogger, widget among berguna sebagai counter banyak user yang sedang mengunjungi laman di blog kita tapi mungkin penggunaan javascript dari widget ini menambah beratnya dan waktu memuat laman kita dalam blog apalagi blog sobat yang sdah memasang banyak javascript. untuk itu kali ini s…
  • Modifikasi widget link list dengan css di blogger
    Selamat pagi sobat blogger semua, kembali muncul share tentang css ni buat widget link list blogger agar tampil lebih menarik sekalian juga bernomor seperti widget popular post. widget link list di gunakan untuk menempatkan beberapa link yang di anggap penting atau untuk mengarahkan pengunjung blog pada sebuah halaman. bisa juga untuk memajang…

3 komentar

  1. kayaknya oke nih mas...
    ijin nyoba dulu ya mas.

    BalasHapus
  2. Bloked link! Link tidak di ijinkan baca disini.

    Tautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.

    Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.

    BalasHapus
Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...