Tutorial Widget Komen Terbanyak Top Komentator

Salam ...

Disebabkan ada request dari sorang blogger, so hari ni BW nak buatkan tutorial masukkan widget komen terbanyak atau top komentator ataupun dipanggil widget pengomen tegar. Widget ni siap ada gambar si pengomen a.k.a avatar :)
Widget Top Komen Terbanyak.

Widget Top Komentator / Kaki Komen / Komen Terbanyak

Top komentator sepanjang dua tahun berblogging.

Capture on 29/08/15

Widget Top Komen Terbanyak..

Top Komentator sewaktu mula berblogging.
Capture on 27/10/13

Widget Top Komen Terbanyak.

1. Pergi Dashboard
Widget Top Komen Terbanyak..
2. Klik 'Layout'
Widget Top Komen Terbanyak..
3. Klik 'Add Gadget'
Widget Top Komen Terbanyak..

Klik image untuk paparan yang lebih jelas.

Widget Top Komen Terbanyak.

4. Klik 'HTML/JavaScript'
Widget Top Komen Terbanyak.
5. Copy code dibawah
Widget Top Komen Terbanyak.

</style>
<script type="text/javascript">

var maxTopCommenters = 7;
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 = '';
var txtAnonymous = '';
var sizeAvatar = 50;
var cropAvatar = true;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixYJlN-lCbn6uGjvdMG1MEBrULEGWc4M6PWrmVCXrPL0LcT9FyoJ-FnPzxYZTJ5xECZY7V4Q_44OsoiZyUjGnx5axpw8X8CKTvxnw3s6UebHLN_MKUHFZCaf2gXuOM5v2HLSj9k9YkGsEx/s1600/ck-avatar.jpg";
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixYJlN-lCbn6uGjvdMG1MEBrULEGWc4M6PWrmVCXrPL0LcT9FyoJ-FnPzxYZTJ5xECZY7V4Q_44OsoiZyUjGnx5axpw8X8CKTvxnw3s6UebHLN_MKUHFZCaf2gXuOM5v2HLSj9k9YkGsEx/s1600/ck-avatar.jpg' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';

// 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 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>
<span id=ck-wkt><a href=http://buatwanita.blogspot.com/2013/10/tutorial-masukkan-widget-top-komentar.html target=_blank>Grab Me!</a></span>
<style type=text/css>
#ck-wkt {font-family: Arial,Tahoma;font-size:9px;font-style:italic;padding-top:7px;display:block;text-align:right;}
</style>

Widget Top Komen Terbanyak.
6. Paste code dalam ruang HTML/JavaScript
Widget Top Komen Terbanyak.
7. Klik 'Save'

Widget Top Komen Terbanyak.

Paste dalam ruangan ni yer :)

Widget Top Komen Terbanyak.

Widget top komen dengan avatar yang atas ni sesuai untuk blogger baru. Kalau dah blogging agak lama, widget atas ni kurang sesuai sebab komen yang diterima dah banyak, so ianya akan menyebabkan page lambat loading.
Widget Top Komen Terbanyak.
So, kat bawah ni ada code untuk top komentator bulanan. Juga boleh dijadikan top komentator tahunan. Ianya lebih cepat loading. Cuma tak cantik lah sebab tak ada avatar si pengomen. Dan widget top komen bulanan / tahunan ni pun agak simple.
Widget Top Komen Terbanyak.

Top Komentator Bulanan

Capture on 29/08/15

Widget Top Komen Terbanyak.

Untuk nak pasang widget top komentator bulanan /tahunan, stepnya sama sahaja dengan widget yang ada avatar tu. Follow step 1-4, then step 5 copy code baru dibawah ni, edit code yang ditandakan dengan warna merah (lihat dibawah sekali), then follow lagi step 6-7. Done.
Widget Top Komen Terbanyak.

Widget Top Komen Terbanyak.
Perhatikan betul-betul code dibawah ni kay. Korang kenalah edit bahagian yang ditandakan merah tu. Masukkan korang punya url blog, nama korang, berapa banyak komen yang nak ditunjukkan dan edit tarikhnya. Tarikh tu boleh buat setiap bulan dan setiap tahun.
Widget Top Komen Terbanyak.
YourBlogUrl=http://blogsaya.blogspot.com/
&ExcludedNick1= Nama Saya
&ExcludedNick2= Anonymous
&ShowHowMany=10
&ExcludeCommentsBefore=01-08-2015
&IncludeCommentsBefore=01-09-2015
Widget Top Komen Terbanyak.
Selamat Mencuba!
Widget Top Komen Terbanyak.
Thanks For Viewing! By: BW (Buat Wanita)
Widget Top Komen Terbanyak.