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.


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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVVubNYsZi0zLzuzjzbvMdIIcVUwNdiWyeQktGMBfdyuO1vbX5cvEoMkVb9TVzLoCo9ox3h3SGGFT5mIAGO7ME-6c_efgXzxVIKaXNkgGk6c0iQps11mfB5Bk1ShfaxN5lsXMKD00Mtw/"+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.