Tech Tips. Gadgets. Gaming.

Recent Posts with Thumbnails Widget for Blogger

Recent Post widget with Thumbnails

Here’s how you can add a Recent Posts widget/gadget with thumbnails to your Blogger (blogspot or custom domain) blog. It’s pretty simple. Follow the steps below:

[If you prefer a Recent Post widget without thumbnails, try this Recent Posts Gadget for Blogger]

[You may also like the Recent Comments Gadget for Blogger]

STEPS

How to add a Recent Posts with thumbnails gadget to Blogger:

1. Go to your Blogger Dashboard > Design > Page Element > Add a Gadget > HTML/JavaScript

2. Copy the code below and paste it into the Html/Javascript box:

With snippet

Use this code if you want post snippets (excerpts) to show under post titles.

<div class="eggTray">
<script src="https://sites.google.com/site/projectdigitaltomato/blogger/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://YourOwnB1og.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://www.madtomatoe.com/recent-posts-widget-with-thumbnails-for-blogger/" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.madtomatoe.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;}
.ycdr {background:transparent url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.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>

No snippet

Use this code if you don’t want post snippets to show. Only thumbnails and titles will show.
{slide=Click to show/hide code}

<div class="eggTray">
<script src="https://sites.google.com/site/projectdigitaltomato/blogger/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://YourOwnB1og.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://www.madtomatoe.com/recent-posts-widget-with-thumbnails-for-blogger/" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.madtomatoe.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:10px;}
.pipesDescription {display:none;}
.ycdr {background:transparent url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.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>

{/slide}

3. In the code, look for the line…

{“URL”:”http://YourOwnB1og.blogspot.com/feeds/comments/default…

…and replace the blog address with your own blog address

For custom domains, add your blog address like this…

{“URL”:”http://www.YourOwnB1og.com/feeds/comments/default…

4. Add a title. Save.

That’s it!

Optional settings:

How to change the number of posts
By default, this widget is set to display a maximum of 8 recent posts.  To change this number, edit line #4 in the code (refer to the code above for the line number) and replace the number 8 with the number of posts desired:

{“URL”:”http://YourOwnB1og.blogspot.com/feeds/posts/default”},”height”:”500″,”count”: 8 }

How to remove the scroll bar
To disable the scroll bar, edit line #4 and remove the number 500:

{“URL”:”http://YourOwnB1og.blogspot.com/feeds/posts/default”},”height”:”500“,”count”: 8 }

What do you think of this widget?
If you have questions or suggestions, please let me know by leaving comment below.

Get updates delivered straight to your inbox!

Enter your email address:

154 comments

  1. Fantastic! Thank you
    Veggie

  2. Thanks for the widget but mine says “no results” Does it take a while to grab the blog’s feed?

  3. This is great, it’s working now. But it displays far too many posts, I can’t seem to adjust the number?

    • Look for this line in the code…

      {“URL”:”http://YourOwnB1og.blogspot.com/feeds/posts/default?max-results=8“

      then replace the number 8 with the desired number of posts to display.

  4. Hi, Tom.
    Thanks for the reply. :) I tried doing that but nothing changed (I still have about 15+ posts showing.) Other than that I think it looks great. I took it off my blog until I can figure it out.

  5. Thank you MadTom for the cool widgets man. I was using your “Recent Posts Widget for Blogger (v2)” until I found this version with thumbnails, which was just what I was looking for. Again thank you so much for taking the time to post this excellent additional to any blog.

    I’ve tweaked the your code to get the margins and spacing how I’d like them and there is one more step that would make the widget EXACTLY what I need. The “Recent Posts Widget for Blogger (v2)” also displayed a few lines of the article’s text along with the Title.

    Would it be very hard for you to add the option to include the first few lines of the post’s body text below the title? It would seem like combining the code of the 2 widgets you’ve already written would get the job done?

    Anyway if you can find it in your heart to make the time to improve your already very cool widget, in my opinion you’d have the most useful widget on blogger.

    Thanks again man you Rock!!!!
    PS, check my site, good stuff there ;-)

  6. Is there any way to include the date with the post titles?

  7. How can I put the title under the thumbnail? Is that possible? And please, oh please, can you make one where the thumbnail is the link itself to the entry?

    THIS WILL SO SAVE MY LIFE. thank you!

  8. I still have to figure that one out.. I will look into it.

  9. you’re the shit man! It looks great. I’ve already updated my site. Thank you for the quick update. Great work.

  10. Hey hey Mad Tom, Hope you’re well. I have another request if you have the time. If you check out my site ThePandaPages.com you’ll see how I’m using your widget. As you can see I’m trying to give my visitors access to the greatest number of articles possible right on the first page on my site, which your app if awesome for.

    Right now I post 8 articles per page. Would it be possible for your widget to allow me to skip the first 8 posts on my site, so that the first item your widget displays is actually the 9th post on my site?

    This might be a little tricker than my last request so I totally understand if it’s too much. Either way still love your app, I’m starting work on an iPhone app for my site now. I’m a computer professional (Windows/Mac Systems Engineer, desktops, servers, Exchange that kinda stuff) if you ever need help with a machine or with fixing anything we can setup a remote session anytime, just email me ;-)

    Thanks again for the help.
    Raphael

  11. This looks great!

    Any idea why I’m not getting thumbnails when I use this widget?
    http://www.samaritanxp.blogspot.com

    I tried expanding the width of my sidebar and looking at several other things. I can’t figure it out. After trying on three different blogs, I was still unable to see any thumbnail pics.

    Any help would be GREATLY appreciated as I’d love to use this widget.

    Thanks,
    Ken

  12. Hi Ken, try removing the Tweet button and see if the recent posts thumbnails show up. The Tweet button’s script might be preventing the thumbnails to show up.

    If this is the case, to keep the Tweet button you can re-install it by placing its code/script at the bottom of the post body and see if it all works this way.

  13. Littleman /

    hey mad thanks for the great post. but is there any way to show the only title and thumbnail without inside texts summary shown?
    thanks in advance!

    • Yes, there is. You have to edit line #19.

      Just remove /* and */ from the line /*.pipesDescription,*/ (see line #19),
      so that it would look like this:

      .pipesDescription,
      .pipesSmallthumb {
      display:none!important;
      }
      
      • Littleman /

        Excellent! It’s solved now. Thank You very much for the very fast answer dude!. This is so much helping me. how i can repay you?. Just bookmarked this amazing tutorial blog. thanks a lot! :)

      • and is it possible to lower the tittle to the middle of the height of the thumbnail?

        • To lower the title to the center of the thumbnail’s height, insert this piece of code between line #32 and #33 (before the closing tag style and div):

          .pipesTitle {padding-top:20px!important;
          }
  14. Hi,
    How do I change the size? and could I put it in the bottom of every post, instead of the bottom of the page?

    Thanks,
    M

    • You can change the size of the thumbnail image by editing line #28 (see code):

      width:72px!important;
      }
      

      Just replace the 72px by the desired thumbnail width.
      Ex. 200px

      width:200px!important;
      }
      

      That’s it.

      This Recent Posts widget displays vertically as it is meant to be placed on the sidebar. So I don’t recommend it to be added below the post or page.

      Suggestion:
      You might also want to add a Related Post widget (with thumbnails) from linkwithin.com.
      This widget is added at the bottom of the post. Visit this page to install this widget, and click the “Install widget” link on step #1.

      Cheers!

      • thanks for the link! but can you shere your code of “You might also like”, i think i like it more for few reasons

        • This site uses the WordPress blogging platform. For Blogger blogs (blogspot), you can use the widget from linkwithin.com

  15. La Posada de CAmpos /

    Daer Mad Tomato,

    Nice work on the Recent Posts for Blogger.

    In my case the widget is superb, except when viewed in internet iexplore version 7.0. Whe page loads in Iexplorer the widget is not visible in the right format. You get a thin area of about 1/8 inch with the very small scrollbar section which you can slide up and down to see the content.

    Can you please taka a look and see if it can be fixed:

    Here is a testing site: http://posadadecampos.blogspot.com/

    Make sure you load the page with Iexplore 7.0

    Thank you.

  16. La Posada de CAmpos /

    Mad tomato, the problem above is fixed, all I have to do was change height from “auto” fo “350px”

    Magnificent.

    • Glad you figured it out and thank you for sharing your solution. I will update the code for IE7 compatibility. Cheers!

  17. Littleman /

    I Love Your Tutorial Blog Madtomatoe! just perfect

  18. Hi Mad. I’ve Posted several new Posts until about 5 new posts, but why the recent post widget wont show my 2 newest posts that has been posted? its kinda weird because it was running perfectly for the 3 first new posts.

    Thanks in Advance!

  19. Hi Mad. Its All Right Now. But Its Kinda weird because the recent post widget was late about 30 minutes to show the recent post :)
    I Think its updating every 1 hour or some kind like that?

    Thanks!

    • Hi Kimeri, the widget uses Blogger feed widget/gadget functionality to fetch recent posts, and feeds usually takes a few minutes (or more) to propagate across the internet. So yeah, it does something like that.

  20. hi there, how did you do the “Click to show/hide code”. Hehehe. Can you show me?

  21. dude…how can i add widget like your site that have all 3 together “recent, popular and random” please…i have read 3 post in your blog…i’m getting confuse which one is is…. please

  22. amazing! you have good feeling of style!
    is it possible to show small images instead of square thumbnails?

  23. hey thanks man..its workin ok here..but mine comes with 2 different background,1 is darkblue, 1 is black..is there anyway i could change all my background in black? please reply.thanks.. keep up d good work.

    • madtom.can u help me please..evrytime i share my blogger on facebook it doesnt have a thumbnail…i was wonderin if u can help me how to sort that out..thanks man..

      • Try adding images to your posts. Facebook can only generate thumbnails if your posts contain images.

        Tip:
        If your posts are videos and require no images, you can create a single image for all your video posts, ex. a 100px by 100px play button.

        Try this example.

        Sample image (url): http://i51.tinypic.com/x1hwkm.png

        Sample usage:
        Go to your blog Setting>Formatting> and paste the following image source code (see how the sample image inserted/used below):

        <img style="left: -2000px!important; position: absolute; top:-1000px;" src="http://i51.tinypic.com/x1hwkm.png" border="0" alt="" />

        this code will appear on your post editor everytime you make a post, but it will not appear on your posts.

        • i Dont have a problem sharing my post videos on Facebook cause they always come out with thumbnail..its the Blog itself that i wanna put a thumbnail… When i share my blog on FB there is no thumbnail beside it,,it only shows the name of the site…

          • You mean the homepage. Maybe your homepage don’t have any image embedded in it. In some cases, Facebook can’t detect thumbnails, images from a slideshow or images hosted on different domains (your site logo is hosted on a different domain).

    • to add a black background, insert this piece of code between line #32 and #33 (see before the closing tag style and div):

      .pipesContainer {background:#000000;}
  24. Sorry..Not Sure where line #32 & # 33 located.. Could u tell me where it is please…

    • See code in the post above, line #32 and # 33 are the last 2 lines of the code.

      • None of these settings didnt work …
        .ybr li {background-color: transparent!important;
        .pipesContainer {background:#000000;}
        padding:0px!important;}

        .ybr li {background-color: transparent!important;
        padding:0px!important;}
        .pipesContainer {background:#000000;}

        • Then something in your blog must be overriding the code. Try this…

          The last 3 lines of the code should look like this (starting at line#32):

          .ybr li  {background-color: transparent!important; padding:0px!important;}
          #rightcol .pipesContainer {background:#000000!important;}
          </style></div>
  25. How to Get Blogger Website Thumbnail to Show Up on Facebook Share??

  26. Thanks MadTom.. Great Widget. I was wondering, is this possible that when someone clicks on the thumbnail, it opens in the same window. And how can I put a border? Thanks again !!

    • If you want to put a border around the widget, just add this code before line #33 (before the style and div closing tag) :

      .pipesContainer {
      padding:5px!important;
      border: 1px #AAAAAA solid !important;
      }

      If you want to put a border line at the bottom of each item, just add this code before line #33 (or before the style and div closing tag) :

      .ybr li {
      border: 1px #5D5D5D dashed;
      }

      As for the link to open in the same window, I’ll look into it.

  27. Hi there,
    I tried this, but it says No Results. What should I do to fix this?

    Thank you so much!

    • Your blog seems to be private (open to invited readers only). The widget doesn’t work on private blogs.

      • Hi. I tried to check the widget with our blog being open to public, but still it says “An error occured fetching the feed data”. What can I do to fix it? I put the blog back to private for now. Thanks you so much for your help!

  28. My widget says ‘no results’. How do I fix this?
    Thanks!!!!!!!!!

    • Just visited your blog and saw the widget working fine. The widget uses your blog’s rss feed to show the latest post. Sometimes it takes a few minutes for it to fetch the feed.

  29. I’m not getting thumbnails, why?

    • Some browser (IE) don’t display the widget’s height properly. That’s why the thumbnails can’t be seen. To fix this I added a fix height of 500 pixel to the widget.

      Just grab the updated code above and install it again on your blog.

  30. this script is just so cool…god bless u and ur blog.

  31. this widget is installed perfectly..but this recent post widget is not showing thumbnail of my first post while rest 7 post are showing it..also thumbnail are exactly fitting, there is some background blogger icon image just popping..
    my blog is healthisdivine.blogspot.com..please help me to fix this.
    ur support is highly regarded.

  32. i m using ur Recent post widget..but it is getting some problem..
    firstly, there is one post which is not showing thumbnail though it is having image in it just like my other posts…other defect is that there is background blogger image behind thumbnails in this widget which is popping on upper side..my blog is healthisdivine.blogspot.com..please help me.

    • I just updated the widget and removed the blogger icon thumbnail. Just grab the updated code above and install it again on your blog.

      As for the post with no thumbnail, this happens when the post was first published with any image in it. It could also be a blogger feed updating issue.

  33. thanks for ur support..u really rock man..my widget looks cool..does it takes time to update itself because i deleted one post and added new one but the widget is not updating…..otherwise rest is fine…my wishes r wd you..may ur blog continue to do what it does best..make internet life easy..!!

  34. Thanks for this work. I really appreciate you posting it for us to use.

    I am having a small problem though, the entire widget seem to bounce off the side of the sidebar. It is not legible at the moment. I know it has to be something in my own blogs code, but do you have any idea what is causing this?

    • Try grabbing the code above and install it again on your blog. If the same problem appears, it’s probably conflicting with your blog’s template (css).

  35. hi..ur widget is working fine now..can we show post other than on homepage.. this will increase the visitor stay on one’s blog..please help me in this matter…thanks

    • You can add the “Popular Posts” gadget (from your Blogger dashboard) and the linkwithin widget from linkwithin.com.

  36. title are “bold”… is it possible for me to make it not “bold”?

    • Yes it’s possible. Just paste this piece of code before line #33 (bottom, before the closing style and div tag):

      .pipesTitle { font-weight:normal!important; }
      
  37. AWESOME!!!! Thanks so much!!!

  38. Hey, nice javascript code….. I was just wondering if you could place the postlink to the thumbnails as well as the description in the javascript… Anyways great post!!! :)

  39. hey i love ur widget….but its just Recent Posts ..How can i use tis for Related Posts as u r using….i can see u r not using within and i hate linkwithin.com .

  40. Hi Tom, I love the widget. I having a problem removing the scroll bar. Everything is working perfect but I don’t want the side scroll bar.
    Your help is greatly appreciated.

    • By default, the widget’s height is set to 500 pixels. Look for the line in the code with the “500” in it:

      "hideHeader":"false","height":"500","count": 8 }

      and remove the 500:

      "hideHeader":"false","height":"","count": 8 }

      This should remove the scroll bar.

  41. Can you tell me how to make the links to open in the sama page not in new window?

  42. And why in my blog some of the picture appear but some of the post are just text?Is there any picture proportions that can’t make thumbunals?

    • Sometimes this happens when the post is published first before adding an image. But the image will show up eventually. When publishing a post, try adding the image first before hitting the publish button.

  43. All the post are added with picture when they are post.I think is about the proportion of the pictures.Can you help me to make the links to open in the same page not in new window?

    • The links will now open in the same window/tab. Just grab the updated code above and install it again.

  44. drm /

    is it possible to put some blank image in case if post doesn’t have any pictures. the list will look better, if there will be thumbnails for all the posts in the list

    • The code has been updated. Just copy the code above and install it again on your blog. The gadget will now show a grey Blogger logo if a post has no image.

      If you want, you can also replace the image (blogger logo) with your own
      (ex. your blog’s logo or any image you want).

      Just Edit line #29 (refer to the code above for the line number):

      background: url(http://4.bp.blogspot.com/-LOOjBWkPDOU/TcgzCKbFr1I/AAAAAAAACmE/RkFjOZVgkoU/s400/blogger.gif) no-repeat top center;

      Just replace the image url in the code (the url inside the parenthesis) with your own image url (recommended image size: 100×100 px).

      You can upload your image to your blogger or to tinypic.com or other free image hosting, and get the image URL.

      ex.

      background: url(http://www.tinypic.com/image.jpeg) no-repeat top center;
  45. Thanks for share.
    How can I shawing the posted date?
    and separator line on the bottom? like yours.
    I tried .ybr li {border: 1px #5D5D5D dashed;}
    but its around each items.

    • i can make line just on the bottom, {border-bottom;
      so, How can I shawing the posted date?
      thanks

      • Insert this piece of code before line #41 (refer to the code above for the line number):

        #ycdr {background: url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.png) 0px 5px no-repeat; padding: 7px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px; border-top:1px #5d5d5d dashed;}
        .ybr li {border-bottom:0px;}
        
        • this script for shown Blogger logo,

          I hope to know showing posted date
          under the title. like a

          Title
          Posted on May 19, 2011

          thank you for bother.

  46. can it work at wordpress.com?

  47. hi mad this is really cool widget for bloggers. But i have 2 questions

    1) widget showing only thumbs & title, there is no description how can i place little description too….

    2) how can i make links open in same window

    waiting for ur answer.

    • 1) The widget already displays snippets (description) by default.
      2) The links will now open in the same window. Just grab the updated code above and install it again.

  48. images are not visible in the thumbnails. help

  49. i want to remove description from it and add post date like you. and want to line after the post . thank you

    • Use this code: (only the thumbnails and titles will show, and a line after each post title)

      <div class="eggTray">
      <script src="https://sites.google.com/site/projectdigitaltomato/blogger/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
      "pipe_params":{"URL":"http://speakasiaonline-nh.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://www.madtomatoe.com/recent-posts-widget-with-thumbnails-for-blogger/" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.madtomatoe.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:1px #cccccc dotted; padding:0px 0px 10px 0px!important;}
      .pipesTitle {padding-top:10px;}
      .pipesDescription {display:none;}
      .ycdr {background:transparent url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.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>
      

      The widget has no date feature yet.

  50. i love you sir you are great :)

  51. Thanks for the widget! Just a quick question – is there some way that I can edit the number of characters in the snippet? Thanks again!

  52. Thanks for posting this. I’ve been looking for something along these lines for a while.

    It works great on Firefox but when I view my blog in Safari, the posts don’t appear, only the links at the bottom going to this page.

    Is this a known issue with Safari? Or is it just me!?!

    • Hi Jon, I just viewed your blog on Safari and saw the widget is working fine. Sometimes it takes time for the widget to load, depending on the speed of your internet connection and the size of the current page that is being loaded.

      • Thanks MadTom. I’ve now only got one post on the homepage and that seems to help quicker loading.

  53. Hi MadTom,

    First of all, thanks for the widget. I was using it at http://belpesce.com/, but it seems to have stopped working for the past hours. Are there any known updates? Or is it just me?

    Thanks,
    – Bel

    • Hi Bel,

      I’m not sure what have caused the widget to stop working. But I just checked your site and the widget is working fine now.

      Cheers!

  54. I had installed this widget, but it stopped working and did not included two posts entered today. Can anyone explain? does it take a day or so for the posts to load? I liked it better than the one I have now. :(

  55. I took it down but will put it back right at the bottom of the blog so you can check it, I don’t think people usually scroll down that far…

  56. ok it does seem to be working again, but two of the stories did not pull the media. does the photo have to be at the top for it to work? help!

  57. sometimes it takes time for the gadget to fetch newly published posts.

  58. Annika /

    I have the same problem just worst. I have only 2 of my 7 stories have a photo. All my stories have photos that can be fetched.

  59. how can i change thumbnail size by width & height.

  60. it is not loading today, what gives?

  61. I have to take this widget off, since it isn’t working and you aren’t replying. Too bad.

    • Sometimes the widgets takes time to load all the posts. The loading time depends how fast the internet connection and the size of the page being loaded (esp. if posts have many images). Sometime if the page (ex. homepage) is taking too long to load, the widget stops loading. Try reducing the number of posts (on your Blogger setting) being displayed to see if the page and the widget will load faster.

      Here’s a tip to make your blog load faster: try using the ‘more’ tag to cut a long post when displayed on the homepage:

      <!--more-->

      Just insert this tag anywhere you want in your post.

      Hope this helps.

  62. Sometimes the widgets takes time to load all the posts. The loading time depends how fast the internet connection and the size of the page being loaded. Sometime if the page (ex. homepage) is taking too long to load, the widget stops loading. Try reducing the number of posts (on your Blogger setting). Your blog currently displays 10 posts. Try reducing that to 5 or 6 and see if the page will load faster.

    Hope this helps.

  63. Hey! your widget isn’t working!

    • Sometimes the widgets takes time to load all the posts. The loading time depends how fast the internet connection and the size of the page being loaded (esp. if posts have many images). Sometime if the page (ex. homepage) is taking too long to load, the widget stops loading. Try reducing the number of posts (on your Blogger setting) being displayed to see if the page and the widget will load faster.

      I just visited your blog and saw the widget is working perfectly fine.

      Here’s a tip to make your blog load faster: try using the ‘more’ tag to cut a long post when displayed on the homepage:

      <!--more-->

      Just insert this tag anywhere you want in your post.

      Hope this helps.

  64. No, it isn’t about taking time… it just wasn’t working at all. all of my posts have “more” in there. Unfortunately, something has stopped working.

  65. Thanks,English isn’t mi native language, so please excuse any mistakes in writing. The Widget was working fine in the morning, but it just stopped working again. I don’t think t it’d be about taking time.

    • Your page loads relatively slow. And some instances other widgets or plugin will not load anymore, especially if you have a slow internet connection.

      Here’s a screenshot of your blog: http://i53.tinypic.com/xkx1xe.jpg

      It’s a proof that the widget is working just fine on your blog.

  66. Andrew /

    The widget doesnt work
    your css file return “page not found” error. Please reupload the file css and reply.

  67. hi i have implemented tht how can we mak it moveble
    or running like side show it would be coolest

  68. Is there any way to put “expr:” on the url?

    What I want is to put this code on the url address:

    “http://sampleblog.blogspot.com/feeds/posts/default/-/" + data:label.name &quot”

    Thanks in Advance!

  69. how can i split it in two columns?

  70. ProfDrAndro /

    how come that the widget stopped working (today)

  71. Hello, the plugin is great. I just wonder if i put it in the home page, that the widget avoid to show the present posts already in the page but show older post instead. Let’s say if i show 4 post in the homepage that the widget shows the posts older than these ones.

  72. Hello, I tried it but no thumbnails came out. How can I make them come out?

  73. It was good but i want to make the thumbnail more attractive with square border around glowing effect,,could u kindly help me

  74. This is just what I was looking for! Thank you!

  75. This was working fine, and then suddenly today it says “no results.” And it’s blank. What gives?

  76. Hello,

    Thank you, the widget is great and its working perfectly.

    By the way how to set the widget show most viewed posts/ popular posts instead the recent posts.

    Can you help me?

    • Just add the Popular Posts gadget/widget from your Blogger dashboard. Go to your blog’s Layout > add a gadget > Popular Posts.

  77. Hello,
    your widget works great but I would like to show the popular posts of my blog in the same way. Can you help me?

    • Just add the Popular Posts gadget/widget from your Blogger dashboard. Go to your blog’s Layout > add a gadget > Popular Posts. Position the new gadget then save arrangement.

      • Hi, please can you help me. How can I increase the character amount for the snippet? Also can I increase the thumbnail size? I would like this to appear where the blog post would normally go. I can’t seem to figure out CSS styling for this widget,

        Thanks

      • I tried to use the default Blogger widget but for some reason all the text and thumbnails look messy (text overlaps the thumbs and so on.) I asked for your version because the one you made for the Recent Posts worked wonderfully and it didn’t give me any problems.

  78. Antonio /

    Thanks for the great widget! But I still have 2 questions:
    1. Can I make the link open in new window?
    2. Can I make the thumbnails display in an aspect ratio of the original image?
    Appreciate if you can enlighten me! Thanks!

  79. The widget has suddenly stopped working– has not updated last two posts. what should I do?

  80. Chris /

    Great Widget.

    Is there a way to display this in columns instead of rows?

  81. Aj Banda /

    thanks for this great widget, I was able to get what I wanted to display

  82. Hi I installed this yesterday on my blog, and it’s not working right. I had to change my post count from 8 to 4 because the scroll bar keeps disappearing leaving the list to overlap things on my sidebar. Could you please tell me what’s wrong? It happens in all my browsers even after refreshing, well sometimes it works after refreshing, but if you refresh again it becomes all messed up.

    I uninstalled it a few times, but the same thing keeps happening.

  83. WOOOOOWWWWW!!!!!! This is really awesome. I just installed it on one of my blogs to test it and it really is good. Every newbie blogger should try this. I highly recommend this to others. Finally, a working recent posts widget for my blogger blog.

  84. Thanks man, i add this into my blog latestanews.com.

    but can you tell me how to change recent post title color and size.

  85. Love this, and used it to create a “What You Missed” page. My only question is how to get it to display more than 20 past posts.

    Thanks,
    Barbara Jean

    • Just edit line #4: Replace the number 8 with 20.

      • I did edit line #4. I replaced 8 with 100, then with 99, then with 52. No matter — the max I get is 20. I would like to show all past posts on a single archive page, with snippets and thumbnails. Possible?

  86. How can I set trumbnails to be displayed horizontal??? I know it is posible, but I forgot how to do that!!!

  87. Thanks for this tip;
    I’m still looking for nice stuff to migrate my website hosted at overblog.com to blogspot.com.
    However I don’t know if it normal behaviour but it take some “time” to fill the widget even after some F5 refresh (and I’m on a good laptop so the delay may come from the javascript itself).

    Miguel

Leave a Reply