≡ Main Menu ≡ Nav Menu

Recent Posts Widget with Thumbnails for Blogger

If your blog have long posts and you want to help your visitors to find your recent posts quickly, without spending time browsing you blog searching for your older posts. Then displaying small thumbnail images adjacent to post titles in the recent post widget on your Blogger blogs could be the right fix. Now it’s time to display recent posts with thumbnails using html/JavaScript widget in blogger. This not only looks nice, but also entices visitors to click on your posts. This widget will show Title of Post, post summaries, thumbnail of post, number of comments for each post alongside the titles. Date of post etc.Today we will show how to add a Recent Posts Widget with Thumbnails for Blogger.

How to add this widget to your Blogger blog?

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

  • Step 1: Go To Blogger > Dashboard > Layout
  • Step 2: Click on “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 = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/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></small>

Settings:

  • Change numposts = 5 to Show number of Recent posts with thumbnails
  • Change numchars = 100 to number of characters to show in 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 comments.

About the author: Md Atiqur Rahman Is the Founder & Author of this blog. He Is Also A Skilled Web Designer & Developer. He Like To Blogging About Anything Related To Technology.

{ 13 comments… add one }
  • Matheus September 19, 2015, 11:42 AM

    Thanks. Great tutorial and widget.

  • Sozibul Islam September 19, 2015, 11:42 AM

    Thanks For This Code..

  • naveed ghaazi September 19, 2015, 11:42 AM

    really good work..thank you sir

  • Md Shahadat Hossen September 19, 2015, 11:42 AM

    Great Post its Working On My Blogger Blog.

  • FAIYAJ BIN REZA September 19, 2015, 11:42 AM

    it's work.

  • Tracy Ahearn September 19, 2015, 11:42 AM

    thanks, works perfectly

  • Dimp September 19, 2015, 11:42 AM

    I do see that it works perfectly with others, but not mine. I don't know what the issue is. I tried your code, and I have the same result.

    Maybe it's my domain? IDK. thanks for trying to help though 🙂

  • Prince September 19, 2015, 11:42 AM

    This is great thank you very much! I will use this… 😀

  • Bureau Jules September 19, 2015, 11:42 AM

    Great gadget!

    Just one odd behavior: the second most recent post in the list always shows up indented {or maybe it's centered while all other posts are floating left, hard to tell}

    I tried deleting the post, to see if it caused the strange placement, but now the "new" second most recent post shows up the same way in the gadget list …

  • rohmadaini September 19, 2015, 11:42 AM

    great post thanks for share

    • Atiqur Rahman May 5, 2016, 10:53 AM

      Welcome rohmadaini.

  • bensaid May 17, 2016, 8:29 PM

    Hi,
    i am hamed mouhammad from algeria i dont speak english well iam beginner in blogger i dont know how to design templates this is my blog if you can help me by adding a nice template and editing to be nice https://templafrvrbf.blogspot.com/

    • Atiqur Rahman May 17, 2016, 11:30 PM

      Hello Hamed Mouhammad,
      Thank you for your comment. No problem, I am understand what are you talking about (It is enough for me). I am also not strong in English like you.
      Design a template for your blog is a mater of time. But now I have not huge time because of my study (Sorry). However I want to help you as a beginner blogger.

      Brother I think comment section is not a perfect place for discussing about this. So, please send me a detailed massage by using contact page of this blog.

      Thanks,
      Atik

Leave a Comment

css.php