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

marqueercpTiệ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 12rồ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
(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 …)
(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 …)
(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 …)
(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 …)
(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 …)
(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 …)
(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 …)
(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 …)
(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 …)
(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 …)

b_abajob_arriba




<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.
Copyright 2009 Simplex Celebs All rights reserved Designed by SimplexDesign