Recent Posts Widget For Blogger With Thumbnails, 100% Working

Recently I have shown you How To Edit Your Blogger Template Effectively. Hope you have got a good idea with the article, now im gonna show you how to add an 100% working Recent Posts Blogger Widget With Thumbnails to your Blogger.

Step 1: Go To Your Blogger Home, Click on Layout and Click on Add a Gadget (Remember you should select the desired place of the widget and have to click on the respective ‘Add a Gadget’ link only to avoid confusion, if you chose wrong place dont worry you can drag and drop to the desired place, check the image below).

how to add a gadget

Step 2: Now a Window will open named Add a Gadget Sroll down and find for Add Html/Javascript option and click on “+” beside it (Check image below).

Step 3: Now another window will open with Name and Content empty spaces, name your widget as per your wish and in content box paste following code.

<div class=”eggTray”>
<script
src=”https://files-all-tech-corner.googlecode.com/svn/trunk/listbadge.js”>{“pipe_id”:”1a6640e2a78b2c6e736f2220529daae5″,”_btype”:”list”,
“pipe_params”:{“URL”:”YOUR-SITE/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.alltechcorner.com/2014/02/recent-posts-widget-for-blogger.html” target=”_blank” title=”Grab this widget”>Recent Posts Thumbnails</a>
<a href=”http://www.alltechcorner.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:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent
url(http://3.bp.blogspot.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/s1600/logo.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>

Step 4: Now replace YOUR-SITE with URL of your blog/website.

Step 5 (Optional): If you don’t want scroll bar then remove 500 from the code.

Step 6 (Optional): If you want change the number of displaying posts replace 8 with desired number.
Step 7 (Optional): If you don’t want to display the description of the post change true to none and  padding-top:0px; to padding-top:10px;

Step 8: Now click on Save button at the bottom of window and you are done. Enjoy the recent posts widget with thumbnails for your blogger.