Tiện ích "Bài đăng gần đây" (Recent Posts) kiểu 1

Các bạn có thể xem trước Tại đây

Để cài đặt tiện ích trên vào blog, các bạn thực hiện như sau:

1. Đăng nhập blog - Bố cục - Nhấp "Thêm tiện ích" ở khung bên cạnh khung bài đăng.

2. Chọn tiện ích "HTML/Javascript". 

3. Nhấp "Open code" ở dưới đây, copy toàn bộ code trong khung hiện ra và dán vào khung "Nội dung" của tiện ích HTML/Javascript. Đặt tên tiêu đề của tiện ích là "Bài đăng gần đây"/"Bài đăng mới nhất" hoặc tên khác tùy ý. 

<center><script style="text/javascript"  src="https://rawgit.com/dovaden2010/blog/master/baidangganday-dvd.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script  src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"   rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;"   href="http://www.windows2it.com/2015/08/them-tien-ich-bai-viet-gan-day-recent-posts-cho-blogspot.html"  rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Arial' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:left;margin: -4px  -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Arial', cursive;   float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px  0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content:  counter(countposts,decimal);counter-increment: countposts;z-index:  2;position:absolute; left: 900px; font-size: 16px;color:  #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%;  margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px;  list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid  #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; width: 286px; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style></center>

*Tùy chỉnh:

· var posts_no = Số bài bạn muốn xuất hiện. Ở đây là 5 bài.
· var showpoststhumbs = Ảnh đại diện; flase: Ẩn và true: Hiện.
· var readmorelink = Hiện chữ “Read more”; flase: Ẩn và true: Hiện.
· var showcommentslink = Hiện số lượng nhận xét; flase: Ẩn và true: Hiện.
· var posts_date = Thời gian đăng bài; flase: Ẩn và true: Hiện.

. Các chữ hoặc số đứng liền sau ký tự # là mã màu sắc các thành phần trong code, bạn có thể thay đổi mã màu tùy ý.

4. Nhấp "Lưu" dưới tiện ích. Kéo - thả tiện ích vào vị trí thích hợp trong khung các tiện ích bên cạnh khung bài đăng.
5. Nhấp "Lưu sắp xếp" phía trên, bên góc phải giao diện của Bố cục.
6. Nhấp "Xem blog" để thưởng thức kết quả.

Trên đây là một kiểu tiện ích "Bài đăng gần đây", các bạn có thể tham khảo thêm một số kiểu khác tại trang web nguồn dưới đây:

https://www.windows2it.com/2015/08/them-tien-ich-bai-viet-gan-day-recent-posts-cho-blogspot.html

Còn dưới đây là trang web mã màu sắc để các bạn tra cứu:

http://mamauhtml-css.hostingaz.vn/