TUTORIAL MASUKKAN WIDGET KOMEN TERBANYAK / PENGOMEN TEGAR BERGAMBAR

assalamualaikum semua...

jom kita belajar untuk masukkan widget komen terbanyak / pengomen tegar bergambar.

 ini contoh yang blog saya punya.

BLOGGER AKTIF

1. SEINDAH SENYUMAN (18)

2. Ct Noraishah (13)

3. Ms. Kejupenyet (6)

4. Nieyl (4)

5. Normah Kumin (3)

6. Afidah Azmi (2)

7. afzalsukasuki (2)

 

 

CARA-CARANYA :-

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/AVvXsEiRUxfLKLt58CuyjVdVX7S2AHyxP0Y32-Y92ItVJhmJHlqnDEsDm7ARiJ7a6Z-5v4WfMkCrDog3DZ2D0dHCvYiFLuRpZWA1GiQ-_2E9HgM_d7RkEqQUbVCNz00xLWRd7h_vjOr0k2VL0o1U/s1600/ck-avatar.jpg";

var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUxfLKLt58CuyjVdVX7S2AHyxP0Y32-Y92ItVJhmJHlqnDEsDm7ARiJ7a6Z-5v4WfMkCrDog3DZ2D0dHCvYiFLuRpZWA1GiQ-_2E9HgM_d7RkEqQUbVCNz00xLWRd7h_vjOr0k2VL0o1U/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'

  SUDAH SIAP...

 

SELAMAT MENCUBA SEMUA.