Friday, February 18, 2011

Tiện ích Recent Posts Today và Recent Posts Yesterday

Theo yêu cầu của bạn Blogphantich.com về tiện ích Posts Today và Posts Yesterday giống trang http://www.calculatedriskblog.com//. Tôi “ngâm cứu” và viết bài này để hướng dẫn tạo tiện ích gọi là Bài viết mới nhất hôm nay và hôm qua (Recent Posts Today - Recent Posts Yesterday). Script từ tiện ích này được tùy biến từ tiện ích Bài viết mới nhất dạng cơ bản mà chúng ta biết.

Bạn có thể xem Demo dưới đây.


Recent Posts Today



Recent Posts Yesterday



Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Đăng nhập Blogger, vào Design >> Page Elements. Trên phần sidebar thêm một tiện ích HTML/Javascript rồi đặt toàn bộ đoạn code dưới đây vào phần nội dung của tiện ích và bỏ trống tiêu đề tiện ích.

<script type="text/javascript">
//<![CDATA[
function show2dayrecentposts(json) {

var entry0 = json.feed.entry[0];
var postdate0 = entry0.published.$t;
var cdyear0 = postdate0.substring(0,4);
var cdmonth0 = postdate0.substring(5,7);
var cdday0 = postdate0.substring(8,10);
var cdhour0 = postdate0.substring(11,13);
var cdmin0 = postdate0.substring(14,16);

var poststoday = 1;
var postsyesterday = 0;
for (var j = 1; j < 24; j++) {
var entry1 = json.feed.entry[j];
var postdate1 = entry1.published.$t;
var cdday1 = postdate1.substring(8,10);
if (cdday0 == cdday1) {
poststoday++;
}
else {
if (postsyesterday == 0) var cdday2 = cdday1;
if (cdday1 == cdday2) {
postsyesterday++;
}
}
}
if (showposttoday == true) {
var numend = poststoday;
var numposts = poststoday;
}
else {
var numend = poststoday + postsyesterday;
var numposts = postsyesterday;
}

document.write('<ul>');
for (var l = 0; l < numposts; l++) {
var i = numend - l - 1;
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;

var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var cdhour = postdate.substring(11,13);
var cdmin = postdate.substring(14,16);
var cdampm = "AM";


var _mTime = parseInt(cdhour,10);

if (_mTime > 11) {
cdampm = "PM";
}
if (_mTime > 12) {
_mTime = _mTime - 12;
}

var _hr = _mTime.toString().substr(0, 2);

var postbold = 0;
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll = entry.category[k].term;
if (pll == 'mark') postbold = 1;
}
}

document.write('<li>');

if (postbold == 1) document.write('<font color="red" size="+2"><b>*</b></font>');
document.write(' at ' + _hr + ':' + cdmin + ' ' + cdampm + ' ');

document.write(posttitle);

document.write('</li>');
}
document.write('</ul>');

}
//]]>
</script>

<div class="today-rcposts">
<h2><span style="color:blue;font-size:14px;font-weight:bold">Recent Posts Today</span></h2>
<script type="text/javascript">
var showposttoday = true;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=show2dayrecentposts"></script>
<div class="clear"></div>
<h2><span style="color:brown;font-size:14px;font-weight:bold">Recent Posts Yesterday</span></h2>
<script type="text/javascript">
var showposttoday = false;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=show2dayrecentposts"></script>
</div>

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn. Những phần được đánh dấu màu đỏ là phần bạn có thể tùy chỉnh được theo ý thích.

Nếu bạn muốn tiện ích chia thành hai cột, với phần bài viết mới nhất hôm nay nằm bên trái thì thay phần code nằm giữa 2 thẻ <div class="today-rcposts">, </div> bằng đoạn code dưới đây.

<table border=1 bgcolor=#f1f5f6 width=100%><th align="center" width=50%>Posts Today</th><th align="center">Posts Yesterday</th><tr><td>
<script type="text/javascript">
var showposttoday = true;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=show2dayrecentposts"></script></td><td>
<script type="text/javascript">
var showposttoday = false;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=show2dayrecentposts"></script></td></tr></table>

Chúc bạn thành công. :44)

No comments:

Post a Comment