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.

About All Tech Corner 69 Articles
All Tech Corner is all about latest Technology News, updates from the world of mobile phones, gadgets, computers, tricks and tutorials. We work hard to serve you best and to satisfy your hunger of Technology

Be the first to comment

Leave a Reply

Your email address will not be published.


*