Recent Posts Widget With Thumbnails For Blogger Blog

In this post, we are going to see "How to Add a Recent Posts" widget to your blog. The "Recent Posts" widget with thumbnails will help the blog visitors to find the recent posts quickly.

This is one more widget which will help your blog to gain traffic and it even adds a good look to your blog. It will improve the user experience of your blog many folds.

The Recent posts widget will boost the website/blog performance by reducing the bounce rate and the amount of time a user spend on your blog/website.

This widget shows the title of the post, thumbnail and a small summary.

So, let's check out "How To Add Recent Posts Widget with Thumbnails"-

Step 1: Go to Blogger Dashboard - Click on Layout

Step 2: Click on "Add a Gadget"

Step 3: Select "HTML/JavaScript" from the list. Copy and Paste the below code.

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>

<script src='http://www.technogadgetworld.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> 

Customization:

• Change the URL "http://www.technogadgetworld.blogspot.com" with your own blog address.
• Change the numposts = 5 value with any number of posts you want on your Recent Posts Widget.
• Change the numchars = 100 value with any number of characters you want to show in summary of Recent Posts.
• Change the true to false to activate or deactivate any feature of this widget.

Step 4: Now save the widget. And save the arrangement and Visit your blog.

Congrats. You have now added the "Recent Posts" widget on your blog.

If you have any doubts or suggestions. Please comment below.