Tutorial : Widget Senarai Pemberi Komen Terbanyak

بسم الله الرحمن الرحيم

Widget Senarai Pemberi Komen Terbanyak ini adalah hasil ilham daripada Widget Komen Terkini Dengan Avatar Berpusing yang Shahril postkan sebelum ini. Ia kelihatan agak unik kerana mampu memusingkan avatar pemberi komen terbanyak apabila cursor mengenainya. Selain itu, widget ini memberitahu profil pemberi komen terbanyak dan bilangan komen yang diberi.

Jika mahukan widget ini, sila ikuti langkah-langkah di bawah: 


1. Masuk ke akaun blogger anda -->>> "More options" 

2. Pilih "Layout"
 

3. Klik "Add a Gadget" pada sidebar
 

4. Scroll ke bawah sedikit dan klik "HTML/JavaScript"
 

5. "Copy" semua kod di bawah dan "paste" ke dalam kotak Content

<style type="text/css">
.top-commenter-line img {
border: 2px solid #ffffff;
-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);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.top-commenter-line img:hover {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.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">

var maxTopCommenters = 5;
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/AVvXsEikXt4ZvLSxy2q05_vDib0CW-dYTYrE_fr_YO-rt8poCINrR1hw1d9bcJvAJyZiZa4OFV8OPsV37dbM0rFvqnbGCb190c6AGnj1mfSJZ9DdYiNeCYb8SYS3AYhAfo-ymLrXKjGE9sEdi5SH/s1600/ck-avatar.jpg";
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXt4ZvLSxy2q05_vDib0CW-dYTYrE_fr_YO-rt8poCINrR1hw1d9bcJvAJyZiZa4OFV8OPsV37dbM0rFvqnbGCb190c6AGnj1mfSJZ9DdYiNeCYb8SYS3AYhAfo-ymLrXKjGE9sEdi5SH/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 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>
<span id=ck-wkt><a href=http://muhammadshahril97.blogspot.com/2014/12/tutorial-widget-senarai-pemberi-komen.html target=_blank>Widget Senarai Pemberi Komen Terbanyak</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>

Nota: 

Kod Warna Biru: Untuk menukar warna border pada avatar
Kod Warna Hijau: Untuk memaparkan jumlah bilangan pemberi komen terbanyak
Kod Warna Merah: Untuk sembunyikan profil dan avatar anda daripada tersenarai dalam pemberi komen terbanyak, gantikan dengan nama profil anda sendiri. (Contoh: "someotherusertoexclude" diganti dengan "Muhammad Shahril")
Kod Warna Ungu: Untuk menukar saiz avatar

6. "Save" gadget sidebar anda dan siap!

Semua penulis akan mati, tetapi hanya karyanya sahaja yang akan terus kekal abadi. Maka tulislah sesuatu yang dapat membahagiakan dirimu di akhirat nanti. - Saidina Ali Bin Abi Talib -

KaDaNg-KaDaNg Allah HiLaNgkAn SeKeJaP MaTaHaRi KeMuDiAn DiA dAtAnGkAn PuLa GuRuH dAn KiLaT,PuAs KiTa MeNcArI Di MaNa MaTaHaRi,RuPa-RuPaNyA Allah InGiN MeNgHaDiAhKaN kItA PeLaNgI yAnG iNdAh ~

ORIGINAL MUHAMMAD SHAHRIL® █║▌│█│║▌║││█║▌║▌║ Verified Official by Blogspot