Sự Khởi Đầu Mới: Thêm tiện ích "Recent comments" cho Blogspot

Thứ Ba, 11 tháng 9, 2012 -

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:

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:

<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://hahuyhoanglong.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>

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

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

THE END.

Sự Khởi Đầu Mới

Cảm Ơn Các Bạn Đã Ghé Thăm Site hahuyhoanglong

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

0 nhận xét:

Đăng nhận xét

Liên Hệ Email

Recent Posts

Danh Mục Bài Viết!!!

Bài viết yêu Thích