Gadgets, Tech tips, WordPress and Blogger Tutorials

Recent Posts with Thumbnails Widget for Blogger

Recent Post widget with Thumbnails

Here’s how you can add a Recent Posts widget/gadget with thumbnails to your Blogger (blogspot or custom domain) blog. It’s pretty simple. Follow the steps below:

[If you prefer a Recent Post widget without thumbnails, try this Recent Posts Gadget for Blogger]

[You may also like the Recent Comments Gadget for Blogger]

STEPS

How to add a Recent Posts with thumbnails gadget to Blogger:

1. Go to your Blogger Dashboard > Design > Page Element > Add a Gadget > HTML/JavaScript

2. Copy the code below and paste it into the Html/Javascript box:

With snippet

Use this code if you want post snippets (excerpts) to show under post titles.

<div class="eggTray">
<script src="https://sites.google.com/site/projectdigitaltomato/blogger/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://YourOwnB1og.blogspot.com/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.madtomatoe.com/recent-posts-widget-with-thumbnails-for-blogger/" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.madtomatoe.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.ycdr {background:transparent url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

No snippet

Use this code if you don’t want post snippets to show. Only thumbnails and titles will show.
{slide=Click to show/hide code}

<div class="eggTray">
<script src="https://sites.google.com/site/projectdigitaltomato/blogger/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://YourOwnB1og.blogspot.com/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.madtomatoe.com/recent-posts-widget-with-thumbnails-for-blogger/" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.madtomatoe.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:10px;}
.pipesDescription {display:none;}
.ycdr {background:transparent url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

{/slide}

3. In the code, look for the line…

{“URL”:”http://YourOwnB1og.blogspot.com/feeds/comments/default…

…and replace the blog address with your own blog address

For custom domains, add your blog address like this…

{“URL”:”http://www.YourOwnB1og.com/feeds/comments/default…

4. Add a title. Save.

That’s it!

Optional settings:

How to change the number of posts
By default, this widget is set to display a maximum of 8 recent posts.  To change this number, edit line #4 in the code (refer to the code above for the line number) and replace the number 8 with the number of posts desired:

{“URL”:”http://YourOwnB1og.blogspot.com/feeds/posts/default”},”height”:”500″,”count”: 8 }

How to remove the scroll bar
To disable the scroll bar, edit line #4 and remove the number 500:

{“URL”:”http://YourOwnB1og.blogspot.com/feeds/posts/default”},”height”:”500“,”count”: 8 }

What do you think of this widget?
If you have questions or suggestions, please let me know by leaving comment below.

Get updates delivered straight to your inbox!

Enter your email address:

153 comments

  1. Aj Banda /

    thanks for this great widget, I was able to get what I wanted to display

  2. Hi I installed this yesterday on my blog, and it’s not working right. I had to change my post count from 8 to 4 because the scroll bar keeps disappearing leaving the list to overlap things on my sidebar. Could you please tell me what’s wrong? It happens in all my browsers even after refreshing, well sometimes it works after refreshing, but if you refresh again it becomes all messed up.

    I uninstalled it a few times, but the same thing keeps happening.

  3. WOOOOOWWWWW!!!!!! This is really awesome. I just installed it on one of my blogs to test it and it really is good. Every newbie blogger should try this. I highly recommend this to others. Finally, a working recent posts widget for my blogger blog.

  4. Thanks man, i add this into my blog latestanews.com.

    but can you tell me how to change recent post title color and size.

  5. Love this, and used it to create a “What You Missed” page. My only question is how to get it to display more than 20 past posts.

    Thanks,
    Barbara Jean

    • Just edit line #4: Replace the number 8 with 20.

      • I did edit line #4. I replaced 8 with 100, then with 99, then with 52. No matter — the max I get is 20. I would like to show all past posts on a single archive page, with snippets and thumbnails. Possible?

Leave a Reply