Widget Top Komentator Dengan Avatar

As-Salam. Salah satu cara untuk pikat pengunjung blog anda meninggalkan komen ialah dengan meletakkan widget komen terbanyak dengan paparan avatar menarik. Widget ini sedikit sebanyak akan membuatkan pengunjung blog anda terasa mahu meninggalkan komen supaya wajah dan juga backlink mudah boleh dilakukan.

Tentu si pengunjung terasa seronok bila avatar wajah cun kacak mereka terpapar di halaman blog anda, siap dengan jumlah komen yang dah diberikan. Bangga. Hidung kembang kempis depan komputer kerana jumlah komen mendahului orang lain .. hinsshhh ...hinsshhh .. hehehee....

Widget Top Komentator Dengan Avatar

Dan menerusi widget ini juga, pengunjung lain boleh juga kenal-kenal dengan pemberi komen yang lain. Siapa avatar dia nampak menarik, kacak dan cun ada kemungkinan besar akan dikenali, dan mungkin mendapat trafik daripada widget ini. Tengok contoh yang diberikan ini:

Ok, cara nak pasang widget ini dalam blog, boleh anda lakukan dengan salin kod HTML diberikan ini, mengikut pilihan anda dan masukkan di bahagian Add HTML dalam blog anda.

Widget Komen Terbanyak Dalam Masa Sebulan

.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);
}

.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style><br />
<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;   // berapa banyak senarai top commentator
var minComments = 1;        // komen mininum
var numDays = 30;            // 30 hari komen dikira untuk top komentator
var excludeMe = true;       // true: tidak masukkan komen sendiri
var excludeUsers = ["Anonymous", "NAMA-ANDA"];     // nama komentator yang tidak mahu dimasukkan
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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIys4-1CNnmbxAbHJ9zJwRAu_Ynt305qEkVrt1eSs8H3OcaM5-xg_APaj1o10aWwZRzAL4c_v7HC1YXrUYJXUVytVAfbVLKiFZ7efRGzb9pGusBHyV0EA__55dya5vWw2f1UZ0oV71QW8/"+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><br />
<div style="text-align: center;">
<span style="font-size:11px;"><a href="http://www.hasrulhassan.com/2013/06/widget-top-komentator-dengan-avatar.html" target="_blank">Mahu Widget Ini?</a></span></div>

Widget Komen Terbanyak Dalam Masa Seminggu

Untuk paparkan top komentator dalam masa seminggu (7 hari), anda perlu ubah kod HTMLseperti berikut:

Mudah? Rasanya mudah je, saya dah cuba, dan ianya boleh dipasang untuk blog-blog yang menggunakan sistem komen luaran seperti Disqus. Cuma blog yang guna sistem komen seperti NuffnangX atau Google+ mungkin tak boleh.

Lagi satu diingatkan, blog anda mungkin akan hadapi masalah loading dengan memasang widget ini. Hanya jika benar-benar perlu sahaja, seperti anda mahu buat segmen atau kontes komen terbanyak, masa itulah boleh pasang widget ini - sekadar pendapat.

Terima kasih kepada Yet Another Blogger Tips Blog kerana kongsikan kod HTML widget top komentator dengan avatar ini.

Selamat mencuba.

28 Comments

Komen adalah tanggungjawab anda. Tertakluk pada Akta 588 SKMM. Untuk pengiklanan, boleh email ke editor@hasrulhassan.com.

Carlos SantiagoJune 26, 2013 at 1:32 PM
terbaiklahhhh
Nurfaezah AbdullahJune 26, 2013 at 1:58 PM
nak try jugak
PakcikLie PCLJune 26, 2013 at 4:12 PM
salam Bro HH, utk G+ komentar setakat ni ada kaedah tak nak buat benda yg sama ni (menghargai tukang komen)...
hasrulhassanJune 26, 2013 at 4:29 PM
Buat masa ni, belum lagi saya jumpa mana-mana yang kongsikan mengenai cara guna G+. Dalam forum pun belum ada lagi.
fairus mohamad noorJune 26, 2013 at 4:36 PM
tq share ye bro..saya dah copy..hehe
hasrulhassanJune 26, 2013 at 4:39 PM
Sama-sama, jika ada masalah .. jangan segan beritahu saya.
Lina md. munirJune 26, 2013 at 5:58 PM
Nampak memang sangat menarik widget avatar ni, tapi nak usik lebih-lebih takut meletup pulak nanti..hahaha
nurul asihqahJune 26, 2013 at 9:50 PM
good info :) .. sila lawat blog saya www.nurulasihqah.blogspot.com
sukmawati binti haronJune 27, 2013 at 10:33 AM
pernah pasang tapi out balik agak berat rasanya kalau pasang di blog....
hasrulhassanJune 27, 2013 at 11:39 AM
Ohh @Lina md. munir kalau mahu, saya boleh tolong letak dan buatkan, :) hubungi saya kalau berkenan.
hasrulhassanJune 27, 2013 at 11:39 AM
Hmmm .. ya, bukan semua widget itu sesuai, saya ada letak tapi bukan blog ini... sbb blog ni dah sarat sangat dah.
PakcikLie PCLJune 27, 2013 at 5:15 PM
sy menantikannya, jgn lupa kongsikan kalu dah ada. t.kasih.
Lina md. munirJune 27, 2013 at 6:17 PM
Ha ? Ya ker ? Serious ? Kecik tapak tangan nyiru saya tadahkan. Terima kasih.
hasrulhassanJune 27, 2013 at 8:23 PM
In Sha Allah, tapi itulah, Google ni dah mula nak kaut sorang2 dah ... walaupun sumbr terbuka.
Kamil SallehJuly 2, 2013 at 7:18 PM
Cuba letak di blog baru...sebagai daya penarik.
Kamil SallehJuly 2, 2013 at 7:19 PM
Terima kasih berkongsi informasi.
hasrulhassanJuly 12, 2013 at 6:22 AM
Cubalah, mesti akan menarik perhatian nanti...
hasrulhassanJuly 12, 2013 at 6:22 AM
Terima kasih.
kak tieAugust 5, 2013 at 9:49 AM
thanks,akak dah buat kat blog akak,ikut step by step,tapi nape nama akak masih ada?
Dunia ZumalSeptember 10, 2014 at 4:22 PM
Thanks HH, zumal pun amik code gak. Dah lama cari tak pernah jumpa seperti yg diingini ^_^
Muhammad Akmal IslanMarch 22, 2015 at 2:09 AM
Thanks HH banyak membantu kepada yang newbie, lagi orang macam saya ni
www.akmalislan.blogspot.com
Nama pena, Puteri Nur Cahaya @ Cikgu iEta. Suri rumah sepenuh masa. Penulis Lifestyle Blogger berpengalaman Social Media Marketing Coach.April 16, 2015 at 1:56 PM
godek nak letak balik top komentar dlm blog. hehe...
enaJuly 12, 2015 at 8:18 AM
kalau pasang widget ni, komen2 lama hilang tak?
EtuzaDecember 8, 2015 at 8:46 PM
dah guna tempoh hari..kali ni untuk disember nak guna lagi lah ya HH
UnknownJanuary 4, 2016 at 12:36 PM
Thank you for the info yer... :)
UnknownFebruary 2, 2016 at 4:10 PM
Oh kalau ada masalah loading pasti akan melambatkan lagi la orang nak buka blog kita kan...saya tengah fikirkan nak buh ke tidak ni