Ingin memberikan penghargaan kepada pengunjung Blog Anda ? Banyak cara untuk mewujudkannya, bisa memberi mereka sebagai hadiah pada acara yang mengesankan acara yang Anda pegang, atau menyediakan link kembali kepada mereka dengan memasang widget top komentator, atau widget anggota aktif berikut bahkan ini bisa menjadi alternatif bagi Anda .
Widget ini sebenarnya masih menggunakan script yang sama dari komentator atas widget, hanya widget gaya dimodifikasi dengan pandangan yang berbeda dan kalimat komentar yang tidak ditampilkan.
fitur:- Menampilkan nama dan link yang komentator
- Menampilkan Avatar komentator
- Avatar dengan gaya polaraid
- Arahkan efek pada Avatar menunjukkan jumlah komentar
- Bersih dan elegan
Silahkan Lihat
DemoCara menambahkan widget ke blog Anda :
---->> Copy dan paste kode di bawah ini pada editor HTML atau halaman blog Anda :<style type="text/css">
.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color: #FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}
.comments {display: none;}
</style>
<script type="text/javascript">
//<![CDATA[
var homepage = '
http://www.mustofaazka.blogspot.com/', maxTopCommenters = 77,
minComments = 1,
numDays = 0,
excludeMe = true,
excludeUsers = ["Anonymous", "
Admin"],
maxUserNameLength = 42,
txtTopLine = '[image] [user]',
txtNoTopCommenters = 'No top commentators at this time.',
txtAnonymous = '',
sizeAvatar = 80,
cropAvatar = true,
urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBEGRxT7lxda1oDEDmLQAOKrE77CzCnUreSjKFst_Ly-zETytJYeB6FjPom57C-dvqFW_TAQCF_1kjybnFpx3X9_rM1qSZRokTDYbDMzvze_HwxmsU83wyMt4x5PpqEAXnl5oStZhtY0/' + sizeAvatar + '/avatar_blue_m_96.png',
urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
urlMyProfile = '',
urlMyAvatar = '';
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 = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" 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 item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
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);
var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
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="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
return
}
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
});
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(replaceTopCmtVars(txtTopLine, item, realcount + 1));
realcount++
}
if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script>
Download Kode script diatas
disiniUntuk widget konfigurasi, perhatikan tulisan merah dan sesuaikan dengan selera Anda
Simpan template dan lihat hasilnya di blog Anda.
Jadi merek tutorial widget anggota aktif. Semoga bermanfaat.
