14 Responsive Recent Post/ Latest Article Widget Script Collections for Bloggers

Displaying Recent posts in your sidebar often help your users to quickly take a look at the content that is more new and fresh. It also gives them a basic idea that what kind of content is published on a certain blog. If the most recent posts are somewhat linked to each other, then it might engage your visitors for a bit longer. However, in some designing methods people want to display recent posts differently according to their design. In this article, we will show you How to Display Recent posts in Blogger.

Display Recent Post With A Summery in Blogger?

Some people have different approaches of showing recent posts in their blogs. They want them to be with a title and a short description, so that users can get some idea about the topic. There're multiple ways of doing that, but we have listed below the most simplest and work friendly method.

The first thing you need to do is to go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following code in the HTML Text Area. Remember: Don’t forget to replace mybloggerlab.com with your personal domain name.

Responsive Recent Post 1

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script type="text/javascript" src="http://www.mybloggerlab.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

You may change the character limit by replacing (100) with any other according to your needs. Once everything is done, save the gadget.

Displaying Recent Posts in a List Format in Blogger?

Some people want things to be as modest as possible, this is the reason why they want to show recent posts with just post titles in a list format.

Responsive Recent Post 2

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
<script type="text/javascript" src="http://www.mybloggerlab.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

You may change the number of posts to be shown in the gadget by replacing 10 with any other number. You can simply paste the code in the HTML/JavaScript gadget's area or you can also use them in your post pages. Once everything is done, save the gadget.

Displaying Recent Posts with Thumbnails in Blogger?

Sometimes people want things to be perfect. As we all know picture speaks a lot than words, so adding a small thumbnail to recent posts might help in grabbing the attention of your visitors. You can customize the thumbnail size through a simple CSS, but it might get distorted as it is originally small.

To add this in your blog, Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following code in the HTML Text Area. Once everything is done, after customizing save the gadget.

Responsive Recent Post 3

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script type="text/javascript" src="http://www.mybloggerlab.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

Responsive Recent Post 4

</script>

var posts_no = 3;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 40;</script>

img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}

.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}

ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}

ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

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

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

.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}

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

</style>

Responsive Recent Post 5

</script>

var posts_no = 3;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = false;

var posts_date = true;

var post_summary = true;

var summary_chars = 70;

</script>

img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}

ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 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;list-style-type: none; margin: 0 0 -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>

Responsive Recent Post 6

<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script>
<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: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>

Responsive Recent Post 7

Responsive Recent Post 8

Responsive Recent Post 9

Responsive Recent Post 10

Responsive Recent Post 11

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = false;var standardstyling = true;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style>

Responsive Recent Post 12

Responsive Recent Post 13

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = false;var standardstyling = true;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}
.rctitles2 {padding: 5px;margin-bottom: 5px;border-bottom: 1px dotted#cccccc;background:#f2f2f2;}
</style>

Responsive Recent Post 14

<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = false;var standardstyling = true;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<style type=text/css>
#hlrpsb a {color: #000000;font-size:13px;text-transform:capitalize;}
.rctitles2 {padding: 5px;margin-bottom: 5px;border-bottom: 1px dotted #cccccc;background:#fdaeae;border-radius: 10px;}
</style>

Congratulations: You have successfully learned how to display Recent posts in blogger. Go and check out your blog to see things are working perfectly or not.

We hope this article have helped you in learning a way to display recent post in your blogger site. You can even display posts by using your labels. However, we will discuss them in the upcoming tutorials. If you like this article do share it on Facebook and other social web.

14 Responsive Recent Post/ Latest Article Widget Script Collections for Bloggers