Jan 25, 2013

Recent Posts widget with Thumbnails

To create a Recent Post widget in blogger Just go to

Blogger Layout > Add a Widget > Choose a HTML/Java Script widget

Paste the following code and write your blog in place of bold letter address is written:

<div class="eggTray">
<script src="http://bestthings4u.googlecode.com/files/rpt.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"your-blog-name.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://bestthings4u.blogspot.in/2013/01/recent-posts-widget-with-thumbnails.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://bestthings4u.blogspot.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>

Click here to download the above Code

Optional Settings

  • 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

Tags : How to make recent post widget with thumbnails.
          Make recent post widget with photo.


No comments:

Post a Comment

I always want a feedback related with this blog. If you encounter any problem. Kindly mail via Contact Us form. If this post helped you then share this page to your friends. Thanks for Visiting !

Related Posts Plugin for WordPress, Blogger...