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

 

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.

Thủ thuật blog: Thêm tiện ích "Recent comments" cho Blogspot




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

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" (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.