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).

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01N4RGu-xeUddZM5c1UyAWy4248c2WR5j34x-vfjzEMEMkvMwH9_Eik2lNZa1vzs1vTrK38GHy2W-rakTdlXVAcZnWZTrB2OIzfeLxE38L-C6U0hP6Qy5LVSP6egmnCcTQ0OUXS3VGmw/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.