[Blogspot] - Tiện ích Recent Posts có ảnh thumbnail cho Blogspot

Tiện ích Recent Posts với hình ảnh thu nhỏ - đây là tiện ích mà mình không dùng vì muốn xem bài viết mới mình thường có thói quen quay về trang chủ. Tiện ích được viết ra chỉ cho đủ bộ tiện ích về Bài đăng bởi cũng không tìm được thêm tính năng nào được coi là mới.

Ngoài ra bạn còn có thể tham khảo các bài viết về Recent Posts sau đây để chọn cho mình Widget thích hợp nhất:

Widget Recent Posts - bài viết mới nhất dạng tin tức cho Blogspot

Recent Posts - bài viết mới nhất có ảnh cho Blogspot

Tiện ích Recent Posts có thumbnail cho Blogspot

Có chăng là tính năng nhận biết bài viết nào đã tắt Nhận xét, hình ảnh hỗ trợ cho cả video trên Youtube và gần đây mình thấy ảnh ở Photobucket cũng được lưu trữ, số lượng bài viết được tải về từ feed lấy đủ cho số bài viết bạn muốn hiển thị để tránh dư thừa.

Demo ngay trên blog: khoacongnghethongtin.blogspot.com

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Nếu đã áp dụng tiện ích Widget bài viết ngẫu nhiên có hình ảnh cho blogspot thì bạn bỏ qua bước này và thay #random-posts img{ thành #random-posts img,#recent-posts img{ cho đồng bộ khi muốn chỉnh sửa.

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Recent Posts.
Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.

<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_info='yes';
var rcp_comment='Nhận xét';
var rcp_disable='Tắt Nhận xét';
function recent_posts(json){var dw='';dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihm74ZN7CcrZuk6i0CKpSsnlgag-vmgjtQV6TDdS14UqQkWe5Crg4J7JYHuNZxethKkju-qhr8KYqIEb2vjfZ6f_QCzcJ2oXwLV_POmszhG_ULxJVa6dj7oWXHLsGlb3mH-BgtFKue71YU/"}}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>'); </script>
</div>

Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác. ví dụ : var rcp_info='no'