[Serial thủ thuật blog 1]Thêm tiện ích “Recent comments” cho Blogspot
56 thủ thuật blogspot dành cho blogger
Cách đến nhanh bài viết:
· Nhấp chuột trái vào mục muốn xem.
· Về đầu trang của Serial gồm 56 thủ thuật, nhấn nút
HomeSerial – Serial Thứ 1
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(hoặc Read more... </a>');
document.write('</div>');}
document.write('');
}
document.write('');
}
</script>
<script src="http://www.chemistrystudy.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
