Recent Post có thumbnail cho Blogger

Recent Post ( Bài đăng mới nhất ) là tiện ích giúp bạn thông báo tới người đọc những bài viết mới nhất trên Blogger của mình. Cũng giống như Related Post thì tiện ích Recent Post rất cần thiết đối với các Blog, thế nhưng mặc định Blogger lại không hỗ trợ tiện ích này, vô cùng đáng tiếc.

Bài viết này, mình sẽ hướng dẫn các bạn tạo tiện ích Recent Post cho Blogger. Mẫu Recent Post này có đặc điểm là hiển thị thumbnail ( hình thu nhỏ ), thu gọn bài viết, ngày tháng năm...

Recent Post có thumbnail cho Blogger

Bước 1 : Đăng nhập vào Blog => Bố cục ( Layout ) => Thêm tiệc ích HTML/Javascript => Chèn đoạn code dưới đây vào

<script style='text/javascript' src='https://googledrive.com/host/0B8m8ZEdYUIBwakxYaHNHNW1oQ2M/'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Tùy chỉnh : Các bạn để ý đoạn code sau, sửa lại theo ý muốn, true là có, false là không

var numposts : Số bài viết hiển thị
var showpostthumbnails : Hiển thị Thumbnail hay không
var displaymore  : Hiển thị đường dẫn đọc tiếp ( Readmore )
var displayseparator : Không cần quan tâm
var showcommentnum : Hiển thị số lượng comment
var showpostdate : Hiển thị ngày tháng
var showpostsummary : Hiển thị nội dung thu gọn bài viết
var numchars : Số lượng kí tự nội dung thu gọn

Bước 2 : Thêm đoạn code sau vào phía trên để được mẫu tiện ích giống như trong ảnh demo

/* Recent Post Start */
ul.recent_posts_with_thumbs {padding:0;list-style:none;}
li.clearfix {clear:both;padding-bottom:10px;margin-bottom:10px;}
img.recent_thumb {width:72px;height:72px;margin-right:10px;float:left;}
.recent-post-sum {padding:5px 0px;}
/* Recent Post End */

Bước 3 : Save Template lại.

Chúc các bạn thành công