Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger

by Unknown 10:36:00 AM 0 nhận xét

Mặc định Blogger không có sẵn widget Bài Viết Mới Nhất (Recent Post) nhưng chỉ cần vài thao tác đơn giản sau bạn sẻ tạo ra một widget có chức năng tương tự.

1 Đầu tiên bạn đăng nhập Blogger, chọn Layout, click Add Widget tại vị trí bạn muốn đặt widget, trong bài viết này là cột phải hoặc trái (style được viết cho dạng cột).
Khi cửa sổ Widget mở ra bạn chọn HTML/Javascript

 Trong khung nhập nội dung bạn copy đoạn code dưới đây là paste vào:

<script style="text/javascript" src="http://yourjavascript.com/2151392498/recentposts.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

Trong đó, bạn có thể cài đặt các thông số sau theo ý mình:

- posts_no là số bài được hiển thị
- showpoststhumbs là cài đặt ảnh đại diện bài viết ( true là có, false là không)
- readmorelink là cài đặt link xem thêm ( true là có, false là không)
- showcommentslink là cài đặt link comment ( true là có, false là không)
- posts_date là cài đặt thời gian bài viết  ( true là có, false là không)
- post_summary là cài đặt đoạn mô tả ngắn trích từ nội dung bài viết ( true là có, false là không)
- summary_chars là độ dài của mô tả, tính bằng số kí tự

2 Bạn vào mục Template chọn Edit HTML, copy đoạn code dưới đây paste vào trước thẻ </head> trong template:

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Bạn có thể chỉnh sửa lại style và font chữ theo ý mình, trong style này sử dụng font Oswald của Google Fonts.
Các bạn nhấn Lưu và xem kết quả nhé!

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

Xem thêm:
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger