Hướng dẫn hiển thị Bài viết mới nhất (Recent Post ) cho Blogger (Blogspot)

Monday, November 2, 2015

Hướng dẫn hiển thị Bài viết mới nhất cho Blogger (Blogspot) bên sidebar có thể tùy chỉnh dễ dàng tiêu đề, ảnh mô tả, số comment, ngày post. Mỗi bài viết mới sẽ tự động cập nhật đầu tiên, tiên ích này giúp khuyến khích người đọc ở lại Blog của bạn lâu hơn và làm tăng cho tỷ lệ Bounce Rate thân thiện bộ máy tìm kiếm.

Hướng dẫn hiển thị Bài viết mới nhất (Recent Post ) cho Blogger (Blogspot)

1- Đăng nhập (login) vào Blogger dashboard
2- Vào Bố cục (Lay out) Thêm tiện ích (Add gadget)
3- Tạo một Widget HTML/Javarscip và Dán Code sau và lưu lại (Save)

3 Code hiển thị Bài viết mới nhất (Recent Post ) cho Blogger (Blogspot)

Style#1



<script style="text/javascript"  src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.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>

<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;"  href="http://helplogger.blogspot.com" rel="nofollow">Recent Posts  Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<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 {position:relative;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>

Style#2



<script style="text/javascript"  src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>

<script style="text/javascript">

var posts_no = 5;

var showpoststhumbs = false;

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: 9px; color: #CECECE; float: right; margin: 5px;"  href="http://helplogger.blogspot.com">Recent Posts Widget</a>

<noscript>Your browser does not support JavaScript!</noscript>

<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:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border:  1px solid #cea5ac; border-radius: 10%;}

.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 {position:relative;padding:5px  0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}

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: 5px; font-size: 16px;color:  #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid  #efefef;}

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover{color: #4DACE3;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}

.recent-post-title { margin: 5px 0px; }

.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}

.recent-posts-details a{ color: #888;}

a.readmorelink {color: #4DACE3;}

</style>

Style#3



<script style="text/javascript"  src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>

<script style="text/javascript">

var posts_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = false;

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>

<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;"   href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html"  rel="nofollow">Recent Posts Widget</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: 3px;background: #fff}

.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px  0px;padding: 0;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: #F49A9A; width: 100%}

ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}

ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}

ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}

ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}

ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}

.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: #444; font-weight: bold;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #222;}

.recent-posts-details {padding: 5px 0px 5px; }

</style>

Trong đó:

posts_no =3; là số lượng bài viết muốn hiển thị.
showpostthumbnails = true; hiển thị ảnh thumbnail nếu không muốn thì thay trute hành false
showcommentslink = false; Nếu muốn hiển thị số comment thì thay flase thành true
posts_date = false; Nếu muốn hiển thị ngày đăng thì thay flase thành true
post_summary = false; Nếu muốn hiển thị mô tả thì thay false thành true
summary_chars = 70; Số ký tự mô tả

Tag : Blog Design, Blog Templates

TopMenu

Banner 728x90