Nah apakah kalian tertarik dengan Cara Membuat Widget Member Aktif/Top Komentator seperti di Blog ini? Jika iya maka silakan simak tutorial berikut :)
1. Buka akun blogger kalian
2.Widget ini bisa di gunakan pada halaman statis atau pun sebagai widget di blog anda
3. Digunakan sebagai :
-Masuk ke bagian Tata Letak ->> Pilih Add Gadget
-Copy pastekan kode berikut di HTML Box nya
<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.maseyudha.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/AVvXsEhKUuhdxWnM_-Hl5NwEwWSIe-9ZX7q_LAIEB2S6qdova3yLas_l-_D5186M0_HQ5c8zr64ih2-V9LDzEgR-8LkdIgWMOv6BeimpEJyVDTA_GU6Aan8kMo7pzkAD35ILH3BslWx-deDSZyY/' + 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>
-Ganti dengan URL Blog anda. Klik Save jika sudah selesai
4.Sebagai
-Klik blog yang akan kalian pasangi widget member aktif ini
-Setelah itu buat halaman baru dengan cara pilih Laman -> Laman Kosong
-Gunakan metode HTML bukannya Compose
-Dan pastekan kode diatas lalu Publish
Mudah sekali bukan Cara Membuat Widget Member Aktif/Top Komentator KEREN di Blog sampai jumpa di postingan berikutnya :)
ini widget menarik banget, makasih triknya mas...
BalasHapussalam
bener banget gan,,bisa menambah banyak temen juga
Hapussalam kenal gan :)
sam wong....!!
Hapussaya cari2 ternyata ada disini toh,suruh balik dulu,dirumah banyak tamu
waduh ada foto saya tuh mas ^_^
BalasHapusiya gan biar ngetren ente =D
Hapussaya juga pengen ngetren ah
Hapusmas yanto mah udah ngetren =D
Hapusiya nih mas,kebanyakan orang nyari nagih utang.hehehe
Hapus=D
Hapushahaha , ngetren didunia blogger :ng
Hapuswahh,, keren nih sob,, izin nyoba ya,,
BalasHapusthanks infonya
oke silahkan gan wicky :-bd
HapusMakasih triknya mas :)
BalasHapusBlog saya akhirnya ada widget ginian :D
sip gan Ricki :-bd
Hapusbisa mempublish semua member blog kita juga
keren juga nih widget komentatornya mas,perlu diterapkan diblog sebagai bentuk penghargaan kepada temen2 yg aktif berkomentar.
BalasHapustp kenapa adminnya tidak diilangin tuh mas,jadinya top komentatornya jadi admin sendiri dong hehehe
oya mas,kayaknya kunjungan perdana nih,salam kenal
weleh..akhirnya sang master mampir juga ke gubuk ane ini :-bd
Hapussalam kenal juga mas yanto..
oke mas makasih masukannya ntar ane ilangin :)
master apa mas,kita mah masih newbie koq
HapusMantap tips nya gan,,dengan ini mungkin saya bisa melihat sahabat sahabat blogger,yang paling sering melihat blog kita :D
BalasHapusbener banget mas,,dan bisa menambah banyak temen sesama blogger :-bd
Hapusnongol ah , biar ngetre lagi :D
BalasHapuswalah ada artis baru nih :siul
Hapusartis kurang biaya bgini mas , maklum :cantik
Hapuskurang make up nya juga gan :D
Hapusnanti aja make up nya kalo udah pengen shooting :D
Hapusbalik lagi kesini mas,menyimak lagi widget member aktifnya
BalasHapuseh blog mas yudha yg aktif mana sih mas
saya kan mau follow ternyata banyak banget blognya
Blog utama ane yang GoGling Studio mas,,ini blog ke dua,,tapi tenang aja 2 blog ini Aktif 24jam 6hari seminggu 30hari sebulan Full Nonstop :D,,kalo blog yang lain cuma blog dummy
Hapusoke mas yanto akan saya pasang disini widgetnya..
Mantep sob..
BalasHapus