Tạo trang danh sách độc giả tích cực trên blog

Tiện ích mình sẽ giới thiệu sau đây tương tự như Top Comments mà bạn đã từng biết chỉ có điều nó thích hợp dành cho một trang hơn là một widget nhỏ trên blog. Tiện ích sẽ liệt kê ra danh sách những độc giả tích cực trên blog của bạn dựa theo số lượng comments của họ, và khi ta rê chuột đến avatar sẽ hiện ra số lượng mà họ đã comments. 

Live Demo

Để thêm tiện ích này vào blog bạn hãy tạo một trang/bài viết mới và soạn thảo dưới chế độ HTML rồi dán đoạn code bên dưới vào sau đó lưu lại

<style>#main-wrapper {}
.cm-person {
  margin:12px;
  position:relative;
  float:left;
  width:100px;
  height:120px;
  font:normal 10px Tahoma,Verdana,Arial,Sans-Serif;
  text-align:center;
  line-height:10px;
  padding:10px;
  border:1px solid #3c3c3c;
  color:#999;
  background-color:#222;
  box-shadow:inset 0 0 1px black;
}
.cm-person a.profile-name-link {
  width:100px;
  height:100px;
  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}
.cm-person img {
  background-color:#666;
  display:block;
  width:100px;
  height:100px;
  padding:0 0;
  margin:0 0 10px;
  border:none;
}
.cm-person:hover {background-color:#111}
.cm-person:hover a.profile-name-link {display:block}
</style>
<script type="text/javascript">
var homepage='http://'+window.location.hostname,
  maxTopCommenters = 50,
  minComments = 1,
  numDays =0,
  excludeMe =false,
  excludeUsers = ["Anonymous", "Huy Cò Vip"],
  maxUserNameLength = 20,
  txtTopLine = '[image] [user]',
  txtNoTopCommenters = 'No top commentators at this time.',
  txtAnonymous = '',
  sizeAvatar = 100,
  cropAvatar = true,
  urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ps9M1PrQfdVm1jJFdGXEt70VoDqeLUukugMJYfz1uU45_12ZhJQbaoIqbfbaFZTpwbPO5kjOPLVsqx_xtOPUriwnk1F7zWK6YwUhdKjP02I6NU840pGE6CaixD53uQDk472lpdpIrR4//' + 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>

Trong đó đoạn được đánh dấu là tên những thành viên sẽ không xuất hiện trong danh sách, chú ý tên này phải trùng với tên trên profile của Google+

Nguồn Under-88