Thôi thì trong lúc làm quen lại với thời tiết sau chuyến đi thay đổi độ cao, xin giới thiệu với mọi người về một tiện ích rất đỗi quen thuộc, đó là tiện ích Nhận xét mới nhất (Listed Recent Comments Widget). Song ở đây bài viết sẽ giới thiệu rõ hơn về cấu trúc JSON và tiện ích này có một đặc tính nổi bật là khi rê trỏ vào tiêu đề nhận xét, sẽ hiển thị tác giả nhận xét đó.
Bạn có thể xem Demo dưới đây.
Nhận xét mới nhất
Để cài đặt tiện ích này, bạn chỉ việc Đăng nhập Blogger, vào Page Elements và đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML.
<style type="text/css">
ul#recent-com-ha li {list-style-type: decimal;/* thay decimal bằng none nếu không muốn list dạng số thứ tự */}
</style>
<script type='text/javascript'>
//<![CDATA[
// Listed Recent Comments Widget by www.huynh-nhat-ha.blogspot.com
var commax = 10; // xác định số nhận xét được hiển thị
var comlength = 60; // xác định độ dài tối đa của tiêu đề nhận xét
function showrecentcomments(json) {
var entry, comurl, comcontent, output;
// lệnh để đọc nhận xét
for (var i=0;i<commax;i++) {
// đọc và giữ dữ liệu
entry = json.feed.entry[i];
// nếu không đủ dữ liệu thì kết thúc
if (i==json.feed.entry.length)break;
// tìm URL của nhận xét
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
comurl=entry.link[k].href;
break;
}
}
// địa chỉ nhận xét như thế này:
// http://huynh-nhat-ha.blogspot.com/2011/03/recent-comments-widget.html#12345678901234567890
// được điều chỉnh lại để tương thích trên Blogger
// http://huynh-nhat-ha.blogspot.com/2011/03/recent-comments-widget.html#comment-12345678901234567890
comurl=comurl.replace("#","#comment-");
// tìm nội dung nhận xét
if ("content" in entry){
comcontent = entry.content.$t;
} else if("summary" in entry) {
comcontent = entry.summary.$t;
} else {
comcontent = "";
}
// chuyển đổi nó thành văn bản thuần túy, nếu cần thì cắt gọn không vượt độ dài tối đa
var re=/<\S[^>]*>/g;
comcontent=comcontent.replace(re,"");
if (comcontent.length>comlength) {
comcontent = comcontent.substring(0,comlength) + " …";
}
// có đủ dữ liệu và hiển thị kết quả dựa trên cấu trúc HTML
output = "<li>";
output += "<a target='_blank' rel='nofollow' title= '"+ entry.author[0].name.$t + "' href='" + comurl + "'>" + comcontent +"</a>";
output += "</li>";
// viết dữ liệu
document.write(output);
}
}
//]]>
</script>
<ul id="recent-com-ha">
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
ul#recent-com-ha li {list-style-type: decimal;/* thay decimal bằng none nếu không muốn list dạng số thứ tự */}
</style>
<script type='text/javascript'>
//<![CDATA[
// Listed Recent Comments Widget by www.huynh-nhat-ha.blogspot.com
var commax = 10; // xác định số nhận xét được hiển thị
var comlength = 60; // xác định độ dài tối đa của tiêu đề nhận xét
function showrecentcomments(json) {
var entry, comurl, comcontent, output;
// lệnh để đọc nhận xét
for (var i=0;i<commax;i++) {
// đọc và giữ dữ liệu
entry = json.feed.entry[i];
// nếu không đủ dữ liệu thì kết thúc
if (i==json.feed.entry.length)break;
// tìm URL của nhận xét
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
comurl=entry.link[k].href;
break;
}
}
// địa chỉ nhận xét như thế này:
// http://huynh-nhat-ha.blogspot.com/2011/03/recent-comments-widget.html#12345678901234567890
// được điều chỉnh lại để tương thích trên Blogger
// http://huynh-nhat-ha.blogspot.com/2011/03/recent-comments-widget.html#comment-12345678901234567890
comurl=comurl.replace("#","#comment-");
// tìm nội dung nhận xét
if ("content" in entry){
comcontent = entry.content.$t;
} else if("summary" in entry) {
comcontent = entry.summary.$t;
} else {
comcontent = "";
}
// chuyển đổi nó thành văn bản thuần túy, nếu cần thì cắt gọn không vượt độ dài tối đa
var re=/<\S[^>]*>/g;
comcontent=comcontent.replace(re,"");
if (comcontent.length>comlength) {
comcontent = comcontent.substring(0,comlength) + " …";
}
// có đủ dữ liệu và hiển thị kết quả dựa trên cấu trúc HTML
output = "<li>";
output += "<a target='_blank' rel='nofollow' title= '"+ entry.author[0].name.$t + "' href='" + comurl + "'>" + comcontent +"</a>";
output += "</li>";
// viết dữ liệu
document.write(output);
}
}
//]]>
</script>
<ul id="recent-com-ha">
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
Bạn nhớ thay huynh-nhat-ha bằng tên blogspot của bạn.
Dựa vào các phần chú thích trong script ở trên, hy vọng bạn sẽ hiểu rõ thêm về JSON được sử dụng nhiều cho các thủ thuật Blogger.
{ 0 comments... read them below or add one }
Post a Comment