Recent post là bố trí hiển thị bài viết trên từng widget theo một nhãn hoặc toàn bộ vài viết trên blogspot, tiện ích này thường được áp dụng cho các blogspot tin tức với nhiều tiện ích widget ở trang chủ với nhiều chủ đề khác nhau.
Thêm Recent post vào blogspot
1. Đăng nhập blogger
Đăng nhập vào blogger templates chỉnh sửa HTML tìm đến thẻ </head> thêm vào đó đoạn code sau :<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script>Ở đây mình dùng thẻ <b:if cond='data:blog.url == data:blog.homepageUrl'> để tối ưu tất cả code chỉ áp dụng cho trang chủ.
// Blogger Recent Posts Gallery by http://theblogger911.blogspot.com
// Tutorial at http://theblogger911.blogspot.com/2013/09/customizable-recent-post-image-gallery.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function tb911rpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="tb911rp-gallery nopin" title="Get this from theblogger911.blogspot.com">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeVF1c1uEoXutWDR2huHoPldxz883UXVFkmW4FuqzrqPrJhzWE27ulbECvnq-Vqquxk3WAgIwZy3lRdLsuXK9kBO4dcKCw3YnpjeHeK3HbJugSRJp-0jcHiXAzsVF8S7EmlmSArsConO1v/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + tb911rpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + tb911rpg_thumbSize + '" height="' + tb911rpg_thumbSize + '"/>';
var pTitle = tb911rpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<div class="tb911-item">', item, '</div>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>
<style>
/* http://www.khamphablog.com/ Recent Posts Image Gallery CSS Start */
.tb911rp-gallery {padding:10px; clear:both;}
.tb911rp-gallery:after {content: "";display: table;clear: both;}
.tb911rp-gallery .tb911-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.tb911rp-gallery .tb911-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.tb911rp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.tb911rp-gallery a:hover img {background: #ee7e22;}
/* http://www.khamphablog.com/ Recent Posts Image Gallery CSS End */
</style>
</b:if>
Xem thêm : Tối ưu css và js cho blogspot
2. Cài đặt recent post
Bây giờ chỉ cần chèn đoạn code sau ở nơi cần hiển thị
<script>
var tb911rpg_thumbSize = 150;
var tb911rpg_showTitle = true;
</script>
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>
- 150 là kích thướt hình ảnh hiển thị
Đoạn code :
<script src="/feeds/posts/summary?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>
Giúp hiển thị toàn bộ bài viết trên blog nếu bạn muốn hiển thị bài viết theo một nhãn thì thay đoạn code sau :
<script src="/feeds/posts/summary/-/Label?max-results=8&alt=json-in-script&callback=tb911rpGallery"></script>Vậy là xong, lưu lại và kiểm tra thành quả thôi, chúc các bạn thành công.
Bài Viết Cùng Chủ Đề
Tại sao cần phải thiết kế giao diện mobi cho blogspotGiao diện mobi cho blogspot nói chung là một giao diện khi xem blog trên mobi hay các thiết bị di động khác mà blog vẫn ... 
[Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)Tabber widget hay còn gọi là Multi Tab cho blogspot, Là một tiện ích nằm trên widget mà các mẫu blogspot nước ngoài thư ... 
[Tips] - Auto Nofollow link trỏ ra ngoài cho blogpsotĐặt thuộc tính Nofollow cho những link trỏ ra ngoài cho blogspot là một điều cần thiết cho việc seo blogspot, một phần ... 
[Tips] - Cách xóa hoặc ẩn icon chỉnh sửa nhanh cho widgetIcon chỉnh sửa nhanh cho widget là icon dành cho người quản trị blogspot khi muốn chỉnh sửa một widget nào đó thì ở tra ... 
Widget comments mới nhất cho blogspotWidget comments mới là một tiện ích phổ biến giúp bạn quản lý comments hiệu quả cho blogspot, khi có ai đó comments (bì ...
Icon CommentsIcon Comments