Recent Posts Widget with Thumbnails for Blogger/Blogspot

A few days ago, I posted a tutorial on How to Add a Simple Recent Posts Widget that shows a list with the most recent posts if you would prefer a more minimalist look. In this post, you will see a different way of displaying the Recent Posts on Blogger - this is specially for those who want to show more info like the recent posts excerpt / summary and the posts thumbnails.

To add this gadget is very easy, just follow these steps below:

recent posts, blogger widgets

How to Add the Recent Posts Widget to Blogger

Step 1. From your Blogger Dashboard, go to Layout > click on Add a Gadget link


Step 2. From the pop-up window, scroll down and choose HTML/JavaScript


Step 3. Inside the empty box, add the following code:
<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/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, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>
Note: 
- Replace YOUR-BLOG with the url of your site/blog (ex: http://helplogger.blogspot.com) and pay attention to have no forward slash symbol "/" at the end of the 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 that you want to appear
- if you want only the posts titles, change true to none and "0" from padding-top:0px with 10

Step 4. Save your widget. And you're done!
Share this post:

    Random Posts

144 comments:

  1. How to decrease the Thumbnails size???

    ReplyDelete
    Replies
    1. Anonymous3/03/2014

      same with me...please check my website http://www.trends-link.com/

      Delete
  2. nice i get it cool

    ReplyDelete
  3. lexiedensy7/06/2012

    hi. i was able to make the widget appear however the thumbnails are blank. what to do please? thanks...

    ReplyDelete
  4. Same Here.... Thumbnails not appearing

    ReplyDelete
  5. Hello, I tried all what you said but it can't show me anything :(
    here is my blog pliztellme.com

    ReplyDelete
  6. It worked magic in my blog...thank u for the great tool, ure the best!

    ReplyDelete
  7. nice post I had added this to my blogger.

    ReplyDelete
  8. hi, how to make it horizontal instead of vertical recent post? thanks..

    ReplyDelete
    Replies
    1. I wannt know the horizontal feature too.

      Delete
  9. Anonymous8/14/2012

    I don't see any thumbnails?

    ReplyDelete
  10. Thanks this works great - much appreciated

    ReplyDelete
  11. Anonymous8/25/2012

    How to change thumbnail size and summary length?

    ReplyDelete
  12. Hello, I followed the instructions and everything correctly, but I have a problem.
    The recent posts appeared, but they do not have images(thumbnail), although my original posts have images inside of them.
    this is my blog: http://mylast4.blogspot.com/
    Please I need help ;)
    Thank You

    ReplyDelete
  13. wow.. greatest share.........

    ReplyDelete
  14. its blank, why no thumbnail? :'(

    ReplyDelete
  15. Great tool. Thank you!

    ReplyDelete
  16. Thanks bro it is handsome i like it

    ReplyDelete
  17. That's good brother, such a nice post. But, as others complained, how to manage the sumary, thumbnail, title, and even the arrangement? What if i want to show the sumary above the image and title?

    I've published an article due to this matter, maybe some of those who posted the comments above gonna love it. Check it here if you'd like: Recent Post Thumbnail For Blogger.

    Nice to find this blog anyway. Realy a good blog admin, and i love it. :)

    ReplyDelete
  18. Nice post great man. I made this a few times ago, but no more. Now i use the automic widget for it. Just click and done.

    Sorry for the spam comment a few weeks ago. :)

    ReplyDelete
  19. Maybe this could help. Thanks!

    ReplyDelete
  20. Brilliant widget! Thank you! Do you know if there is any way I can change the font colour of the title of each post listed? Also is there a way of selecting different posts to display.

    THANK YOU!!!!!

    info@sardiniababy.com

    ReplyDelete
  21. Thanks- got it installed, but for some reason the most recent post (first one on list) does not have the text description.
    Nice efforts here! :)

    ReplyDelete
  22. Its really very nice post

    ReplyDelete
  23. very cool. thanks.

    ReplyDelete
  24. Thanks! This was the one I was really looking for. Works perfectly at my blog.

    ReplyDelete
  25. Anonymous9/27/2012

    Your site is wonderful. I’m so satisfied to have discovered you.I appreciate to this one.

    ReplyDelete
  26. Keeps coming back with "No Results"

    ReplyDelete
  27. Thanks! Its really very nice post

    ReplyDelete
  28. Thanx a lot for this widget..though the thumbnails of the Posts are not appearing in my blog..see it at..

    http://cosmologistic.blogspot.in/

    ReplyDelete
  29. Thanks, i will try it in my blog.

    ReplyDelete
  30. How do I post an HTML link to the comments sections of someone else blog on blogger (blog spot)?
    I keep trying post a hot link to another page and when its published in the comments section - it just shows the code I pasted. I know its possible as everyone else on these comments posts links.
    THANKS

    ReplyDelete
  31. thankyu..informative.. [;)] Great post!.. keep the posts coming & i will keep reading them. thank for help them. Great blog dude! I just linked to this post on my Delicious. Keep it up!

    By:www.batamia.com

    ReplyDelete
  32. Its wouldn't be better then this because its truly an informative post. Thanks for the great work and keep going!!!

    ReplyDelete
  33. two questions:

    - how do I "un-bold" the post title font for my recent x?

    - Can I tell the widget to list posts so that the oldest ones show first?

    Great widget btw. I really like it

    If anyone wants to see what it looks like you can go here for a visual:

    whisperingbird.blogspot.com

    WB

    ReplyDelete
  34. I want my selected posts in thumbnails in the sidebar, how can I do that?

    ReplyDelete
  35. thank you!!! It worked fine with me!!!!!
    You rock ^__^

    ReplyDelete
  36. its very heavy to load this script..

    ReplyDelete
  37. thanks sir for this wonderful widget, i have successfully added it to dailyschoolnews

    ReplyDelete
  38. is a really nice widget, needs some work....only one thumbnail was displayed :-)

    ReplyDelete
  39. I`am looking for tumbnail recent post where the tumbnail goes left to right, is there any?

    ReplyDelete
  40. Sorry to say but its not working.

    ReplyDelete
  41. Nice, but why the few of content isn't appear in my blog http://jemick.blogspot.com . Help me please

    ReplyDelete
  42. Recent Posts doesn't appear in That gadget!

    My Blog: http://bhejamatpaka.blogspot.in

    ReplyDelete
  43. Anonymous2/21/2013

    I'll test it out. Thank you so much.

    ReplyDelete
  44. It is not working anymore ...

    ReplyDelete
  45. Thanks. I've added it to my blog. Your blog is very resourceful. keep it up

    ReplyDelete
  46. It is not updating the list in my blog! It was working fine! I don't know what happened! My last two article are not showing up!!

    ReplyDelete
  47. Is adding this script(to make a list) in blog post is spam?

    ReplyDelete
  48. thank you so much, bro.
    u make my blog become greater :D

    visit me at vickzkater.blogspot.com

    ReplyDelete
  49. Is there a way to remove the blogger logo? Also, how to increase the summary length? Thanks

    ReplyDelete
  50. It worked in my blog,thanks a lot for the great tool

    ReplyDelete
  51. Also to remove the scrollbar, change "height":"500" to "height":"auto"

    ReplyDelete
  52. Oops! What happend.. look at me :D

    ReplyDelete
  53. i am trying to get this for http://www.naziapakistan.blogspot.com but its show like this Recent Posts Thumbnails Blogger Widget
    any suggestion pleas

    ReplyDelete
  54. Hey its great.
    Working for my nicely!.
    Thank you!

    ReplyDelete
  55. Thanks very much :)
    http://greek-observatory.blogspot.com/

    ReplyDelete
  56. Thank you very much I have installed this widget at http://www.findmesimilar.com/ but how to increase the width of this widget.
    Thanks in advance.

    ReplyDelete
  57. Hi, it looks great but I can only seem to get it to display 20 posts. Ideally I need a widget like this one to display all my posts on a page. Can you help? info@sardiniababy.com

    ReplyDelete
  58. thats great. this tutorial absolutely working.
    www.smarsia.blogspot.com

    ReplyDelete
  59. I can't thank you enough for this, it's been so helpful :-)

    -Kirsten
    http://lateforteaa.blogspot.co.uk/

    ReplyDelete
  60. Good work brother now i use this many thanks look!
    http://all-with-all.blogspot.com/

    ReplyDelete
  61. Thank you- very cool- I appreciate the customization options!

    ReplyDelete
  62. Is there a way to remove the blogger logo and unbold the post titles?

    ReplyDelete
  63. How i can do? if i don't need picture thumbnails.

    ReplyDelete
  64. I've remove the 500, why it's still using scroll ?

    ReplyDelete
  65. Very useful… now i am understand how to optimize my blog. thanks..

    ReplyDelete
  66. target='_blank' for post title.

    ReplyDelete
  67. This post makes my day. I'm going to implement it as soon as I get home. I'm sure that this widget will retain some visitors. Thanks a lot. Already subscribe to your blog and will be back to more useful post.

    ReplyDelete
  68. this was working great.. it has stopped working for some reason? http://sportsbrothersfam.blogspot.com/

    ReplyDelete
  69. not working again... http://www.sportsbrothersreport.com/

    ReplyDelete
  70. Thanks you for this widget, but how can I remove the thumbnails? They're too big.

    ReplyDelete
  71. thanx for writing the post.
    I've just tried it but the thumbnail 'n excerpts don't appear. what should I do?

    ReplyDelete
  72. My thumbnails are blank.......Please assist me

    ReplyDelete
  73. Anonymous6/28/2013

    Just what I was looking for.... Thank you.

    ReplyDelete
  74. Great information i like it you are really smart. thank you..

    ReplyDelete
  75. I have already installed a recent post with thumbnails on my blog. Now, my blog looks better.

    ReplyDelete
  76. This is really incredible , I Liked it !

    ReplyDelete
  77. Hey its great.
    Working for my nicely!.
    Thank you!

    ReplyDelete
  78. Hi,
    i really like and love this widget.this is what i looking for but i need some help.
    why recent post list only list just 20 post only?
    i already adjust the count number more than 50 but still show only 20 post list.
    how to modify the code to make it list more than 20 post list?
    tq.

    ReplyDelete
  79. this is nice VERY NICE thank you so much...

    BUT there's a problem. the Title appears as "null" instead of the actual titles from the posts themselves ;[

    Help please!!!

    ReplyDelete
  80. Awesome post . i like it

    ReplyDelete
  81. Thanks this Sharing............

    ReplyDelete
  82. IF YOU WANT TO REMOVE THE THUMNAILS:

    PUT THIS .pipesThumbnail {display:none;} JUST BELOW .pipesDescription {display:true;}

    YOU CAN SEE EXAMPLE HERE www.nursingclient.com

    ReplyDelete
  83. Hey its great.
    Working for my nicely!.
    Thank you!
    viec lam

    ReplyDelete
  84. hi, how to remove image tunmbail.. i just wanna link only..

    ReplyDelete
  85. Thank you.My blog is http://submitmysites.blogspot.com/ for net solution.But I want to change the thumbnail image size.Please help.

    ReplyDelete
  86. wow! fantastic widget and great job. it really suited my blog. Thanks a lot!

    ReplyDelete
  87. Anyone know how to decrease the padding between first post and top? Kind of a little large.

    ReplyDelete
  88. Is there a way to increase the time it uses to determine "recent"?

    ReplyDelete
  89. i used your widget for label it is amazing http://lkfunniest.blogspot.com

    ReplyDelete
  90. How to increase the size?

    ReplyDelete
  91. Hello Dear,
    Finally I have been capable to set it to my blog Textile Aid .
    Thanks a lot

    ReplyDelete
  92. I want the image to be big and the post title to appear below the image.. ca u say how to do it?

    ReplyDelete
  93. Thank you soo much :D

    ReplyDelete
  94. Great widget bro, Is there is anyway to increase loading time of this widget? It only loads after loading all widgets on my site.

    ReplyDelete
  95. Thanks for such an incredible post in easy language..
    I like the way you write to touch the readers.. Appreciatable
    Please check, I've just added this widget:
    http://ethicalsoftwares.blogspot.com

    ReplyDelete
  96. its not working i am confused with padding "0" with 10 i dont understand this

    ReplyDelete
  97. This really helps coz my blogger dashboard don't support recent comments. My blog is www.pinoyscoops.com

    ReplyDelete
  98. its working gr8! thank you...www.praveenkanwar.blogspot.com

    ReplyDelete
  99. this widget is working smoothly thanks

    ReplyDelete
  100. This really works, it helps a lot. www.pinoyscoops.com

    ReplyDelete
  101. this widget is working smoothly thanks http://www.ahmad-web.com

    ReplyDelete
  102. This widget is working smoothly thanks!
    http://maciku.blogspot.com

    ReplyDelete
  103. Good job, Thank you very much! But please help me How to change the Thumbnails size???

    ReplyDelete
  104. how to change its redirecting url for more view

    ReplyDelete
  105. Anonymous2/17/2014

    hey if your having trouble with thumbnails not coming up in a template you downloaded and uploaded. You have to upload your images to blogger you can't use external link images from other sites. It won't work. If you upload image to blogger and add to post it should auto work the thumbnail.

    ReplyDelete
  106. Great to see this , I ahve applied to my blogs

    ReplyDelete
  107. may be thanks to you .

    ReplyDelete
  108. amazing you solve my problem really

    ReplyDelete
  109. Thanks so much for this! Love it :) check out my site at missalysonfaith.blogspot.com

    ReplyDelete
  110. Thank you. I lost this part in my blog; now I was able to restore it.

    ReplyDelete
  111. this widget is working smoothly thanks

    ReplyDelete
  112. Can you please to do displaying 100 articles and with title and 3 lines text ???

    I want for the page here: http://www.osiaefxi.com/

    ReplyDelete
  113. This was working perfectly on my blog, www.diybeautify.com...now however I am getting "No results". Any idea what to do to fix? I uninstalled and added it back but...nothing :( Help please.

    ReplyDelete
  114. Great, this is what i looking for.

    ReplyDelete
  115. Hi, I think this question has been asked, but I don't see the solution. How do I unbold the font titles? Thanks.

    ReplyDelete