Tiện ích bài đăng gần đây(Recent Post) chuẩn cho Blogspot

VIEW:

BÀI LIÊN QUAN

Tiện ích bài đăng gần đây cho Blogger. Bạn muốn blog/ website trong bắt mắt thu hút người đọc thì các bạn nên sử dụng tiện ích này vừa giúp cho người đọc nắm bắt bài bạn mới viết, vừa giúp tăng số lượng người xem blog của bạn.

 Bắt đầu thôi!!

Bước 1: Vào Blogger dưới quyền admin, vào Bố cục, thêm tiện ích HTML/Javascrip là vị trí bạn muốn đặt tiện ích, lưu ý lên đặt ở thanh sidebar
Bước 2: Copy đoạn code dưới đây vào tiện ích, lưu lại và thưởng thức

thangbme.com

<h2><i class="fa fa-rss"></i> Gần Đây</h2>
<script style="text/javascript"  src="http://makingdifferent.github.io/blogger-widgets/recent-posts-widget2.js"></script>
<script style="text/javascript">
var posts_no = 7;
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"></script>
<a style="font-size: 15px; color: #000; float: right;background: #e7e8e9;"   href="http://adf.ly/1ebGLQ" rel="dofollow">Recent Posts Design</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px  -5px 0px 0px; border-radius: 100%; padding:1px;background: #fff}
.recent-posts-container {font-family: Time New Roman;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px  0px;padding:0px;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff; padding: 0px }
ul.recent-posts-container li:nth-child(1n+0) {background: #FF6600; width: 100%;padding: 1px;margin: 6px 0px 0px 0px;}
ul.recent-posts-container li:nth-child(2n+0) {background: #FF9900; width: 100%;padding: 1px;margin: 6px 0px 0px 0px;}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFCC00; width: 100%;padding: 1px;margin: 6px 0px 0px 0px;}
ul.recent-posts-container li:nth-child(4n+0) {background: #FFFF66; width: 100%;padding: 1px;margin: 6px 0px 0px 0px;}
ul.recent-posts-container li:nth-child(5n+0) {background: #99ff33; width: 100%;padding: 1px;margin: 6px 0px 0px 0px;}
ul.recent-posts-container li:nth-child(6n+0) {background: #CCFF00; width: 100%;padding: 1px;margin: 6px 0px 0px 0px;}
ul.recent-posts-container li:nth-child(7n+0) {background: #CCFF66; width: 100%;padding: 1px;margin: 6px 0px 0px 0px;}
ul.recent-posts-container li {padding:15px 4px;min-height:50px; list-style-type: none; color: #777;}
.recent-posts-container a { text-decoration:none;padding: 0px }
.recent-posts-container a:hover { text-decoration:underline;color: #000;font-size:16px}
.post-date {color:#000; font-size: 15px; }
.recent-post-title a {font-size: 14px;color: #000; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Chú ý: thay phần màu đỏ thành những phần hợp với blog của bạn

Chúc các bạn thành công!!Nếu có gì thắc mắc hãy để lại comment cho tôi

Xem thêm: Thủ thuật tạo chuyên mục cho trang chủ blog