Tiện ích Nhận xét mới nhất có icon

Tiện ích Nhận xét mới nhất có icon (Recent Comments with Icons) ban đầu do Anh Võ (trước là Admin của Blog vietwebguide.com) phát triển, về sau được blogger Fan Dung phát triển thêm. Kiểu tiện ích này hiện nay được cộng đồng Blogger Việt sử dụng khá phổ biến. Đặc trưng của tiện ích này là hiển thị các nhận xét mới nhất có icon gồm icon của Admin, icon cho người bình luận có tài khoản Blogger, người bình luận với OpenID và người bình luận là Nặc danh (Anonymous).

Sau khi nghiên cứu tiện ích này, tôi có một chút điều chỉnh để cho tiện ích này trở nên đẹp hơn.

Bạn có thể xem Demo dưới đây.

Nhận xét mới nhất

Để cài đặt tiện ích này, trước tiên bạn cần chuẩn bị một số điều kiện sau đây. Thứ nhất là BlogID của bạn, nó chính là chuỗi số trên công cụ trình duyệt khi bạn đăng nhập Blogger ở chế độ chỉnh sửa Template. Thứ hai là Blogger Profile ID của bạn, nó là chuỗi số trên công cụ trình duyệt khi bạn xem hồ sơ Blogger của bạn (ví dụ: http://www.blogger.com/profile/08632189195057782511).

Nào, chúng ta cùng cài đặt nhé. Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích HTML/JavaScript và đặt đoạn code dưới đây vào phần nội dung tiện ích.

<style type="text/css">
.rcmstyle {padding:3px 0 5px;border-bottom:1px #bbbbbb dotted}
.rcmstyle:hover {background: #A0CFEC}
.rcmstyle a {text-decoration:none}
.rcmstyle a:hover {text-decoration:underline;color: #667C26}
</style>
<script type="text/javascript">
var cm_mode = "icon"; // Bạn hãy xóa từ icon nếu k muốn hiển thị icon
var cm_num = 7; // Số nhận xét
var cm_desc = 100; // Số ký tự thể hiện độ dài nhận xét
var blogID = "5730565790137789925"; // Bạn thay ID cho blog của bạn
var homepage = "http://huynh-nhat-ha.blogspot.com"; // Bạn cần thay tên blogspot

var cm_icon = new Array();
cm_icon['admin'] = "URL_icon_Admin"; // Bạn cần thay URL_icon_của bạn
cm_icon['blogger'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/blogger.gif";
cm_icon['openid'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/openid.gif";
cm_icon['livej'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/lj.gif";
cm_icon['wp'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/wp.gif";
cm_icon['typekey'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/typkey.gif";
cm_icon['aim'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/aim.gif";
cm_icon['anon'] = "http://sites.google.com/site/ngonngulaptrinhvn/files/anon.gif";
</script>
<script type="text/javascript">
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function showRComments(json){
var entry = json.feed.entry;
var str = "<ul id=\"rcommentwg\">";
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
for(var i=0; i < cm_num; i++){
str += "<li class=\"rcmstyle\">" + "<a href='" + entry[i].link[2].href + "'>" + entry[i].author[0].name.$t+"</a>";
var pdate = entry[i].published.$t;
var m = parseInt(pdate.substring(5,7));
for(var j=0; j<month.length;j++){
if(m==month[j]){
m = month2[j]; break;
}
}
str += ", <i><a href='" + entry[i].link[2].href + "'>" + pdate.substring(8,10) + "-" + pdate.substring(5,7) + "-" + pdate.substring(0,4)+"</a></i>";

str += "<br/> " + removeHtmlTag(entry[i].summary.$t,cm_desc) + "</li>";
}
str = str + "</ul>";
document.write(str);
}

function showRCommentsThumb(json){
var entry = json.feed.entry;
var str = "<div id=\"rcommentwg\">";
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
for(var i=0; i < cm_num; i++){
var iconUrl = entry[i].author[0].uri;
var iconT = "";
if(iconUrl != undefined) {
if(iconUrl.$t.match("00819429141342166010")) { iconT = cm_icon['admin'] ;}
else if(iconUrl.$t.match("blogger.com")) { iconT = cm_icon['blogger'] ;}
else if(iconUrl.$t.match("openid.net")) { iconT = cm_icon['openid'] ;}
else if(iconUrl.$t.match("livejournal.com")) { iconT = cm_icon['livej'] ;}
else if(iconUrl.$t.match("wordpress.com")) { iconT = cm_icon['wp'] ;}
else if(iconUrl.$t.match("typekey.com")) { iconT = cm_icon['typekey'] ;}
else if(iconUrl.$t.match("aol.com")) { iconT = cm_icon['aim'] ;}
else { iconT = cm_icon['anon'] ;}
} else { iconT = cm_icon['anon'] ;}

str += "<div class=\"rcmstyle\"><img align=\"top\" src=\"" + iconT + "\" />&nbsp;<a href='" + entry[i].link[2].href + "'>" + entry[i].author[0].name.$t+"</a>";
var pdate = entry[i].published.$t;
var m = parseInt(pdate.substring(5,7));
for(var j=0; j<month.length;j++){
if(m==month[j]){
m = month2[j]; break;
}
}
str += ", <i><a href='" + entry[i].link[2].href + "'>"+ pdate.substring(11,16) + "-" + pdate.substring(8,10) + "/" + pdate.substring(5,7) + "/" + pdate.substring(2,4)+"</a></i>";

str += "<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + removeHtmlTag(entry[i].summary.$t,cm_desc) + "</div>";
}
str = str + "</div>";
document.write(str);
}

if(cm_mode == "icon") {
document.write("<script type=\"text/javascript\" src=\""+homepage+"/feeds/comments/summary?max-results="+cm_num+"&alt=json-in-script&callback=showRCommentsThumb\"><\/script>");
}

else {
document.write("<script type=\"text/javascript\" src=\""+homepage+"/feeds/comments/summary?max-results="+cm_num+"&alt=json-in-script&callback=showRComments\"><\/script>");
}
</script>
<div class='clear'></div>

Trong đoạn code trên, bạn cần thay BlogID và thay chuỗi số 00819429141342166010 bằng ID cho Blogger Profile của bạn. Ngoài ra cần thay tên blogspot của bạn và URL icon đại diện cho bạn là tác giả blog (Ngoài ra bạn nên download các icon về rồi upload lên host của bạn để xài riêng, tránh hạn chế băng thông do dùng chung code thủ thuật). Sau đó Lưu tiện ích là OK.