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. How can I set trumbnails to be displayed horizontal??? I know it is posible, but I forgot how to do that!!!

Leave a Reply