[Tips] - Widget bình luận (comments) mới cho blogspot

Comments hay bình luận là những lời góp ý của bạn đọc về blog của mình, tạo widget comments cho blogspot giúp admin nhanh chóng nắm bắt và phản hồi ý kiến bạn đọc, rất hữu ích cho những blog tin tức hay những blog có lượt view cao, giúp admin đỡ nhọc nhằng hơn.

Cách thêm widget comments (bình luận) mới cho blogspot

1. Đăng nhập Blogger

Các bạn đăng nhập vào phần quản lý Blog > Bố cục > Thêm tiện ích HTML Javascript

2. Thiết lập widget

Widget này thường được đặt ở sitebar nên các bạn tạo tiện ích ở sidebar, thêm tiện ích thì một hộp thoại sẽ hiện ra, phần title thì các bạn đặc tùy ý có thể là bình luận mới, hay ý kiến khách hàng gì đấy, và bên dưới thì dán đoạn code sau :

<div style="padding:5px;">
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 8,
showAvatar = true,
avatarSize = 50,
roundAvatar = true,
characters = 50,
showMorelink = false,
moreLinktext = "More &#187;",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var numComments = numComments || 5,
avatarSize = avatarSize || 60,
characters = characters || 40,
defaultAvatar = defaultAvatar || "http://www.gravatar.com/avatar/?d=mm",
moreLinktext = moreLinktext || " More &raquo;",
showAvatar = (typeof showAvatar === 'undefined') ? true: showAvatar,
showMorelink = (typeof showMorelink === 'undefined') ? false: showMorelink,
roundAvatar = (typeof roundAvatar === 'undefined') ? true: roundAvatar,
hideCredits = (typeof hideCredits === 'undefined') ? false: roundAvatar;
function w2b_recent_comments(w2b) {
var commentsHtml;
commentsHtml = '<ul class="w2b_recent_comments">';
for (var i = 0; i < numComments; i++) {
var commentlink, authorName, authorAvatar, avatarClass;
if (i == w2b.feed.entry.length) break;
commentsHtml += "<li>";
var entry = w2b.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/AVvXsEh7Dgz3TzhYZr0DQYq4eOb5dWXEwADZRdFkgr3HFXBbRAY7v-_5LNKnBbNf5UpzIZ5xUs5qXHRIQ1LBiYBltX55tUfu2Hy0LimEHj68NUnCd7LjAxyCe8UqVmG4IzOQAghjQeRwCkYjc_QM/" + avatarSize + "/ancplayer.png"
} else if (authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif") != -1) {
authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8Wyb6y8Q7rijVBpgYbRBPHD60kAV3mstkm5uANDTfavbwiSl9hDXpROtdqqhEwPYiZ0GJR_TbOzlxdJrIXVLb69HkYeMpFB96RikvS9f2RF3hu9CC4wRLIhUa4iO-IgWOvObMgsy79me/" + avatarSize + "/ancplayer.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) {
if (roundAvatar == true) {
avatarClass = "avatarRound"
} else {
avatarClass = ""
}
commentsHtml += "<div class=\"avatarImage " + avatarClass + "\"><img class=\"" + avatarClass + "\" src=\"" + authorAvatar + "\" alt=\"" + authorName + "\" width=\"" + avatarSize + "\" height=\"" + avatarSize + "\"/></div>"
}
commentsHtml += "<a 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 += "&hellip;";
if (showMorelink == true) {
commBody += "<a href=\"" + commentlink + "\">" + moreLinktext + "</a>"
}
} else {
commBody = commBody
}
commentsHtml += "<span>" + commBody + "</span>";
commentsHtml += "</li>"
}
commentsHtml += '</ul>';
document.write(commentsHtml)
}
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=10"></script></div>

Đấy như thế là đã xong rồi, bay giờ chỉ việc lưu tiện ích widget lại và kiểm tra thành quả thôi. Chúc các bạn thành công. 

Bài Viết Cùng Chủ Đề

• [Tips] - Bạn đã có định hướng seo cho mình chưa?Định hướng seo hay còn gọi là Chiến Lượt SEO, có nghĩa là những dự định của bạn khi bắt đầu làm seo blogpsot hay seo mộ ...
• Auto readmore 3 column không dùng js cho blogspotTiếp tục share mẫu auto readmore không dùng js (javascripts) cho các bạn muốn blog load nhanh nhưng vẫn đẹp. Hôm bữa mì ...
• Recent Post Widget For Blogspot chuyên nghiệpRecent post là widget trình diễn bài viết theo label tùy chỉnh của nhà thiết kế, nếu bạn có một label (nhãn) muốn nằm t ...
• Cách để bạn bắt đầu với một blog miễn phíTôi rất vui mừng khi nghe điều này mà bạn đang bắt đầu blog của riêng bạn nhưng không may, bạn không biết cách để bạn b ...
• [Tips] - Share templates blogspot đầy đủ thành phầnMấy ngày hôm nay có nhiều bạn là newbi muốn tập rip blogspot nên xin mình mẫu templates blogspot  trắng đầy đủ thành ph ...