Tiện tích nhận xét mới (Recent Comments) đã không còn xa lạ với hầu hết các blogger. Nhưng đa số các thủ thuật đều có đính kèm link về trang gốc hoặc code bị mã hóa và mình thì vốn không thích như vậy. Cũng chính vì vậy hôm nay mình hướng dẫn thủ thuật tạo tiện ích nhận xét mới (recent comments) có avatar và cơ bản đầy đủ thông tin. Đặc biệt là không mã hóa code cũng không quảng cáo cho cộng đồng blogger nhà ta.
Bước 1: Đoạn code tiện ích recent comments
Vào mục "Bố Cục (Layout)" → Thêm 1 tiện ích HTML/Java Script và chèn đoạn code bên dưới vào.
<script type='text/javascript'>
//<![CDATA[
var numComments = 5,
avatarSize = 60,
characters = 60,
defaultAvatar = defaultAvatar || "https://googledrive.com/host/0B-PN1SIugzO-OWJCOURKb2ZydVk",
moreLinktext = moreLinktext || " Chi tiết »",
showAvatar = true,
showMorelink = true;
function rccomments(voquocan) {
var commentsHtml;
commentsHtml = '<div class="rccomments"><ul>';
for (var i = 0; i < numComments; i++) {
var commentlink, authorName, authorAvatar, avatarClass;
if (i == voquocan.feed.entry.length) break;
commentsHtml += "<li>";
var entry = voquocan.feed.entry[i];
for (var l = 0; l < entry.link.length; l++) {
if (entry.link[l].rel == 'alternate') {
commentlink = entry.link[l].href
}
}
for (var a = 0; a < entry.author.length; a++) {
authorName = entry.author[a].name.$t;
authorAvatar = entry.author[a].gd$image.src
}
if (authorAvatar.indexOf("/s1600/") != -1) {
authorAvatar = authorAvatar.replace("/s1600/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("/s220/") != -1) {
authorAvatar = authorAvatar.replace("/s220/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("/s512-c/") != -1 && authorAvatar.indexOf("http:") != 0) {
authorAvatar = "http:" + authorAvatar.replace("/s512-c/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("blogblog.com/img/b16-rounded.gif") != -1) {
authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNnyTfaPzFSDqmaNJ7GyH1be_V382whxmT4DQ3j2OIqcoSbbrRbwfSfaqMWmZoaQaFe9NdVDvFHRwBoMAydBlqZW76GiPtFMeI_188hm6NWwXoJZ9PoqqD0ysfaDB6hcWeWiK7MKNr9Qal/" + avatarSize + "/blogger.png"
} else if (authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif") != -1) {
authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQhvDm1HpOlXId1r4bV8vwhaL8XuFzVHnSZ2X_p8vSchJV9bmP36LXUDCLjFV-tADo9KaGzwqMCzfSLSLE-r_qnJkoyg2l6Ab55xlbUJLbQ04qb_tFJzINvESqRXp-QfdF1LQWtbJ6k1Z7/" + avatarSize + "/openid.png"
} else if (authorAvatar.indexOf("blogblog.com/img/blank.gif") != -1) {
if (defaultAvatar.indexOf("gravatar.com") != -1) {
authorAvatar = defaultAvatar + "&s=" + avatarSize
} else {
authorAvatar = defaultAvatar
}
} else {
authorAvatar = authorAvatar
}
if (showAvatar == true) {
commentsHtml += "<img class=\"rcavatar\" src=\"" + authorAvatar + "\" alt=\"" + authorName + "\" width=\"" + avatarSize + "\" height=\"" + avatarSize + "\"/>"
}
commentsHtml += "<a class=\"rcname\" href=\"" + commentlink + "\">" + authorName + "</a>";
var commHTML = entry.content.$t;
var commBody = commHTML.replace(/(<([^>]+)>)/ig, "");
if (commBody != "" && commBody.length > characters) {
commBody = commBody.substring(0, characters);
commBody += "…";
if (showMorelink == true) {
commBody += "<a class=\"rcmore\" href=\"" + commentlink + "\">" + moreLinktext + "</a>"
}
} else {
commBody = commBody
}
commentsHtml += "<div class=\"rccontent\">" + commBody + "</div>";
commentsHtml += "<div style='clear:both'/></li>"
}
commentsHtml += '</ul></div>';
document.write(commentsHtml)
}
//]]>
</script>
<script type="text/javascript" src="http://thegioiblogs.blogspot.com/feeds/comments/default?alt=json&callback=rccomments"></script>
Sửa đổi thông số:
Trong đoạn code trên mình đã đánh dấu 1 số vị trí màu đỏ là nơi bạn cần chỉnh sửa lại cho phù hợp với website của mình. Cụ thể như sau:
numComments = 5: là số comment được hiển thị ra ngoài.
avatarSize = 60: là kích thước avatar
characters = 60: là số lượng ký tự của nhận xét
https://googledrive.com/host/0B-PN1SIugzO-OWJCOURKb2ZydVk: là avatar mặc định khi người đăng nhận xét không có avatar.
showAvatar = true: là cho phép hiển thị avatar. Nếu không hiển thị thì đổi true thành false
showMorelink = true: là cho phép hiển thị chữ "Chi tiết »" Nếu không hiển thị thì đổi true thành false
thuthuat.voquocan.com: thay bằng địa chỉ trang web của bạn
Bước 2: Về CSS để trang trí tiện ích này:
Vào mục "Mẫu (Template)" → "Chỉnh sửa HTML (Edit HTML)" chèn đoạn css sau vào trước thẻ]]></b:skin>
.rccomments ul li {list-style:none}
img.rcavatar {float:left; margin:5px;}
Bước 3: Vấn đề trang trí tiện ích này.
Như bạn đã thấy ở bước 2 đoạn css mình cung cấp rất ngắn, hầu như chẳng có gì đáng kể để gọi là đẹp. Việc trang trí tiện ích này sao cho bắt mắt và mang phong cách của chính bạn là ở chổ bạn có vận dụng được css hay không.
Và cũng để tiện cho việc trang trí tiện ích này mình đã gán mặc định 1 số class vào thủ thuật trên bao gồm:
.rccomments: là class chứa toàn bộ các comments
.rccomments ul li: là class chứa 1 comment bao gồm avatar, tên, nội dung và dòng chữ chi tiết »
img.rcavatar: là class chứa thuộc tính liên quan đến ảnh avatar.
a.rcname: là class chứa thuộc tính liên quan đến tên của người bình luận
.rccontent: là class chứa thuộc tính của nội dung comment
a.rcmore: là class chứa thuộc tính của dòng chữ chi tiết »
Một số gợi ý để bạn trang trí tiện ích này:
Với avatar bạn có thể thử css border-radius: 50% để tạo avatar hình tròn, dùng border để tạo đường viền cho avatar, dùng box-shadow để tạo bóng đổ cho avatar, dùng padding để tạo khung cho avatar...
Với tên, phần nội dung comment hoặc dòng chữ chi tiết ta có thể dùng thuộc tính color để đổi màu chữ cho phù hợp với blog của mình...
Cứ thử các css vào đó biết đâu có cái mình thích thì sao :)
Lưu ý: Tiện ích này chỉ hoạt động với hệ thống comment truyền thống của blogger thôi, còn nếu bạn sử dụng comment từ hệ thống google + hoặc facebook comment thì chịu thua nha.
Chúc bạn thành công!
No comments :