How to Display Recent Posts in Blogger

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

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

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

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

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

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

38 comments

September 30, 2013 at 7:28 PM

Thanks. Really easy and helpful. Waiting for more great tutorials from you guys!

October 1, 2013 at 1:33 AM

Is the first one with description?

October 1, 2013 at 2:32 AM

Yes, First one is with description and post title but without thumbnail

October 1, 2013 at 3:38 AM

Can I customize it. means how to change the height of image, or text-transformation?

October 1, 2013 at 4:41 AM

Superb post, Thanks

October 6, 2013 at 11:50 PM

Very useful, thank you! =)

October 20, 2013 at 3:41 AM

I love this widget

October 31, 2013 at 7:14 PM

How to make it move? As in ascending or descending recent posts?

Editorial Team MOD
November 3, 2013 at 4:13 AM

They're arranged the way they are published.

November 16, 2013 at 12:30 AM

Thanks Bhai

dvd
January 12, 2014 at 11:48 AM

Great, thanks a lot !!

V L
January 20, 2014 at 1:45 AM

it is not working properly for me. I see only one post. You can visit hbtk on below page for the problem

http://hbtkollywood.blogspot.sg/

Please look in to this.

Editorial Team MOD
January 27, 2014 at 2:34 PM

It works on Labels if your are giving labels to your posts it will display them correctly.

February 5, 2014 at 5:23 AM

hey the recent posts widget can be seen on my blog however your links are also visible ... how can i delete them

Editorial Team MOD
February 6, 2014 at 7:35 AM

You need to replace www.mybloggerlab.com with your domain name

February 26, 2014 at 1:50 AM

Thanks for the simple and great tutorial!

.
April 30, 2014 at 1:44 AM

is that possible, just to show the title ? i don't need to show, thumbnail, summary

October 18, 2014 at 9:37 AM

Your json/css files in the script have generated too much traffic and have been blocked.

Editorial Team MOD
October 20, 2014 at 6:59 AM

Hi,

We have updated the tutorials. New Links are working

November 22, 2014 at 1:19 PM

Thanks very much for this generous advice. I almost have the code working perfectly for me, in a blogger widget here: http://thismoaning.blogspot.co.uk/

I want to change a couple more things, though:
1) Close the space between each item in the post list (make it narrower)
2) Get the whole list to sit at the far left of the widget space. At the moment it's inset under the widget title 'ALL POSTS LIST'.

I put copies of the linked .js and .css files on my own server so that I could tweak them. E.g: I took away the 'strong' tag from the post link in the .js file; and did various things with size and spacing in the .css file. However, I cannot figure out where to make changes to achieve those two last things that I want to do.
There are three possibilities:
- The linked .js file on the server
- The linked .css file on the server
- The html/javascript code of the blogger widget

I'd be grateful for any suggestions
Thanks!

January 27, 2015 at 6:31 AM

Hello give me please the CSS for thumbnail size

Editorial Team MOD
January 27, 2015 at 7:25 AM

ul.label_with_thumbs img {

}

January 27, 2015 at 9:25 AM

Thanks a lot BRO

February 4, 2015 at 11:06 AM

When added, widget title is visible but there are no posts listed. When I replaced my blog URL with another blog URL, it works fine. My blog is currently set to private, but changing the setting to public didn't matter. Do I need to change anything in the Template, either with HTML or CSS? Any idea what can be wrong? Thanks!

Anonymous
May 5, 2015 at 8:19 AM

there is "mybloggerlab.com" three time in this code.
which one we need to replace with our domain name.
please reply

Editorial Team MOD
May 5, 2015 at 3:30 PM

Last one

Anonymous
May 6, 2015 at 12:24 AM

Thanks Sir

May 30, 2015 at 5:21 AM

Dear friends if i use in my personal blog may be copyright issue or not??

Editorial Team MOD
June 3, 2015 at 2:00 PM

No, there is no copyright issue in that.

September 30, 2015 at 7:01 PM

how do I solve this one The reference to entity "alt" must end with the ';' delimiter.

January 16, 2016 at 1:53 AM

Were you able to solve this problem?

March 31, 2016 at 3:00 AM

Even if value of 3 (in var numposts = 3;) is changed to a higher number like 100,the maximum number of displayed posts remains limited to 25. Can the number of dispalyed posts be increased beyond 25 so that all posts can be displayed?

Anonymous
April 24, 2016 at 3:53 PM

my blog is not working this widget here
https://onlinepakistanofficial.blogspot.com

April 25, 2016 at 8:30 AM

thanks

April 25, 2016 at 11:14 AM

am having the same issues..how am i going to make the recent post tittle display?

March 29, 2018 at 11:29 AM

hi bor, your widget is the only working one that i found really awesome job you did here, i have always being a fan of your blog,

but i need some help bro, i want to display recent posts ( your widget ) below blog post ( instead of related posts, just below the post not in home page) but i couldnt do that can you please help bro ????

Editorial Team MOD
March 29, 2018 at 1:34 PM

Hi,

We will share a tutorial about this, next week. Till then stay tuned.

Cheers

Anonymous
April 4, 2018 at 11:06 AM

it has been more than a week now and still waiting bro :)

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.