How To Add Recent Post Widget with Thumbnail in Blogger Blog

Recent posts widget also an important widget like related post for any blog or website. With the help of this widget, we can display our blog latest posts in the blog’s sidebar, which helpful for your blog regular visitors, they can easily find  recently published post on your blog. In this post I want to tell how to add latest post widget with thumbnail in blogger blog. If you are interesting to add this widget in your blog, then follow this tutorial which help you for adding this feature in your blog.

Why you Need to Add Latest Post widget in your blog?
There are many benefits of this widget, this the way to display fresh and new contain in blog sidebar it inform your blog visitor which post recently published in your blog. It also gives a great look to your blog and also help to increase your blog page preview. So it is very important widget for any blog or website.

How to Add Recent Post Widget with Thumbnail in Blogger Blog
First login your blogger account and select layout from drop menu.

Now add a new gadget and select HTML/JAVASCRIT and paste the below code and check result.

<style type=’text/css’>
img.recent_thumb {width: 90px;height: 70px;float: left;
margin-right: 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=’https://googledrive.com/host/0BzPgmXeCwsMRcmlNOHhtaDNNMjA’></script><script style=’text/javascript’>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 50;</script>
<script src=’/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs’></script>
<hr/>

If you don’t want to display thumbnail and want only show title and description then replace var showpostthumbnails = true; with var showpostthumbnails = false;
50 this the description characters amount you can chanage that if you need.
5 this amount of posts you can change that if you wish.

How to go about creating recent post widget in blogger blog.


First of all, choose your favorite widget from above then click on view code button and copy all codes from the appearing pop-up window.
Login your blogger account
Go layout and add new gadget
Select HTML/JavaScript and paste all code here.
Save the gadget

Settings/Configuration


blogURL                 Fill with your blog URL
var numPosts            Fill with the number of articles you want to display
var showpostthumbnail   Select true if you want image thumbnail and false to        eliminate
var showpostdate        Select true if you want show date and false to eliminate
bloggertips            Please replace with the desired label, when more than two words to use % instead of spaces (only for widget # 5)

I hope your done!

You can place your comment in below the comments box.