Recent Posts with Thumbnails Widget for Blogger

Since we all know that BloggerPlugins Recent Posts widget sometime stops working and it is a very useful widget for every blogger, so 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.

STEPS 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:

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZt06HXhorQIyiQ4sE96G34mXgPTm8UdgykZWb5rtcQiIb0y_dDNZhNFbzusJSQIIeuAJXgM8aQsTSLd93AfTajlYz0uvjiwsyUbXi1-1ua9en9LWoiWRUbUQZfl0qD5SIq8-Z9NCN13v/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>

For Blogger who does not want SNIPPET (Blogger Post Summary) :

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZt06HXhorQIyiQ4sE96G34mXgPTm8UdgykZWb5rtcQiIb0y_dDNZhNFbzusJSQIIeuAJXgM8aQsTSLd93AfTajlYz0uvjiwsyUbXi1-1ua9en9LWoiWRUbUQZfl0qD5SIq8-Z9NCN13v/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>

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.