Membuat Aktif Komentator Di Blogger

Membuat Aktif Komentator Di Blogger : Halo Sobat Andika Official =D Kali Ini Saya Akan Memberikan Tutorial Membuat Aktif Komentator Di Blogger .

Fitur :

• Menampilkan nama dan link komentator
• Menampilkan Avatar komentator
• Avatar dengan polaraid style
• Efek hover pada Avatar menampilkan jumlah komentar
• Bersih dan elegant

• Demo

Membuat Aktif Komentator Di Blogger

LANGKAH 1 :

 1 . Login Ke Blogger.com

 2 .  Lalu Pergi Ke Laman > Laman Baru > Laman Kosong Lalu Beri Judul Yang Sesuai , Contoh : Active Comments

 3 . Buka Tab HTML , Lalu Copy Kode Dibawah Ini

<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://andika-official.blogspot.com/',   maxTopCommenters = 77,   minComments = 1,   numDays = 0,   excludeMe = true,   excludeUsers = ["Anonymous", "Andika Official"],   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/AVvXsEjf57cfoC-EB1VMMWRjZec3hCOzkPpYce5-YZVimCuabHc9r87z-LP2gK6wgMa0AquEbsvpMMgGPsNwbSB_NoOtMJihaxk6QOYBPp9oHpyJtAXiR-HFVpWeu-4npTo1jMbhruHjM-ETQEU/' + 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>  

Notice :

• Warna Merah Diganti dengan URL Blog kalian

5 . Paste Kode Tersebut Di kolom HTML Lalu Publish

 6 . Selesai

Sekian Membuat Aktif Komentator Di Blogger . Semoga Bermanfaat Bagi Kalian :)

 Enjooyy ~ ~ ~