Beautiful Recent Posts Widget for Blogger with Thumbnails

You may have seen a Recent Posts widget on many blogs, Have you ever wondered 'How to get on your blog'. Well Today I'll tell you How to add recent posts widget with thumbnails on blogger blog. This Widget lets your visitors to find your recent posts without any difficulty and without wasting time. 


recent posts widget blogger
You May Also Like:

How to Add a Flying Twitter Bird on Blogger Blog.

How to Add Subscribe Widget with Multiple Subscribe Options to Blogger.

How to Add a Featured Posts Widget on Blogger.

How to Get a Floating Facebook Like box with Slide on Blogger.


If you wish to see a working demo of this widget then here is a preview of the widget.

recent posts blogger widget preview

How to Add Recent Posts Widget

Here are steps to Install the widget on your blog

Step 1: From your Blog Dashboard, Go to Layout > Add a Gadget.

Step 2: Choose HTML/Javascript Widget.

blogger HTML javascript widget

Step 3: Copy paste the following code inside the widget.
<style type='text/css'>
img.recent_thumb {padding:0px;width:55px;height:55px;border:0;
float:left;margin:12px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:14px;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;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://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></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 = 95;</script>
<script src='http://www.the-area51.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
Step 4: Now change the Red Text with your Blog Address and Save the widget.

You can customize the code as per your requirement, To change the number of posts to display change 'var numposts = 5'. Hope you guys like this widget please tell me by leaving comments below. 

jim luthra jimmie jamshed About Author
Jimmie Luthra is founder of The-Area51.com. He is a Cadet in Merchant Navy and a Part time Blogger. He is 20 and lives in Mumbai. You can Follow him on Twitter, Facebook and Google+
SHARE

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.
    Blogger Comment
    Facebook Comment
The-Area51.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for The-Area51.com to earn fees by linking to Amazon.com and affiliated sites.