Xếp hạng bình luận (Top Commentators Widget) có Avatars cho Blogger

Thứ Ba, 5 tháng 12, 2017

Đang đọc
Xếp hạng bình luận (Top Commentators Widget) có Avatars cho Blogger
XEM BÀI VIÊT
TOÀN MÀN HÌNH

Xếp hạng bình luận (Top Commentators Widget) có Avatars cho Blogger



Cách làm:

Đăng nhập Blogger ~> Vào Bố cục ~> Thêm tiện ích HTML/Javascript

Dán đoạn code sau vào hộp HTML/Javascript rồi Lưu lại

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<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://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "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 = 25;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ScRKcItZzWmDgGPvzC131Hcovmf1pCWxCPKigkEzBQF2k3Jy6Rtep5OFzuL_qr2qj3sFif6Qca0jku5TM5lo2JZAQVFuCJ0qwGgVgdiMzl24R_uDnduqU7otxvIRkKDRgUOYLY01OMQ//"+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+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = ''+imgcode+'';
 
  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+'" target="_blank">'+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;
      }
  }
 
  if(json && json.feed && json.feed.entry && json.feed.entry.length) 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 && json.feed && json.feed.entry && json.feed.entry.length && 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>


Trong đó:

maxTopCommenters: số lượng người nhận xét nhiều được hiển thị
minComments: số nhận xét tối thiểu để được hiển thị ở bảng xếp hạng
numDays: xếp hạng trong vòng bao nhiêu ngày ( Mặc định = 0 thì sẽ tính tất cả, ví dụ = 30 thì là xếp hạng nhận xét trong vòng 1 tháng) (tối đa 500 nhận xét)
excludeMe: true : người dùng nặc danh
excludeUsers: tên người dùng nặc danh
maxUserNameLength: số ký tự dài nhất hiển thị tên người nhận xét

txtTopLine: Một số biến : [#], [image], [user] và [count]. [#] để đánh số thứ tự, [image] là avatar người nhận xét, [user] là tên người nhận xét và [count] hiển thị số nhận xét. Bạn có thể dùng html để tùy biến giao diện cho riêng mình.
txtNoTopCommenters: Hiển thị khi danh sách xếp hạng chưa có ai
txtAnonymous: "Anonymous" người dùng nặc danh
urlMyAvatar: nếu trueAvatars = false, đặt url avatar của bạn vào đây
urlMyProfile: nếu bạn không có profile gadget, đặt url hồ sơ của bạn ở đây
urlAnoAvatar: avatar cho người dùng nặc danh
urlNoAvatar: những người chưa thiết lập hình ảnh hồ sơ cá nhân, đang dùng logo Blogger. Bạn có thể ghi đè link ảnh khác nếu bạn muốn.

cropAvatar: true - avatar vuông hoặc false - avtar tròn
sizeAvatar: kích thước avatar

Cấu hình

Phần trên có giới thiệu một số biến trong code, bình thường bạn chỉ cần quan tâm và chỉnh sửa một số biến sau:
maxTopCommenters = 5 : hiển thị 5 người nhận xét nhiều nhất
numDays = 0 : Xếp hạng tất cả. Nếu muốn xếp hạng theo tháng thì sửa 0 thành 30, tuần thì sửa 0 thành 7 (Các bạn nên để 0 hoặc 7 vì nếu để 30 thì có tháng có 30 ngày nhưng có tháng lại có 28,29 hay 31 ngày -_-)
sizeAvatar = 25 : kích thước avatar - 25px
cropAvatar = true : avatar vuông. Muốn để avtar tròn thì sửa true thành false
txtTopLine: Dùng html và css để thay đổi giao diện. Demo ở trên là mẫu đơn giản, dưới đây sẽ là một số mẫu xếp hạng đẹp cho bạn lựa chọn


Mẫu 1



1, Sửa sizeAvatar = 36

var sizeAvatar = 36;

2, Thay đoạn css
<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>

bằng đoạn css này:
<style type="text/css">
.top-commenter-line {margin: 3px 0;display:block;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;float:left;margin-right:10px;}
.top-commenter-line h4 {margin:0;padding:0;}
.top-commenter-line span {color:#555;font-size:10px;font-style:italic;}
</style>

3, Thay đoạn code
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
bằng đoạn code này:
var txtTopLine = '[image] <h4>[user]</h4> <span>[count] Nhận xét</span>';


Mẫu 2



1, Sửa sizeAvatar = 15
var sizeAvatar = 15;
2, Thay đoạn css
<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
bằng đoạn css này:


<style type="text/css">
.top-commenter-line {margin: 3px 0;padding:5px;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {position:absolute;bottom:-5px;right:-5px;width:15px;height:15px}
.top-item-thumbnail {float:left;margin-right:10px;width:36px;height:36px}
.top-item-info {overflow:hidden;word-wrap:break-word}
.top-item-info h4 {margin:0;padding:0;}
.top-item-info span {color:#555;font-size:10px;font-style:italic;}
.ol{position:relative}
.ol{background-image:url(https://lh5.googleusercontent.com/-TFh2lJda5nQ/VIlG9iF7qnI/AAAAAAAAAbM/MhbHh82aHpg/s555/sprites.png)}
.ol.st{background-position:-40px -152px}
</style>



Hình ở trên là huy chương màu vàng, nếu bạn muốn thay thành huy chương màu đỏ thì sửa



.ol.st{background-position:-40px -152px} thành

.ol.st{background-position:-40px -224px}



Còn nếu muốn thay thành huy chương màu trắng thì sửa

.ol.st{background-position:-40px -152px} thành

.ol.st{background-position:-40px -188px}

(Mẫu này dùng css giống blog.duypham.info)


3, Thay đoạn code


var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
bằng đoạn code này:


var txtTopLine = '<div class="top-item-thumbnail ol st">[image]</div> <div class="top-item-info"><h4>[user]</h4> <span>[count] Nhận xét</span></div>';


Vậy là xong rồi !












- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !

- Mọi chi tiết xin liên hệ:

- Email: lephuocsinh96@gmail.com

- Facebook: Fb.com/beohoavinh


















0
nhận xét:
        


































        

      











Ads by Google