10 August 2011

Awesome Recent Posts Widget with thumbs for Blogger blog


Till now we have 3 recent post widgets for Blogger:
  1. Simple Recent Posts Widget using feeds 
  2. Recent Posts widget (new version with Spy effect)
  3. Recent posts widget with thumbs
Now we have another awesome recent posts widget with thumbnails and you will definitely love it. This widget allows you to keep/remove snippet (post description). Also the thumbs are real time as they are cropped and not re-sized as in earlier version of recent posts widget.


Step 1
Go to your Blogger Dashboar > Layout. Click on Add a Gadget and Select HTML/JAVA Script.

Step 2
Add following code into it

<div class="eggTray">
<script src="https://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"hideHeader":"false","height":"500","count": 4 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.blogger-help.com/" target="_blank">Get This 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:10px;}
.pipesDescription {display:yes;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}

Above code offers you snippet. If want to remove snippet just change

.pipesDescription {display:yes;}
.pipesDescription {display:none;}  

Step 3: Customization

Replace http://medimania.blogspot.com/ with your website URL.

To remove the scroll bar, delete ”height”:”500“,

To change the numbers of posts to be shown just change value at ”count”: 8

Finally save the gadget and enjoy the new widget.

Related Posts


May 6, 2012 at 2:11 AM

Works perfect!!

Check it live on:

May 12, 2012 at 5:49 AM

I really want to use this widget, its the best looking one that I have ever seen. It works perfect for me on every browser except IE9.
See the problem here:
Can you suggest a fix for IE so that you can take away the height and eliminate the scroll bar?

May 12, 2012 at 7:13 AM

Hi Rick

To remove scrollbar you have to increse height value in Step 2 code. Set




Change it as per your needs.

Post a Comment


Twitter Delicious Facebook Digg Stumbleupon Favorites More