Kali ini saya akan membagikan tips membuat Widget top komentar,tapi sebelumnya hanya menampilkan nama dari
komentator sedangkan widget kali ini menampilkan pula avatar dari komentatornya.
Style tentunya bisa anda modifikasi sendiri sesuai dengan selera anda, menambahkan efek howover pada avatar
atau nama, menampilkan jumlah komentar atau pada jenis dan size link
komentator.
Widget ini bisa dimaknai sebagai apresiasi pengunjung setia blog anda atau untuk menarik perhatian agar lebih aktif berkomentar diblog Anda.
Berikut cara membuat widget top komentator menggunakan avatar,
silahkan ikuti tutorial berikut:
<<>>Masuk ke akun BLOGGER Anda
<<>>Pada Dasbor >>>Pilih Menu Tata
Letak >>> kemudian Tambah
gadget HTML/JavaScript
<<>>Berikan judul yang anda inginkan dan Pada kolom konten
masukkan kode berikut:
<style type="text/css">
.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);
margin-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;border-bottom:1px solid
#eee;padding:3px 5px 6px 0px;}
.top-commenter-line .profile-name-link
{padding-left:0;font-weight:bold;}
.top-commenter-avatar
{vertical-align:middle;width:30px;height:30px;
}
</style>
<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;
// how big a list of top commentators
var minComments = 1;
// how many comments must top commentator have at least
var numDays = 0;
// from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;
// true: exclude my own comments
var excludeUsers = ["Anonymous", "Nama Admin"]; // exclude these usernames
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/AVvXsEgrFZYCirBVvvOAxdoXASYQb1M2ssDVbocJJL7lOnt8NAZUlpNaDQjkEUgtmJzFJHOBirpu7v1wkzBEGpn06xjtSyZlQqND30D3eQLB5mi-l0rglMHqf_QVT5Vy-A_XrdOXTliKPPD-oOg/"+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>
<<>>Konfigurasikan widget sesuai
keinginan anda.
Tulisan berwarna merah dan bercetak tebal diatas (Nama
Admin), silahkan diganti dengan nama anda jika anda tidak menginginkan masuk
dalam lists top komentator
<<>>Simpan dan lihat hasilnya di
blog anda.
Demikian tutorial menambahkan widget top komentator di blog.
Semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Subscribe berlangganan gratis via email, dengan begitu
Anda akan mendapat kiriman artikel terbaru dari akusharekan.blogspot.com
EmoticonEmoticon