Add recent Posts Widget with Thumbnails for Blogger/Blogspot

No Comments
Recent Posts Widget help your visitors to find your recent posts quickly without spending time browsing you blog searching for your older posts.You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles.Follow the steps below:

                                         
Recent Posts Widget With Thumbnails in your Blogger

  • Go To Blogger > Design > Page Elements
  • Click on "Add a Gadget" link
  • From the pop-up window, choose HTML/JavaScript
  • Paste the following 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://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.YOUR-BLOG-URL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<small><a style='margin-left:10px;align:right;' href='http://www.simplebloggertips.blogspot.com/2012/09/add-recent-posts-widget-with-thumbnails.html' target='_blank'>Recent Posts Widget</a> | <a href='http://www.
simplebloggertips.blogspot.com/' target='_blank'>simplebloggertips</a></small>

  • Change YOUR-BLOG-URL with your blog url. 
  • Save the template. 
  • And that's it!
Note:- var numposts = 5; where 5 is the number of posts to be displayed.
Next PostNewer Post Previous PostOlder Post Home

0 comments

Post a Comment