How to Display Recent Posts in Blogger

Displaying Recent posts in 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 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.

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.

<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 can change the character limit by replacing (100) with any other according to your needs and also replace www.mybloggerlab.com with yours. 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.

<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 = 5;
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 5 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.
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.

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

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