Thủ thuật tiện ích bài viết mới nhất sử dụng maquee

Tiện ích Bài viết mới nhất là một trong những tiện ích cần thiết nhất cho blog của bạn. Có nhiều kiểu tiện ích Bài viết mới nhất và mỗi tiện ích đều có những tính năng riêng. Trước khi quyết định cài đặt lâu dài vào blog của bạn thì bạn nên xem xét tiện ích nào phù hợp với blog của bạn và đặc biệt là tiện ích đó phải thu hút sự chú ý của người đọc.

Tham khảo từ tiện ích Bài viết mới nhất dạng cơ bản (không có hình đại diện), thêm mắm thêm muối rồi gọt đẽo, mài giũa tôi đã cho ra đời một tiện ích mới có tên Tiện ích Bài viết mới nhất chạy marquee (Marquee Recent Posts Widget).

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

Bài viết mới nhất

Hiển thị thời gian tải trang cho blogspot[17/12/2010]

(Huynh Nhat Ha's Blog) -- Hiển thị thời gian tải trang cho blog giúp bạn kiểm tra tốc độ load trang ... (Đọc thêm …)

Tiện ích Bài viết mới nhất có ảnh đại diện[17/12/2010]

(Huynh Nhat Ha's Blog) -- Lấy cảm hứng từ tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts ... (Đọc thêm …)

Tiện ích Bài viết mới nhất có ảnh đại diện đặt cuối bài viết [16/12/2010]

(Huynh Nhat Ha's Blog) -- Tiện ích Bài viết mới nhất giúp người đọc dễ dàng tìm thấy liên kết đến ... (Đọc thêm …)

Tùy biến font chữ hệ tiếng Việt trên Blogger[16/12/2010]

(Huynh Nhat Ha's Blog) -- Bạn mới bắt đầu tìm hiểu Blogger và còn nhiều điều bí ẩn mà bạn chưa hề ... (Đọc thêm …)

Tạo nét riêng khi trình bày code CSS, Javascript và HTML [16/12/2010]

(Huynh Nhat Ha's Blog) -- Nếu blogspot của bạn giới thiệu về thủ thuật blog hay thiết kế web thì sẽ ... (Đọc thêm …)

Tiện ích Về tác giả ở cuối bài viết Blogger[15/12/2010]

(Huynh Nhat Ha's Blog) -- Tiện ích Về tác giả (About the Author widget) đặt ở cuối bài viết Blogger ... (Đọc thêm …)

Tạo liên kết Đặt làm trang chủ cho Blogger[14/12/2010]

(Huynh Nhat Ha's Blog) -- Liên kết “Đặt làm trang chủ” (Set as Homepage) giúp cho người đọc lưu ... (Đọc thêm …)

Tiện ích Bài viết liên quan có phân trang[14/12/2010]

(Huynh Nhat Ha's Blog) -- Lấy cảm hứng từ tiện ích Bài viết liên quan có phân trang từ blog Hỗn ... (Đọc thêm …)

Tiện ích Favicon Link Exchange cho Blogger [14/12/2010]

(Huynh Nhat Ha's Blog) -- Trao đổi liên kết là một trong những cách làm tăng lượng truy cập cho ... (Đọc thêm …)

Tùy biến với tiện ích Bài viết liên quan của Linkwithin [13/12/2010]

(Huynh Nhat Ha's Blog) -- Nói riêng về đề tài tiện ích Bài viết liên quan thôi cũng có nhiều vấn đề ... (Đọc thêm …)

<style type='text/css'>
#marqueeposts {width:300px;margin:0;}
.marqueetitle {margin:5px 0 0 0px; background-color:#dcdcdc; padding:0 0 0 0px; text-align:justify;}
.marqueetitle a {color: #5f9ea0; font-weight:bold;font-family:Arial !important;font-size:12px !important;}
.marqueetitle a:hover {color:#FF9933 !important;text-decoration:none !important;}
.marqueetext {margin:2px 0 10px 0; border-bottom:1px solid #2F363E; padding:0px 0 8px 0; font-size:12px; text-align:justify}
.marqueemore a {color: #a52a2a; font-weight:normal !important;font-family:Arial !important;}
.marqueemore a:hover {text-decoration:none !important;}
.marqueedate {color:#008000}
</style>

<script type="text/javascript">
function showrecentposts(json) {
document.write('<marquee id="marqueeposts" direction="up" width="100%" scrollamount="' + postspeed + '" height="' + postheight + 'px" align="top" onMouseOver="stop()" onMouseOut="start()">');
for (var i = 0; i < numposts; i++) {
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 = "(Đọc thêm …)";
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 monthnames = new Array();
monthnames[1] = "01";
monthnames[2] = "02";
monthnames[3] = "03";
monthnames[4] = "04";
monthnames[5] = "05";
monthnames[6] = "06";
monthnames[7] = "07";
monthnames[8] = "08";
monthnames[9] = "09";
monthnames[10] = "10";
monthnames[11] = "11";
monthnames[12] = "12";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write('<div class="marqueetitle">');
document.write('');
document.write(posttitle);
if (showpostdate == true) {
document.write(' <span class="marqueedate">[' + cdday + '/' + monthnames[parseInt(cdmonth,10)] + '/' + cdyear + ']</span>');
}
document.write('</div><div class="marqueetext">');
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent);
document.write(' <span class="marqueemore">... ' + readmorelink + '</span>');
}
}
document.write('</div>');
}
document.write('</marquee>');
}
</script>

<script type="text/javascript">
var numposts = 7; // số bài viết hiển thị
var showpostdate = true; // ngày đăng, đặt false để ẩn đi
var showpostsummary = true; // phần tóm tắt bài viết
var numchars = 100; // số ký tự phần tóm tắt
var postspeed = 2; // tốc độ chạy marquee
var postheight = 250; // chiều cao bài viết
</script>

<script src="http://chipkool.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

<div style="text-align:center;">
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='down';">
<img src="https://sites.google.com/site/ngonngulaptrinhvn/files/marqueedown.gif"/>
</a>
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='up';">
<img src="https://sites.google.com/site/ngonngulaptrinhvn/files/marqueeup.gif"/>
</a>
</div>

Chú ý ở dòng #marqueeposts {width:300px;margin:0;}, bạn cần đặt width cho marqueeposts bằng hoặc nhỏ hơn width của sidebar; thay chipkool bằng tên blogspot của bạn.

Nếu bạn muốn hiển thị tiện ích này cho một Nhãn (Label) thì cần thay đoạn code

<script src="http://chipkool.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

thành:

<script src="http://chipkool.blogspot.com/feeds/posts/default/-/Tên nhãn?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

Bạn thay chipkool thành blogspot của bạn na.

Chúc bạn thành công>Nhớ ghé thăm weblog mình na.