Tutorial Masukkan Widget Komen Terbanyak / Pengomen Tegar Bergambar

Assalamu`alaikum pembuka kata Rabu . Alright, entry Yaya hari pasai nak letak widget komen terbanyak, macam di bawah ni haa...

1. Pergi Dashboard

2. Klik 'Layout'

3. Klik 'Add Gadget'

4. Klik 'HTML/JavaScript'

5. Copy code dibawah 

<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 = 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/AVvXsEiG0uLyXQYaPRNMl4RZC4D8IF12TC33p6WizdnmCgIp-6RTvRrFgwA16TSRhXbTkr7UgyFTA9AwbRLp_yiOGQeInqC3gyFWoMcGmb8GxVkB-BcCbur7Xk3CaUOYBqzTen2Vd8afEa_6DlmS/s1600/ck-avatar.jpg";

var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0uLyXQYaPRNMl4RZC4D8IF12TC33p6WizdnmCgIp-6RTvRrFgwA16TSRhXbTkr7UgyFTA9AwbRLp_yiOGQeInqC3gyFWoMcGmb8GxVkB-BcCbur7Xk3CaUOYBqzTen2Vd8afEa_6DlmS/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://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> 

6. Paste code dalam ruang HTML/JavaScript

7. Klik 'Save'

Done. Selamat Mencuba! 

=)