Recent Posts Widget with Thumbnails for Blogger

If your blog has long posts and you want to help your visitors to find your recent posts quickly. Then displaying small thumbnail images with post titles in the recent post widget on your Blogger blogs could be the right solution. Now it’s time to display recent posts with thumbnails using the HTML/JavaScript widget in blogger.

This not only looks nice but also entices visitors to click on your posts. This widget will show the Title of the Post, post summaries, a thumbnail of the post, number of comments for each post alongside the titles. Date of post etc…

How to add Recent Posts Widget with Thumbnails to Blogger Blog?

Follow these very simple steps to add the “Recent Posts Widget with Thumbnails” to your BlogSpot blog.

Step 1: Go To Blogger > Design > Page Elements
Step 2: Click on the “Add a Gadget” link
Step 3: From the pop-up window, choose HTML/JavaScript
Step 4: Copy and paste the following code below

<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://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.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.mybloggerblog.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/><small><a style='margin-left:10px;align:right;' href='http://mybloggerblog.com/2012/11/recent-posts-widget-with-thumbnails-for_10.html' target='_blank'>Recent Posts Widget</a> | <a href='http://mybloggerblog.com/' target='_blank'>My blogger blog</a></small>

Settings:

  • Change http://www.mybloggerblog.com/ with Your Blog address
  • Change numposts = 5 to Show the number of Recent posts with thumbnails
  • Change numchars = 100 to number of characters to show in the summary of recent posts
  • Change true to false to activate or deactivate any feature of this widget

Now just save your widget and check your blog. If you face any problem or difficulty installing this widget, submit your difficulty in the comments.

Similar Posts:

Previous Article
Website Promotion With Videos
Next Article
Recent Comments Widget with Rounded Images for Blogger

Thanks for choosing to comment on this article. A name and email address are required to post a comment. The email address is not publicly visible or shared. Please keep in mind that comments are moderated according to our comment policy.

Leave a Comment