02 June, 2012

How To Add Recent Posts With Thumbnails Widget for Blogger

Previously I has write about How Add Facebook Like Button Below Post Title In Blogger Blogs Now I am going to write about How To Add Recent Posts With Thumbnails Widget for Blogger. This recent post widget shows the title of the post, some description and thumbnail of post.To add this recent post widget just follow these simple steps

Add Recent Posts with Thumbnails Widget for Blogger

  • First You Should Take Backup of Your Blogger Template.
  • Now Log in to your Bogger Account.
  • In Your Dashboard Navigate to Layout>>
  • Click add a Gadget and select HTML/JavaScript gadget.
  • Copy the given below code and paste it inside the content box of HTML/JavaScript Gadget.

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"Your Blog URL Here/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<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;}

Change Your Blog URL Here with the URL address of your Blog (ex: http://www.shoaibonline.com) and be careful to have no forward slash symbol "/" at the end of your url


  • To disable the scroll bar, remove the number 500
  • By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
  • if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10
  • Now Save Your widget. And that's it!

Muhammad Shoaib have a good experience in the field of Blogging since decade. If you are a new blogger who just starts your blogging career then www.shoaibonline.com is the perfect place to learn about blogging.