[13]
Thủ thuật: Thêm tiện ích "Recent comments" cho Blogspot
Nguồn: TDM



Giới thiệu: Hiện nay Blogger đã có chức năng này rồi, nhưng với code này ta sẽ chỉnh sữa được nhiều hơn cho ưng ý và phù hợp với blog. Đặc biệt là cập nhật thay đổi nhanh hơn so với tiện ích của Blogger.


CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script.

Bước 1: Tìm dòng ]]></b:skin>

- Chèn dưới nó đoạn code CSS sau:

/*Thêm tiện ích "Recent comments" (1)*/
/*Tùy chỉnh phần tên người Recent comments */
.recommment-author {
font-size:12px;
margin-top:8px;
font-weight: bold;
}
.recommment-author a{
color:#0F0FAF;
padding-left:0px;
border-bottom:0px dashed #000;
}
.recommment-author a:hover{color:#;}

/* Tùy chỉnh phần tóm tắt nội dung Recent comments */
.re-sumpost {
font:13px Tahoma; 
margin-bottom:20px; 
border-left:0px solid #000; 
border-bottom:1px dashed #000; 
padding:2px; 
color:#;
line-height: 15px;
}
.re-sumpost a{color:#3366ff;}
.re-sumpost a:hover{color:#339966;}

/* Tùy chỉnh phần ngày Recent comments */
.date-commment{
font-size:9px;
color:#339966; 
padding:2px;
border-left:0px solid #000; 
}

Có thể tùy chỉnh thêm các class trong đoạn code trên như đường viền, màu nền,...
Và chỉnh canh lề, màu chữ, kích cỡ, font,... cho phù hợp với blog bạn.

Bước 2: Save template. (Lưu mẫu)


Bước 3: Thêm widget

Chọn: Bố cục > Thêm tiện ích

- Chọn thêm tiện ích HTML/Javascript và dán đoạn mã sau vào:

<!-- Thêm tiện ích "Recent comments" (2) -->
<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; // Số từ tóm tắt nội dung comment
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://caytamgui.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>

Thay địa chỉ http://caytamgui.blogspot.com thành địa chỉ web của bạn.

Bước 4: Save. (Lưu)

THE END.