Monday, 5 November 2012

How to Add Recent Posts Widget with Images to Blogger

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.

No comments:

Post a Comment