Kali ini saya akan membahas mengenai cara membuat widget top comment di blogger, sistem pada widget ini adalah akan menampilkan akun yang paling banyak berkomentar pada blog anda seperti contoh akun bernama bbm modifikasi berkomentar paling banyak di blog anda maka akun bbm modifikasi akan menjadi top komentar nomer satu di widget ini.
widget top comment ini hampir sama dengan widget recent comment yang telah saya bahas sebelum nya meskipun ada sedikit perbedaan yaitu di top comment ini widget akan menampilkan akun yang paling banyak berkomentar sedangkan di widget recent comment yang kita bahas sebelumnya hanya menampilkan komentar terbaru.
 |
| Cara membuat widget top comment di blogger |
Widget top comment yang akan kita buat kali ini juga membantu anda untuk mengetahui para komentar yang aktif berkomentar dan mengunjung blog anda tentu saja hal ini akan menjadikan anda untuk mengetahui partner blog anda yang rajin untuk berkunjung dan solid pada blog anda.
Untuk dapat membuat widget top koment ini anda tinggal mengikuti dengan benar tutorial yang akan saya berikan dibawah ini :
Cara membuat widget top comment di blogger :
- Login menuju blogger anda
- Langsung menuju Tata Letak
- Pilih Tambah Gadget
- Pilih HTML / Java Script
- Masukan code dibawah ini :
<style type="text/css">Keterangan warna merah pada code widget top comment :
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style><br />
<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://harysukasuka.blogspot.com/2013/02/cara-membuat-top-komentar-dengan-avatar.html
//
// CONFIG:
var maxTopCommenters = 20; // how big a list of top commentators
var minComments = 1; // how many comments must top commentator have at least
var numDays = 30; // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true; // true: exclude my own comments
var excludeUsers = ["Yuli Agustiani", "someotherusertoexclude"]; // 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 = 30;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyVzOkMb74OrfHHjHdRx_SPG_QzFy7QoRcddrx56RBoAtEyeTcRFEzv3ezWybybMyXYTl2oh_xVOgix78tDMEE4paHfg2KaNZ1bq29cFJ6sUUdWWXpOAi0-FVCzxsU-ASfIrCdFGGcGck/"+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><a href="http://NamaBlog.blogspot.com" target="blank"><font color="red">[Get This]<font></font></font></a>
- var maxTopCommenters = 20 : angka 20 adalah jumlah top comment yang akan ditampilkan pada widget top comment yang akan kita buat ini.
- Yuli Agustiani : silahkan diganti dengan nama akun blogger anda, ini akan membuat akun dengan nama tersebut tidak akan tampil di widget top comment yang akan kita buat kali ini.
- var sizeAvatar = 30 : adalah ukuran avatar yang akan tampil di widget top koment yang akan kita buat kali ini.
- http://NamaBlog.blogspot.com : silahkan diganti dengan url blog milik anda.
jika tutorial yang saya berikan diatas anda ikuti dengan baik dan benar pasti widget top comen yang dibuat kali ini akan berhasil anda buat dan akan muncul pada blog milik anda dan jika ada hal yang kurang di mengerti dan ada hal yang ingin anda tanyakan silahkan tinggalkan pertanyaan anda di komentar atau hubungi kontak yang telah kami sediakan, terima kasih telah membaca posting kami yang berjudul cara membuat widget top comment di blogger.
0 comments:
Post a Comment