"Thêm tiện ích "Recent comments" cho Blogspot"

(Traidatmui.com) - Có nhiều bạn yêu cầu mình giúp tạo tiện ích "Recent comments" nhưng giờ mới có dịp giới thiệu cho các bạn. Thật ra thủ thuật này mình đã giới thiệu đến các bạn rồi, bằng cách thêm tiện ích này trực tiếp vào blogger tại đây. Nếu bạn thêm trực tiếp như vậy thì bạn sẽ gặp khó khăn trong việc chỉnh sửa, chính vì lý do đó nên mình sẽ giúp các bạn thêm code CSS để dễ dàng hơn trong việc chỉnh sửa tiện ích này.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế 
3. Chọn chỉnh sửa HTML
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

/* Tùy chỉnh phần tên người comment */
.recommment-author {
font-size:12px;
margin-left:5px;
font-weight:bold;}
.recommment-author a{
color:#000;
padding-left:15px;
}
.recommment-author a:hover{color:#3d4349;}

/* Tùy chỉnh phần tóm tắt nội dung bài viết */
.re-sumpost {font-size:12px; color:#000;}
.re-sumpost a{color:#ff0033;}
.re-sumpost a:hover{color:#0000ff;}

/* Tùy chỉnh phần ngày comment */
.date-commment{font-size:11px;color:#396ea3;}

5. Save template lại
6. Trở về phần tử trang thêm 1 HTML/Javascript
7. Thêm vào tiện ích HTML/Javascript code bên dưới

<script style="text/javascript">
function showrecentcomments(json) {
var numcomments = 5; // số comment hiển thị trong tiện ích
var showcommentdate = true; // không muốn hiển thị ngày comment thì thay True thành False
var showposttitle = true; // không muốn hiển thị tiêu đề bài viết thì thay True thành False
var numchars = 100;
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('');
if (showcommentdate == true)
document.write('<div class="recommment-author"><a href="' + alturl + '">' + entry.author[0].name.$t + '</a> said...</div>');
document.write('<div class="date-commment"> On ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ', ' + cdyear + ' ');
if (showposttitle == true) document.write(' on ' + posttitle);
document.write('</div>');
if (comment.length < numchars) {
document.write('<div class="re-sumpost">');
document.write(comment);
document.write('</div>');}
else
{
document.write('<div class="re-sumpost">');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '... <a href="' + alturl + '">[Đọc tiếp...]</a>');
document.write('</div>');}
document.write('');
}
document.write('');
}
</script>
<script src="http://www.traidatmui.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>

» Chỉnh code: Thay link màu xanh trong code (http://www.traidatmui.com) thành địa chỉ blog của bạn.

8. Save tiện ích lại

Chúc bạn thành công