5 kiểu bài viết mới ( Recent Post Widget) đẹp cho blogspot

Có khá nhiều dạng bài viết mới (Recent Post Widget) cho blogger như Recent Post Widget dạng tin tức, Bài viết mới Recent Post slide trượt dọc cho blogspot... Như vậy để tạo  bài viết mới (Recent Post Widget) cho blogger là không hề khó, đầy rẫy các code của các Blogger. Trong bài viết 5 dạng bài viết mới (Recent Post Widget) cho blogger chia sẻ cùng các Blogger nhiều dạng đẹp. Nguồn lấy từ Helplogger.

5 dạng bài viết mới (Recent Post Widget) cho blogspot

 

1. Đầu tiên Đăng nhập Blogger => Bố cục (Layout) => Thêm tiện ích (HTML/JavaScript)

2. Copy một trong 5 code dưới đây và paste và tiện ích vừa thêm

Kiểu 1: Là dạng Recent Post widget khá đẹp được nhiều các blogger sử dụng hiện nay



<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>

Kiểu 2: 
<div class="recentpoststyle">

<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>

<script>

var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>

<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">

</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>

<style type="text/css">

.recentpoststyle {counter-reset: countposts;list-style-type: none;}

.recentpoststyle a {text-decoration: none; color: #49A8D1;}

.recentpoststyle a:hover {color: #000;}

.recentpoststyle li:before {content: 
counter(countposts,decimal);counter-increment: countposts;float: 
left;z-index: 2;position:relative;font-size: 20px;font-weight: 
bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; 
padding: 0px 10px; border-radius: 100%;}

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

.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}

.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}

.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}

.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; 
padding: 0px 5px 0px 20px; margin-left: 11px; font-family: 
Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New 
Roman",serif; font-size: 15px;}

</style></div>

 Kiểu 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 = 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 {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>


 Kiểu 4:

 
<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 {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>

Kiểu 5:  
<script style="text/javascript" 
src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.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://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=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />

<style type="text/css">

img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px 
-35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}

.recent-posts-container {font-family: 'Gloria Hallelujah', 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: -20px; 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; }

.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>

Với 5 kiểu bài viết mới Recent Post widget này chắc chặn bạn không thể nào không thử cho blog của mình. Làm cho blog của mình lung hơn bạn nhé!

SHARE THIS
ahihi

Author:

Etiam at libero iaculis, mollis justo non, blandit augue. Vestibulum sit amet sodales est, a lacinia ex. Suspendisse vel enim sagittis, volutpat sem eget, condimentum sem.