Tạo ảnh avatar cho comment trong blogger

Ngày này,việc làm đẹp giao diện comment rất quan trọng ,việc tạo avatar xuất hiện khi guest comment làm cho độc giả có hứng hơn khi comment .Điều này làm tăng khả năng khách quay lại thăm blog của bạn.

Bước 1:

Vào “Bố Cục (Layout)”  -> Thêm 1 widget  HTML/Java Script ,chèn đoạn code dưới vào

[accordion state=”closed” color=”gray” title=”CODE” tag=”h4″ ]<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><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/AVvXsEjQJLIfNTVyv3jzIuHZN2e8Xgqf9wSqFzpJroHeqM6ETj7cR1KLhCwHvvskMT4VSyxvS5DXGifMAPN31UCyrQV6u92MI18ejlpM9kzFmnyi0x3AnvgvO2AAVofFl6maYWpJoswz5eR2wXSm/” + avatarSize + “/blogger.png”

} else if (authorAvatar.indexOf(“blogblog.com/img/openid16-rounded.gif”) != -1) {

authorAvatar = “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRei5hrU0-w9dKZ9jmkNOa31FIYYR0mtUAfzm5e1HaLkcCNMru0TBW4MQdvlsZqy1ctGUppcgeGv8gf47QeiWqWCwtNMNalae8VvXe09jTD_gzDjdaYanUWKHwTUN-x00QuwVDBtIeFOPw/” + 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 += “&hellip;”;

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://thuthuatblogspot.com/feeds/comments/default?alt=json&callback=rccomments”></script>[/accordion]

Trong code trên thủ thuật blogspot đánh dấu 01 số vị trí màu đỏ,đó là nơi bạn chỉnh sửa cho phù hợp với blogger của mình.

numComments = 5:  đây là số comment được hiển thị ra ngoài.

avatarSize = 60: đây là size của avatar

characters = 60: đây là số lượng ký tự nhận xét

https://googledrive.com/host/0B-PN1SIugzO-OWJCOURKb2ZydVk: đây là avatar mặc định lúc người đăng nhận xét không có avatar.

showAvatar = true:  cho phép hiển thị avatar. Nếu không cho phép hiển thị thì đổi true thành false

showMorelink = true: cho phép hiển thị chữ “Chi tiết »” Nếu không cần hiển thị thì đổi true thành false

thuthuatblogspot.com: thay bằng địa chỉ trang blogger của bạn

Bước 2:

Vào “Template” –> chọn “Chỉnh sửa HTML (Edit HTML)” và chèn đoạn css sau vào-trước thẻ ]]></b:skin>

(Ctrl F để tìm code dưới)

.rccomments ul li {list-style:none}

img.rcavatar {float:left; margin:5px;}

Vậy là đã xong , bạn có thể f5 để thưởng thức thành quả của mình.

P/S :    Làm đẹp hơn chút nữa :

Bạn có thể sử dụng avatar hình tròn bằng cách thử css border-radius: 50% , dùng border để tạo đường viền avatar, dùng boxshadow để tạo bóng đổ avatar, padding tạo khung avatar

Với tên, nội dung comment hay dòng chữ chi tiết ,ngoài ra có thể dùng thuộc tính color đổi màu chữ phù hợp với blogspot của bạn

Nguồn thuthuatblogspot.com 

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..