29 Widget Top Komentator Dengan Avatar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Widget Top Komentator Dengan AvatarSebelumnya saya sudah pernah mengetengahkan tutorial membuat widget top komentator, kali ini masih masih akan mengetengahkan cara menambahkan widget yang sama namun sedikit perbedaan pada style. Widget top komentator sebelumnya hanya menampilkan nama dari komentator sedangkan widget kali ini menampilkan pula avatar dari komentator. Style tentunya bisa anda modifikasi lagi sesuai dengan keinginan anda, menambahkan efek howover pada avatar atau nama, menampilkan jumlah komentar atau pada jenis dan size link komentator.
Adapun kegunaan dari widget ini, bisa anda maknai sebagai apresiasi untuk pengunjung setia anda atau undangan untuk menarik perhatian dan keinginannya agar lebih giat berkomentar diblog anda.
Jika anda tertarik untuk menambahkan widget top komentator menarik dengan avatar ini, silahkan ikuti tutorial berikut:

  • Pada dasbor –> Menu Tata Letak –> Tambah gadget HTML/JavaScript
  • Beri title/judul yang anda inginkan dan Pada kolom konten masukkan kode berikut:  
<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 = 5;   // 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", "Nama Admin"];     // 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>
  • Silahkan konfigurasikan widget sesuai keinginan anda.
Tulisan berwarna merah dan bercetak tebal diatas (Nama Admin), silahkan diganti dengan nama anda jika anda tidak menginginkan masuk dalam lists top komentator
  • Simpan dan lihat hasilnya di blog anda.
Demikian tutorial menambahkan widget top komentator di blog. Semoga bermanfaat.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

29 komentar :

  1. pertamax.... :)
    amankan dulu

    BalasHapus
    Balasan
    1. boleh juga nih mba,dengan avatar tentunya lebih keren.
      saya juga pernah buat dan posting,tapi gak pake avatar.

      makasih tutornya mba,o ya ada award mba....dicek ya.

      Hapus
    2. Terimakasih tuk apresiasinya. Segera memenuhi undangan, insyaAllah.

      Hapus
  2. wah..ada yg baru nih. asli pingin makai tp Blog saya cuma 2 kolom. Tp ntar sy atur lagi widget yg lain, klw ada space aku pasang mbak. mksh ilmu barunya yah?

    BalasHapus
    Balasan
    1. Tambah aja kolom elemen halamanya mbak, footernya anaa lihat masih kosong. Masih bisa buat 3, 4 sampai 6 kolom lho. Search aja tutorialnya disini jika berminat oprek mbak. Terimakasih apresiasinya.

      Hapus
    2. Alhamdulillah sukses pasang widget ini mbak, setelah saya ganti "nama Admin" ternyata saya masih masuk dlm daftar mbak. justru paling atas sendiri,... :))

      Hapus
  3. Balasan
    1. Silahkan dicoba sob, semoga berhasil. Terimakasih.

      Hapus
  4. Terimakasih yh Saya Baru disini..
    ternyata bagus juga nih blog.. izin coba yh :d

    BalasHapus
    Balasan
    1. Welcome. Terimakasih tuk apresiasinya. Silahkan dicoba, semoga berhasil.

      Hapus
  5. top markotop brad
    manfaat banget

    BalasHapus
  6. saya juga kesini..wahhh nanti lemot nggak mbak blogku banyak tak pasangin unik2 dari sini hehe

    BalasHapus
  7. Terima kasih telah berbagi info, saya mau coba semoga bisa :)

    BalasHapus
  8. mba mau nanya dong, maap OOT

    cara bikin about the author yg kaya di blog ini gmn ya ?

    BalasHapus
    Balasan
    1. Lihat: http://www.tipstrikblogging.com/2013/05/modifikasi-widget-profil-blogger.html

      Hapus
  9. keren artikel nya mas agan izin pake widget nya di blog aku yah ,salam kenal

    BalasHapus
    Balasan
    1. Silahkan. Eh, animasi avatarnya kreatif amat ya? 1 person dengan sekian karakter.

      Hapus
  10. Terima kasih. Saya pasang di blog saya.

    BalasHapus
  11. Makasih... kunjungi blog saya ya... : zlfs-1995.blogspot.com

    BalasHapus
  12. ma acih kka atas tutorialnya

    BalasHapus
  13. nice gan ditunggu visit back nya ya http://goo.gl/xFsziB

    BalasHapus
  14. join back my blog http://nestyano.blogspot.com

    BalasHapus
  15. Terimakasih Sob x-)
    Simpel bermanfaat :)
    Ini yang Saya cari-cari :>)

    BalasHapus
  16. harus dicoba nich.... biar tau hasilnya

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!