Widget danh sách tác giả cho Blogger / Blogspot

Ở bài viết trước mình đã hướng dẫn các bạn cách để thêm tác giả vào Blogger. Việc này giúp blog của chúng ta có được lợi thế to lớn trong số lượng và chất lượng bài viết diễn ra trên đó, và từ việc này blog có khả năng phát triển nhanh hơn và ít cạnh tranh hơn cũng như dễ dàng kiếm tiền hơn nhưng blog khác.

Widget danh sách tác giả cho Blogger / Blogspot

Cũng tiện đó mình đã tìm và chỉnh sửa được một đoạn Javascript giúp tự động thống kê danh sách tác giả kèm theo số lượng bài viết mà họ đã đóng góp trên blog của chúng ta. Mình nghĩ với blog có nhiều tác giả thì việc thêm widget này blog là khá cần thiết, nó giúp cho bạn đọc biết có những ai đang viết cho chúng ta, giúp cho những tác giả biết được số lượng bài viết của họ từ đó dễ dàng phân chia cũng như phấn đấu để hoàn thành được mục tiêu số lượng bài viết đặt ra.

Widget danh sách tác giả cho Blogger

Đối với đoạn mã để làm widget này, mình đã gom toàn bộ lại để các bạn có thể dễ dàng chèn vào blog mà không phải lằng nhằng tìm nhiều nơi để đặt từng đoạn mã riêng lẻ. Tiến hành vào công việc thôi:

Đầu tiên vẫn là đăng nhập và vào trang tổng quan của blog mà bạn muốn thêm vào, tại đây các bạn chọn vào phần "Bố cục" và thêm một widget HTML mới.


Sao chép toàn bộ đoạn mã sau đây chép vào phần nội dung của widget
<style type='text/css'>
.author-line {padding: 0 0 10px 0;border-bottom:1px dotted #ccc}
.author-avatar {vertical-align:middle;border-radius: 50%;}
</style>
<script type='text/javascript'>
//<![CDATA[
var maxUserNameLength=15;
var txtAuthorLine="[image] [user] đã đóng góp <b> [count] </b> bài viết";
var sizeAvatar=50;
var cropAvatar=true;
var urlNoAvatar="http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png";
function replaceAuthorVars(l,k,p){if(!k||!k.author){return l
}var r=k.author;
var o="";if(r.uri&&r.uri.$t!=""){o=r.uri.$t
}var n=urlNoAvatar;
if(r.gd$image&&r.gd$image.src){n=r.gd$image.src
}if(n=="http://img2.blogblog.com/img/b16-rounded.gif"&&urlNoAvatar!=""){n=urlNoAvatar
}var t="s"+sizeAvatar;
n=n.replace(/\/s\d\d+-c\//,"/"+t+"-c/");
if(cropAvatar){t+="-c"
}n=n.replace(/\/s\d\d+(-c){0,1}\//,"/"+t+"/");
var m=r.name.$t;
var q='<img class="author-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+m+'" src="'+n+'" />';
if(o!=""){q=""+q+""
}if(maxUserNameLength>3&&m.length>maxUserNameLength){m=m.substr(0,maxUserNameLength-3)+"..."
}var s=m;if(o!=""){s=""+s+""
}l=l.replace("[user]",s);
l=l.replace("[image]",q);
l=l.replace("[#]",p);
l=l.replace("[count]",k.count);
if(k.count!=1){l=l.replace("[post]","bài viết")
}else{l=l.replace("[post]","bài viết")
}return l}var blauthors={};
var blndxbase=1;
function showAuthors(i){for(var p=0;
p<i.feed.entry.length;
p++){var m=i.feed.entry[p];
var o="";if(m.author[0].uri&&m.author[0].uri.$t!=""){o=m.author[0].uri.$t
}var n=m.author[0].name.$t;
if(blauthors[n]){blauthors[n].count++
}else{var q=new Object();
q.author=m.author[0];
q.count=1;blauthors[n]=q
}}if(i.feed.entry.length==500){blndxbase+=500;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+"/feeds/posts/default?redirect=false&max-results=500&start-index="+blndxbase+'&alt=json-in-script&callback=showAuthors"><\/script>');
return}var r=[];
for(var l in blauthors){r.push([l,blauthors[l]])
}r.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
});document.write('<div class="blog-author">');
for(var p=0;
p<r.length;
p++){var k=r[p][1];
document.write('<div class="author-line">');
document.write(replaceAuthorVars(txtAuthorLine,k,p+1));
document.write("</div>")
}document.write("</div>")
}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/default?redirect=false&max-results=500&alt=json-in-script&callback=showAuthors"><\/script>');
  //]]>
</script>
Tại đoạn mã trên các bạn có thể thay thế các thuộc tính sau:
  • maxUserNameLength: Số ký tự tối ta lấy ra tên tác giả.
  • txtAuthorLine: Dòng chữ hiện ra tên tác giả trong đó [image] là hình ảnh, [user] là tên tác giả, [count] là số lượng bài viết.
  • sizeAvatar: Kích cỡ ảnh đại diện của tác giả.
  • cropAvatar: Cắt ảnh đại diện ra đúng kích thước (2 lựa chọn true hoặc false)
  • urlNoAvatar: Địa chỉ ảnh đại diện mặc định cho tác giả không có ảnh.
Sau khi tinh chỉnh thành công thì lưu lại widget và tận hưởng thành quả.

Lời kết

Đây có thể nói là một trong những widget khá hay mà mình tìm được, nó được viết hoàn toàn bằng Javascript, hoạt động nhanh lẹ, kèm những lợi ích mà minh đã nói ở đầu bài thì không còn gì bằng nữa. Nếu ai có thắc mắc gì về đoạn mã này thì hãy để lại lời nhắn cho mình ờ dưới.

2 bình luận

  1. avatar says

    lúc 08:01 27 tháng 8, 2014

    Chào bạn.
    Mình muốn thêm ô tác giả giống như :
    " Lâm Kiều

    Là một Freelance Blogger thường viết về các lĩnh vực có liên quan đến tin học, giải trí và đặc biệt là thích chia sẻ kinh nghiệm cá nhân của riêng mình."

    Thì phải làm thế nào.
    nếu bạn có bài viết thì cho mình xin link nhé.

  2. avatar says

    lúc 16:21 4 tháng 5, 2016

    Chào bạn, cho mình hỏi lieu mình có thể add them nut link facebook hay google plus đến TK của tác giả đó bên cạnh được ko? Nếu có thể thì bạn chỉ giúp mình cách làm nhé. Cảm ơn!

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.