[Tips] Recent post 3 cột với thumbnail cho blogspot

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>
// 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>

Ở đâ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ủ.

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ủ Đề