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

Nguồn:Suu tam

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 Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

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

- Chèn trên nó đoạn code CSS sau:

/*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

Design (Thiết kế) > Page Elements (Chỉnh sữa trang) > Add a Gadget (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" cho Blogspot -->
<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://chiase-vanthuc.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>