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

 MMOzo, 00:28-22/04/11
     cái temp cua em chẳng biết nó code kiểu gì không tìm thấy với lại chỗ viết nhân xét mấy cái dòng...

 Bloggerism, 21:40-21/04/11
     Cảm ơn bạn đã ủng hộ a Hà, chắc a ấy rất vui vì có những người bạn đọc luôn sát cánh với a ấy. Bây giờ...

 Lý Siêu Nhân, 21:19-21/04/11
     Blog bây giờ mới tuyệt vời, mang tính chuyên nghiệp...blog rất gọn gàng và chất lượng...vỗ tay ủng...

 Kệ Sách Nhỏ, 20:25-21/04/11
     HI ! mình đã đặt liên kết của bạn trên trang của mình ! Chúc bạn buổi tối thật vui...

 Kệ Sách Nhỏ, 19:47-21/04/11
     hí hí, cũng chưa có nghĩ tới n...

Để 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.