Gần đây có một người hỏi về tiện ích bài đăng mới nhất cho Blogger, trước đây mình cũng đã chia sẻ tiện ích này rồi, nhưng có vẻ ít chức năng quá thế nên hôm qua sau một thời gian tìm kiếm thì mình đã tìm ra một tiện ích bài đăng mới nhất khá nhiều tùy chỉnh, mình có chỉnh sửa lại cấu trúc mặc định của nó và chia sẽ lại đây cho mọi người cùng sử dụng.
Sau khi mình tùy chỉnh lại một số thứ thì thì tiện ích này tạm có chức năng hầu khá tương tự với tiện ích bài viết liên quan mà mình có chia sẻ trước đây, tức là có thêm tùy chọn hiển thị số ngày đăng và nhận xét cũng như vài thứ lặt vặt nhỏ nữa. Bạn nào muốn xem demo thì truy cập vào đây: http://kslflatly.blogspot.com
Tiện ích bài đăng mới nhất nhiều tùy chỉnh cho Blogger
Đăng nhập vào Blogger và tìm đến phần Bố cục của blog bạn.
Thêm một tiện ích HTML mới và thêm đoạn mã sau đây vào
<style type='text/css'>
img.recent_thumb {padding-right:0.4em;width:72px;height:72px;border:0;
float:left;margin: 0 5px 5px 0;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
</style>
<script style='text/javascript'>
function showrecentpostswiththumbs(json) {
document.write('<ul class="recent_posts_with_thumbs">');
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 == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch (error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'http://www.webaholic.co.in/other/no-image.jpg'
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
document.write('<li class="clearfix">');
if (showpostthumbnails == true) document.write('<img class="recent_thumb" src="' + thumburl + '"/>');
document.write('<b><a href="' + posturl + '" target ="_top">' + posttitle + '</a></b><br>');
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, "");
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<div>');
document.write(postcontent);
document.write('</div>')
} else {
document.write('<div>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</div>')
}
}
var towrite = '';
var flag = 0;
document.write('<br><span>');
if (showpostdate == true) {
towrite = towrite + cdday + '/' + cdmonth + '/' + cdyear;
flag = 1
}
if (showcommentnum == true) {
if (flag == 1) {
towrite = towrite + ' - '
}
if (commenttext == '1 ' + rcp_comment) commenttext = '1 ' + rcp_comment;
if (commenttext == '0 ' + rcp_comment) commenttext = '0 ' + rcp_comment;
commenttext = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
towrite = towrite + commenttext;
flag = 1
}
if (displaymore == true) {
if (flag == 1) towrite = towrite + ' | ';
towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top">' + rcp_readmore + '</a>';
flag = 1
}
document.write(towrite);
document.write('</span></li>');
if (displayseparator == true)
if (i != (numposts - 1)) document.write('<hr size=0.5>')
}
document.write('</ul>')
}
</script>
<script style='text/javascript'>
var rcp_comment = 'Nhận xét';
var rcp_readmore = 'Đọc tiếp';
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 150;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
sau khi chèn bạn hãy tùy chỉnh lại theo ý của bạn với:
- rcp_comment, rcp_readmore: đơn giản chỉ là đoạn chữ thay thế cho comment và readmore
- numpost: số lượng bài viết.
- showpostthumbnails: ẩn hiện ảnh thumbnail.
- displaymore: ẩn hiện nút readmore.
- displayseparator: ẩn hiện đường phân cách hr giữa mỗi bài.
- showpostdate: ẩn hiện ngày đăng bài.
- showpostsummary: ẩn hiện đoạn trích từ bài viết.
- numchars: số lượng ký tự lấy ra cho đoạn trích dẫn.
ngoại trừ 2 đoạn văn bản thay thế cho comment và readmore thì các tùy chỉnh khác sẽ có 2 lựa chọn với true (đúng) và false (sai). Ngoài ra bạn có thể tự tùy chỉnh lại phần css để nó trông đẹp hơn rồi lưu lại.
Lời kết
Tiện ích bài đăng mới nhất là một trong những tiện ích khá hay, như mình đã nói ở "bài viết mới nhất dạng hình ảnh cho Blogger", khách truy cập của chúng ta xuất phát hầu hết ở các công cụ tìm kiếm nên nếu chúng ta thêm những tiện ích như thế này sẽ giúp cho khách truy cập biết được những thứ gì mới nhất trên website của chúng ta, từ đó khách sẽ ở lại lâu hơn trên website và dễ dàng có cơ hội kiếm tiền được nhiều hơn nếu bạn đang bán quảng cáo. Mọi thắc mắc về tiện ích này cứ tha hồ - thoải mái để lại nhận xét phía dưới nhé!
0 nhận xét:
Đăng nhận xét