Recent Posts Widget with Thumbnails

Recent Posts Widget for Blogger will display the latest posts from your blog on your blog's sidebar along with images, summary and more. You can customize the widget using the different options provided in the widget installer.At least some of you would be familiar with My "Recent Posts with Thumbnails" Gadget for Blogger. I had got so many complaints that the Gadget fails to load or has some issues. The issues come from the Blogger Gadget API framework and so I decided to port that gadget and make a Widget version of the same.This version doesn't depend on the Blogger Gadget API and doesn't have any such issues.This is a pure JavaScript Widget which doesn't depend on any APIs or frameworks.

Why the other Gadget fails at times?

The other gadget is made using the Gadget API. The API renders the gadget as an iFrame with all the parameters appended to the iFrame URL. When the iFrame url becomes too big, browsers have issues rendering the gadget. This primary reason behind this is that the API appends so many style parameters to the iFrame URL thereby making it pretty lengthy.The current page url is also a parameter.That is why some people complain that it is working on the home page, whereas it doesn't work on some of the post pages. The reason is that your home page url is shorter in length than your post page url. So it is almost impossible to make the gadget error free.

So What now?

This new Widget doesn’t rely on the Gadget API, and is not loaded as an iFrame. This is a plain JavaScript widget, and will work across all browsers.

What’s special about this new Widget?

If you are good at CSS, you can make the widget exactly as you want. There is no limit in customizing this Widget. This doesn’t mean that it is useful only to those who are familiar with CSS. The Widget by default will inherit your Blog’s Styling. So it should look pretty neat with the default Styling

Options in the Widget Installer

  1. Blog URL: This should be the URL of a blogger Blog. If you are installing the Widget on the same blog then you can leave this field blank . This field is useful for those who have multiple blogs..
  2. Number of Posts – The number of posts displayed in the Widget
  3. Maximum title Length – This option can be used to chop off really long Post Titles. If a post title is longer than this length, the widget will chop off the rest of the title
  4. Show Thumbnail – It’s pretty much obvious from the name
  5. Show Default Thumbnail – If this option is selected, and your post doesn’t have an image, then a default image will be displayed.
  6. Thumbnail Dimension – The gadget can generate square thumbnails of any size. Use this option to set the dimension of the thumbnail.
  7. Float Thumbnail to – This option can be used to align the image thumbnail to the left or to the right
  8. Thumbnail Margin – You can set a 5px margin to the image, so that the thumbnail stays apart from the post summary. You can override the margin by selecting No.(You can then manually style it using CSS)
  9. Show summary
  10. Summary size – If summary is more than this length, then the widget will chop off the rest
  11. Show post date
  12. Show Comment Number
  13. Show Read more Link
  14. Read More Text – This is the Text Shown on the Read More Link
  15. Use Full Feed – By default the Widget will use the Blogger Summary feed which is smaller in size. If you select the Full Feed option, it will use the Full Feed which is bigger in size, and hence the Widget would get slower. The advantage is that, you would get thumbnails of YouTube videos that you have posted.
  16. Sorting – Helps you in displaying the recently published posts or recently updated posts.

Now that you are clear with the options, use the below button to add the Widget to your Blog.

Add Recent Posts Widget

Advanced Options:

1. Default Thumbnail

If the Widget is unable to find an image in the Post and if Options 4 and 5 are checked, then the Gadget will use the following image by default

If you want to change this default thumbnail, then you will have to first upload the Thumbnail somewhere. The best place to upload is blogger. So create a new post(or edit an existing one) and add the image to the post. Now Switch to the Edit HTML view of the Post Editor. There you will find a URL which contains “/s1600/” in it. Copy that URL. Change /s1600/ to /s72-c/. So finally you will get some URL like

http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png

This is your default Thumbnail's URL. Now it’s time to tell the script to make use of this Image. For that Edit the HTML/JavaScript Widget(Recent Posts) and add the following variable:

var defaultImage=”THUMBNAIL_URL_WHICH_HAS_/s72-c/_IN_IT”;

(Off course you will have to edit the above line)

If you are not sure where to add the variable, then add it just before

var numberOfPosts

Save the Gadget and you are done.

2. CSS Styling:

If you are using CSS Styling, make sure that the Thumbnail Margin is set to None. You can also set the Thumbnail Float to None. This will prevent the Widget JavaScript from adding any Styles to the Post List.

You can add your CSS at Template Designer > Advanced > Add CSS

Some Sample CSS snippets are there in the comments.

3. Tracking the Widget Usage

I have appended a utm_src parameter to the recent post URLs.This will help you in tracking the widget usage from your Google Analytics account(Traffic Sources > Campaigns).

4. Remove the Powered By Link

If you can’t stand the powered by Link at the bottom of the widget, then you can hide it. To do that Add this CSS snippet :( :(

.bp_footer{display:none;}

If you don’t know how to add CSS read the CSS Styling (2) part in these Advanced Options.

Hmmm at the moment, I’m a little lazy to create a Demo Blog. You can expect that sometime soon.

If you have any doubts or questions or suggestions, feel free to comment here and I will try my best to reply to each of your comments.

I know that many bloggers are having issues in using the old Gadget. So kindly help others by sharing this new post :)

138 comments :

  1. the previous one always failed to load.
    i'll try it, first.

    thanx.

    ReplyDelete
  2. I tried to use your other post yesterday, and I followed your direction to a tee, but after a few hours of headache, I gave up!

    You must have heard my cried :-) Thanks for sharing this!

    ReplyDelete
  3. Cool, good job mate :)

    Looked nice on my blog! :)

    ReplyDelete
  4. Replies
    1. how do u show the title under each thumbnail in grid mode?

      Delete
  5. @sam azgor - this widget or any other feed based widget will work only on blogs having public feeds. You are trying to add posts from a private blog.That is not possible :). The widget will work only for blogs which have feeds enabled and are public :)

    ReplyDelete
  6. Thanks bro. you rock..

    ReplyDelete
  7. Thanks, I was having problems with the previous gadget. However, I was able to feed the igons in a "grid" like your illustration, but I can't seem to be able to do this with this widget. I tried align left, no align and margin 5px and no margin with no other options (text, comments, etc.) However the icons only display in a tall column!

    Thanks for the improvements, I look forward to using them!!

    Ciao,

    L

    ReplyDelete
  8. P.S. I also re-sized the default image width to 80 px so that three could fit in a "row" in my 300px side-bar.

    ReplyDelete
  9. @Laura - To get a Grid, use the following settings
    Set Maximum Title Length to 0
    Set Float Thumbnail to Left
    Set Margin to 5px(Optional)
    Tick show thumbnail and Show default thumbnail(optional)
    Uncheck show summary, show post date , show comment number and show read more

    ReplyDelete
  10. @Laura - just edited the installer, and added a "Grid Layout" button. It will reset the settings for a Grid Setup.You don't have to do check or uncheck the check boxes. The script will do it for you :)
    So ignore the previous comment.
    To get a Grid Layout, Click on the "Grid Layout" button in the widget installer, adjust the settings further if needed. Then click on the "Add Widget to Blog" button.

    ReplyDelete
  11. WOW! Love the new grid btton. It works like a charm. Any way to type in the spacing of pixels instead of haing a drop-down of 0 or 5?

    Maybe the next release! ; )

    Ciao,

    L

    ReplyDelete
  12. @Laura - I'm not planning to add it to the widget installer. The reason is that this widget can be tweaked to a better level using CSS. However i have added a provision in the script to accept margin values.Just edit your HTML/JavaScript Widget, look for
    var myMargin=5;
    and alter it according to your needs.
    eg: var myMargin=10;
    will give a 10px margin around the image.

    You might have to clear your browser cache, so that the script changes take effect :)

    The alternate and better method is to use CSS. For that set the Margin to none(0) in the Widget installer, and add the following CSS

    #bp_recent img {
    padding: 2px;
    border: 1px solid #eeeeee;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }

    You can add CSS in Template Designer > Advanced > Add CSS
    The advantage of this method is that you can style the image to a better level.Well you can see it :). You might probably have to reduce the image dimension to around 85(for your current sidebar width) to use this CSS.

    ReplyDelete
  13. the above CSS is not for setting margins but it will give you what you want :)

    ReplyDelete
  14. Please put out a random post widgets

    ReplyDelete
  15. @ryu - That's in my mind. you can expect that pretty soon if i get enough feedback for this one :)

    ReplyDelete
  16. this is a off topic request rather then question i want to know how to add a thumbnail with post summary like you in which the image used on index page doesn't show on the item page, like in this post the image on the index page isn't shown on the item page i will be very thankful if you could tell me, or create a post about that, Thanks in advance

    ReplyDelete
  17. @Hotnfunny.tk - That too is in my mind :)

    ReplyDelete
  18. awesome master...
    i think for next project recent post with animations ;)

    ReplyDelete
  19. This is easiest way to put thumbnail on recent post, i found. Thanks

    ReplyDelete
  20. On blogger, the rest of my sidebar lists use bullets. They are UL's and CSS is set up to render them with a graphical 'bullet'. How can I set up this widget's list of links with the same bullets?

    Is the list being displayed as a UL? If so, what CSS would be needed?

    If not displayed as a UL, what hacks do you suggest?

    Thanks!

    ReplyDelete
  21. @shimniok - i see that you just need a plan list of links without any snippets or thumbnails.
    You can use a Feed Gadget to do that. Refer http://www.bloggerplugins.org/2011/06/recent-posts-using-blogger-feed-widget.html

    ReplyDelete
  22. Currently using as gadget (showing recent post thumbnails only) at the bottom of all pages. I also wanted to use the same effect to embed in a static page but using thumbnails of one of my labels. Is it possible to run both scripts? Is it possible to 'post' in a static page.

    Great gadget

    ReplyDelete
  23. @Paz -i guess that you are trying to add it as the page content.Yup that is possible. Configure the Gadget, click on add widget to Blog. From the Add Widget Page, Click on "Edit Content" and Copy the Widget Code. You can paste it into your Static Page(Post Editor > Edit HTML/HTML) and publish the page.

    ReplyDelete
  24. Hello, very nice fast widget. Thanks. I would use three widgets from three blogs, but all posts are in one widget. How can i solve this? I hvae three different widgets from three different url's. :) Thanks for answer.

    ReplyDelete
  25. One problem persists:
    If I choose on Snippet Style “Summary and Thumbnail”, the gadget does not translate the HTML tags neither "#nbsp;" nor " " for non-breaking space.
    But it translates it if I choose “Summary Only” — strange, no?

    I use to set non-breaking space between day of month and the month name to not have a break in between at the end of a line. In the post it works, but not in the gadget!

    Would like to know how I can correct this myself. Thanks for hints!
    filou.dc AT gmx.net

    ReplyDelete
  26. Problem solved.
    I apologize, because I’ve installed again the older version of the widget instead of the new one.

    ReplyDelete
  27. nice. ei guys can u send a link on how to customize google adsense?
    or how to create image ads on the sidebar?
    thanks a lot

    ReplyDelete
  28. Thanks for shared. I gonna try to it

    ReplyDelete
  29. wow! really great widget... I m using it... but i want to replace my own image to the no image thumbnail.. plz let me know how...

    ReplyDelete
  30. its not stable in my blog, i need to refresh, sometimes a few times to see it.

    ReplyDelete
  31. hello, can we try to show Posts Author like show commentnum?
    ( var showpostsauthor = true; )

    is it possible?

    ReplyDelete
  32. Hi, the widget is very interesting. I need to place some widgets in diferent places of template, but when i do, all information appears in the same place (the first widget included). Is possible create diferents widgets of Recent Posts and customize, through CSS, in diferent positions of template? Thank you!

    ReplyDelete
  33. This is exactly what I was looking for , thank you!
    One problem though, I am using it on a static page, grid style, to show images from my blog - works perfectly.
    But then I added another one in the sidebar of my blog to show thumbnails from another blog and these thumbnails now show up on my static page in a list under the others.
    How can I fix this?

    ReplyDelete
  34. I m using it, but in my URl post it showing utm_source=BP_recent.. How to remove it?

    ReplyDelete
  35. 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 shows older post instead. Let’s say if i show 4 post in the homepage that the widget shows the posts older than these ones.

    ReplyDelete
  36. Very nice. I'm now using the Grid and working perfectly on my blog. This is way better than the previous widget. Thank you so much for this.

    ReplyDelete
  37. Hi Aneesh,
    I have set up this gadget to run horizontally across the top part of my pages, showing Video Thumbnails only. I'm glad that this can be done, instead of just the vertical orientation. I chose this 2nd version so I could make my Thumbnails larger. Thank-you much!

    Do you know what could be causing this strip of Thumbnails to disappear everytime I add a new post to the page? The new posts are added down on the lower half of the page in a separate section, so I don't understand how this is affecting the Thumbnail code. Since my blog is a Documentary Blog that's fairly new, I am adding anywhere from 1 to 30 new Video posts per day, and in order for the thumbnails to reappear and be seen, I have to go into the "Layout" section and click "Save" after each new post (You can see why that is a problem). Once I do that, the Thumbnail strip of videos come right back where I originally placed them.

    This is a strange thing to happen, but I see a few other people have mentioned a similar problem, however, I haven't seen a solution as of yet.

    I've used some of the suggestions on your blog and customized my site, and it's shaping up pretty well. I also used the "grid" option on your widget. Here's the website to see the horizontal strip of videos thumbs. http://DocumentaryMagic.blogspot.com

    One other thing, I found the only way I could put this gadget horizontal, was to not use titles above the video thumbnails. They interfere by making the next thumbnail in line, drop down about 1/4 inch so that you get a descending stair-step effect.

    Hope you can think of a solution to why the thumbnails disappear each time I enter a new post. Thanks in Advance & sorry this is so long winded. ;-)

    ReplyDelete
  38. Thats fixed for now(not completely).The reason why it was not working is that your latest post doesn't have a post url. http://documentarymagic.blogspot.com/feeds/posts/default
    I would like to recreate this issue. How do you do that?

    ReplyDelete
  39. I can get img thumbs to show only for the first post in the list (the more recent), why?

    ReplyDelete
  40. Ignore that. I fixed it :-) I don't get thumbs for the YouTube videos anyway.

    ReplyDelete
  41. Hello again, I'm the one without a user name above and the long post. lol, you shouldn't ask "me" how to do anything, however, the reason the url isn't showing (I think) is because the video is from Veoh.com, and almost all other vids on my site come from youtube or google video. That's the only thing I can think of that is causing that particular problem, but I'm doing a work around that.

    The major problem is that NO thumbnails what-so-ever show up...not even the placemark, whenever I do a new post. I've just updated my coding in the "recent post" widget to add an alternate thumbnail for the "the secret" video and any others that don't want to show, and here again, all 5 thumbnails are gone again off my page. I have gone in and clicked "save" on the Recent Post Widget several times, and refreshed my page, but can't get it back. I think when you went there and looked at it, 4 of the thumbs were showing. That's not the main issue for now. It's that the WHOLE "Recent Post" Widget disappears off my pages. Hope I'm not confusing you more. ;-) Thanks

    ReplyDelete
  42. @fescheca -
    While editing the gadget, you removed this line
    var numberOfPosts = 5;
    and hence the error :)

    i still don't understand why your latest post doesn't have a URL.

    ReplyDelete
  43. @fescheca - and if you still don't see it after making the above fix, then it's time to clear your browser cache :)

    ReplyDelete
  44. Hi, not sure why you couldn't see the "var numberOfPosts" code...so I put in another one...heheheh, I thought maybe the web couldn't see the first one either...2 better than 1? Nah, that didn't work. ;-)

    What I did find though, is I didn't see that the default image needed to be ".png" so I changed the .jpg, and what I thought was a comma, was actually a semi-colon at the end of my image. After I got those few things taken care of, I'm now back in business, but I haven't posted anything since, so we'll see.

    As far as that video not having a url, it does have one in the post. I wonder why you aren't able to see some of these things?

    Anyway, for right now, all is well. Hopefully it will stay that way so I don't turn your hair gray. Thank-you!

    ReplyDelete
  45. Can it read blogger "labels" or "catagories" or a feedburner RSS?

    I want it to display the recent posts of a certain label.

    I am using an RSS like this:


    http://blogname.blogspot.com/feeds/posts/default/-/labelname

    And have tried feedbruner URL's.

    Possible?

    ReplyDelete
  46. Thanks so much for sharing these widgets. I've tried both versions and have the same troubles with both: 1. My post doesn't show up. Could it be that I have to wait a while for it to show up? I just published the post tonight. 2. The formatting of the title isn't what I need it to be. The widget is apparently pulling styling from a subheading. I need it to reflect the styling of the heading. Is there a way that I can manually tell it that I want the font to be black at the same size as the headings?

    Thanks again for creating and sharing these widgets!

    ReplyDelete
  47. Hold Up... i found what I was looking for and now I love this widget even more.

    Use this line as the feed:

    YOUR_BLOG_URL/feeds/posts/summary/-/YOUR_LABEL

    ReplyDelete
  48. @Paz- well there was a widget specifially for that :)
    http://www.bloggerplugins.org/2011/09/featured-posts-widget-for-blogger.html
    and yes its almost the same as this one :)

    @PrayerChristian - It should show up as soon as your feed gets updated. So if the post is present at http://www.christianprayersdaily.com/feeds/posts/default?redirect=false , then it should show up in your widget as well.
    and regarding the styling part, the gadget just inherits the link styling from your blog. You can alter that using CSS. I don't see it on your blog and so can't help you in that part.

    ReplyDelete
  49. @Fesheca - Well that error thrown from your Blog when i last visited and that line was not there then :). It's now there and so everything is fine :)..
    And the thumbnail doesn't have to be a png.

    ReplyDelete
  50. It's great now. I've posted several more vids and no more problems with that. Thanks for pointing me in the right direction.

    One other thing, ;-) sorry!!! I blocked the navigation bar from showing, but there's about a half inch of sea foam green at the top of my page where it used to be. lol The rest of the main page is white. Any way I can make that color black so your eyes don't go right to that first thing on the page? Thanks!

    ReplyDelete
  51. Hi... is there any way to make it into two column? i like this gadget but it would be great if you made a random post with this kind of gadget... I'm looking forward to it.

    ReplyDelete
  52. Hello A, This is Fesheca again. ;-) I had to switch to the Chrome Browser, and other than that, the only changes I made was uploading a different heading image. No code was disturbed. Now my horizontal thumbnail widget has disappeared. It was working great too beforehand.
    http://www.documentarymagic.com

    If you can help, as always, you are greatly appreciated. Thanks in advance.

    ReplyDelete
  53. Hi A, I reinstalled the widget all over again, and my Recent Post images are back. I made a few changes on where I put my default image, so Hopefully, they'll stay this time.

    I still have that annoying sea-foam green strip at the top of my page where I took out the navigation bar. Any ideas on how to change the color on that part? Thanks, (Fesheca)

    http://www.documentarymagic.com

    ReplyDelete
  54. Hi,
    Many thanks for this new gadget.
    I have problem with styling.
    I want to show only post title and thumbnails and thumbnails floated to left and title placed vertically centered. But, titles place top of thumbnails.
    But, I couldn't write right CSS for this.
    You can see it at my test blog: http://yeme-mekanlari.blogspot.com/

    I need your support.
    Thanks at advance.

    ReplyDelete
  55. Is there any way to make this into a Horizontal recent post widget? I would like to add it after the blog title. Thanks!

    http://pinoybuzzter.blogspot.com

    ReplyDelete
  56. Hello;
    As I see, title is put above of thumbnail and summary is put side of thumbnail.
    When I used as summary: false, all thumbnails are seen bad , unoredered.
    I want to show only thumbnail and titles, so titles must be side of thumbnails.
    Is it possible by CSS styling? If yes, could you give a styling example, please?

    Thanks at advance

    ReplyDelete
  57. I think I ran off our leader by bugging him so much. ;-(
    (Fesheca)

    ReplyDelete
  58. I am beginner blogger and find how to post thumbnail in blogger. Thanks for Tips.

    ReplyDelete
  59. i can't add this.how i can add this Widgets?

    my blog www.music2radio.blogspot.com

    ReplyDelete
  60. Thanks for this great post. I have it installed in my blog and it works splendidly fine. Hats of to you. More power!

    ReplyDelete
  61. This is really god and beautiful ..thanks for the help...keep helping us

    ReplyDelete
  62. nothing was showing in my blog, what went wrong i don't know, please help me

    ReplyDelete
  63. I tried both the gadget and the widget versions side-by-side on my test site recently. I liked the fact that the widget appeared immediately and there was no lag while it loaded, which is my only complaint about the gadget version. However, I preferred the appearance of the original gadget. The underlined link and small space between posts (they were aligned vertically in the sidebar) in the gadget made the posts distinct from each other even without a separator line, whereas is the widget they appeared to run together. Also the font seemed different between the two. Finally, I checked the grid option to see what it looked like and was unable to get rid of it even after repeatedly deleting the widget, returning to this page and refreshing it, and reinstalling the widget. So for the moment I'm staying with the gadget despite the lag while it loads

    ReplyDelete
  64. hey i added your widget but the widget is not showing any images from my posts just the default image , how do i solve this problem

    ReplyDelete
  65. and do you by chance have a similar popular post widget as well ?

    ReplyDelete
  66. what about some demo to show this widget work?
    did you have one?

    ReplyDelete
  67. Thanks for this, it looks good.

    ReplyDelete
  68. Thank you, exactly what I was looking for.

    One suggestion: it would be nice to skip the N most recent posts (i.e. begin from the second or third most recent) since it is very likely that the most recent one appears exactly at the side of the gadget.

    ReplyDelete
  69. @Don - If you want to skip some posts, then Edit the Widget look for something like.
    /feeds/posts/summary?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails

    You have to add the paramter start-index to this url. So that it looks something like
    /feeds/posts/summary?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails&start-index=6

    This will make the widget skip the first 5 posts.

    ReplyDelete
  70. Can I add more than one widget ?! they become like a mess !!

    ReplyDelete
  71. Great post.........it was helpful........thx

    ReplyDelete
  72. Thank you so much - it is a great widget, easy to use and your help answering our questions makes it even better for customization! Appreciate you very much, happy new year!

    ReplyDelete
  73. Thanks for this widget. I have a question I used your widget for 'popular posts' and using CSS (and a comment on the page) I was able to get the thumbnails to rotate. I can copy and paste but that's as far as my knowlege of CSS goes. What would be the code for this recent posts widget to get thumbnails to rotate??

    Many Thanks in advance

    ReplyDelete
  74. Hello! I love this widget! I just have two (I think only 2) questions.

    1) Is there any way to change where the different pieces are displayed? For example:




    Or





    2) Is there any way to change how the date is displayed?

    I have a basic understanding of CSS, but I'm no pro, lol. Thanks in advance!

    ReplyDelete
  75. Oh, there are 2 plaes to define the number of thumbnails! Sorry :-)

    ReplyDelete
  76. Hello, Thanks for the widget. I want to change the thumbnail size. How to do this ??

    ReplyDelete
  77. Awesome Widget! This was exactly what I needed and was looking for. Thank you very much!

    However, I do have two questions;
    I know the font is taken from the page but is there anyway I can change the font size on just the Widgit? I've tried to do it in so many ways but I just can;t figure it out without change the font on my entire page.

    Also, I'm posting two different feeds form separate blogs and I like how they combine but is there a way to have both in chronological order?

    Once again thank you for this Widget as its greatly appreciated.

    ReplyDelete
  78. Wonderful widget, thanks ;D There is some way to open the links in another window?

    Excuse my poor english, thanks in advance ;DD

    ReplyDelete
  79. Hi I love this widget its one of my favorites, I loaded it 2 months ago and its been working brilliantly, as of 3 posts ago (approx a week), my thumbnails are now loading side by side instead of neatly underneath each other.
    I have read your post and have tried to change measurements and parameters but it hasn't worked. Plus it seems it doesn't do it with every post.
    Do you have any ideas as i really love this widget.

    ReplyDelete
  80. For those of you who are struggling with this widget as I was, here's some simple CSS that it took me 2-3 hours to figure out before I got my widget to line up vertically, rather than in a grid format. Play around with the colors and fonts and stuff, suit it to your blog, but here's the basic structure (to make the widget appear vertical, as opposed to grid)...

    #bp_recent img {
    width:80px !important;height:60px !important;float:left !important;padding-bottom:10px;
    }

    #bp_recent {
    display:block;background: url(http://www.celebuzz.com/wp-content/themes/celebbuzzv05/images/stripe.png) transparent !important;width:280px;padding:10px !important;border-right:1px solid #BFBFBF;border-bottom:1px solid #BFBFBF;
    }

    #bp_recent .bp_item_title {clear:both !important;width:190px !important;overflow:hidden !important;float:right;height:60px;text-align:left;border-bottom:1px solid #ccc;
    }

    ReplyDelete
  81. <- Same Anon as CSS fix for vertical widget. Oh and did I forget to mention, thanks BP for a really great widget?! For some strange reason, my custom template isn't showing more than one (1) post when I try to use the Popular Posts widget. And I really wanted the thumbnails, not just titles, so after days of scouring the web, I finally found this widget. I was having trouble customizing the one that comes with Blogger, so I redid it to show this instead. Thanks a million BP! :-)

    ReplyDelete
  82. Is it possible to change post date format at widget like dd-mm-yyyy?
    Now, it is shown as Jan-dd-yyyy.
    Thanks at advance

    ReplyDelete
  83. What a great plugin!

    I am using it on my blog but have a small problem. I tried to do everything with CSS but could not get around to it. As follows:
    I want to show thumbnails on the left to each post heading. The thumbnails size should be no more than 10 px (more like icons).
    Even if I change the size of the thumbnail using CSS, it still shows under each heading. I want it to appear next to the post title.
    Please check the gadget on www.omswami.com (Recent Posts).
    I am not showing summary, comments or post date. Just the post title.

    Any help will be greatly appreciated.

    Peace.
    Swami

    ReplyDelete
  84. Hey

    Thanks so much for the widget! Just to second Ahmed above, I'd love to use the widget in a few different boxes (for different label searches) on the main page. At the moment if I add a second widget, the thumbnail/summary for that widget appears under the first widget, in a slightly warped form, where ever you place the second one.

    Any help from anyone who knows how to stop this happening would be massively appreciated.

    ReplyDelete
  85. I absolutely adore the flexibility of this widget! And the developer is so responsive to requests.. so I wanted to make another one:

    I would like to use the widget at the "top" of my blog, which would be next to the first post. So I would like the widget of recent posts to start by listing the second most recent post. That way, I can high-light the other posts (a little bit like bloggers Magazine style) next to the top post without repeating the most, most recent one.

    Is this an easy thing to do?!? Thanks so much for all of your hard work!

    Ciao,

    L

    ReplyDelete
    Replies
    1. Edit the Gadget content and change
      /feeds/posts/summary?max-results
      to
      /feeds/posts/summary?start-index=2&max-results

      Delete
  86. My template runs all of the post and thumb nails together, it is a standard Blogger temple, Picture Window. It looks all jumbled up.

    Each post needs to have a space between them.

    ReplyDelete
  87. It fixed itself when I include the date and the read more. Nice look.

    What I would love to have is a recent post widget with thumb nails that was horizontal about 700px wide with two columns so that it would go at the top of the page and have a magazine look. RSSinclude.com has one but their ad at the bottom is way too big.

    ReplyDelete
  88. Also wish that there was a dashed divider line between the post.

    ReplyDelete
  89. Can somebody please help me to changhe the size of the default thumbnail? I have the html code (unfortunately I am not alowed to post it right here), following your steps, but it still doesn't work! This is my blog and the widget is the one with 12 images, on the left side!

    Can you please help me to change the thumbnail size to 90x130px?

    ReplyDelete
  90. Hi Blogger can you help me please? I have customised this widget but

    under my recent posts I have small thumbs going across the page how do I get rid of this?

    How do I get more posts on it? I seem to only have 5 even though I changed the value

    those24littlehours.blogspot.com

    ReplyDelete
  91. I have a private blog and it's not working, I don't see anything loaded. Does this widget only work for public blogs?

    ReplyDelete
  92. This is fantastic!

    I'm wondering about adding this not to my blog, but to my website. I used the "Edit Content" option to grab the html and I added this to the page where I'd like to add my recent posts on my website. It works, but the formatting is a bit off. Is there a way I can edit the formatting so that the lines of text are not so tight and have separation between the posts?

    Thanks!

    ReplyDelete
  93. Thanks for this. I was looking for how to do this in a somewhat easy way and this was the most straightforward for me. I have 2 questions. How can I add the title "recent posts" to this widget? It says it in the layout template but not actually on the blog. Also when it takes an older post it shows the default image instead of an image in the post. Is this because it is on a separate page?

    Thanks

    ReplyDelete
  94. Like others, I'm trying to use this widget horizontally under my header. Is there a way to have the title be printed below the thumbnail, wrapped to fit?

    Thanks!

    ReplyDelete
  95. I installed the widget and it worked perfectly for the first day. Now it only shows 2 recent posts thumbnails even though I have it set to show 4 at a time. Any idea why it's doing this? And if I post more than one time per day it only shows 1 of the posts. Suggestions would be appreciated.

    http://undomesticatedconfessions.blogspot.com

    Thanks!

    ReplyDelete
  96. Just a note - the gadget is causing a login to show up when you go to a site that has it installed. It just started happening so I removed it from my site. Please let me know when the issue has been corrected and I will gladly restore the gadget! Thank you. :)

    ReplyDelete
    Replies
    1. It's doing the same thing for me and for all the blogs I read that use the same widget.

      Delete
  97. Hi, firstly thanks for creating such a great widget!

    We are seeing the same issue as Kim explained above - any blog with the widget installed is showing a popup login screen naming the widget code and also the widget is not showing images at all.

    Hope the widget is fixable - it really is an integral part of our blog.

    Thanks again for your hard work and good luck!

    ReplyDelete
  98. It now shows a pop-up message on my blog and it has disappeared from it. It was like my main post so now my blog is blank.

    The pop-up message says this:

    http://blogergadgets.googlecode.com is asking a user and a password: "Google Code Subversion Repository"

    And askes me for a user name and password.

    What do I do?

    ReplyDelete
  99. the widget is asking for username/password to this website
    http://blogergadgets.googlecode.com/

    thx for u r help

    ReplyDelete
  100. @All - Sorry for the Errors related to Script Hosting. Can you please Edit the Gadget and Change http://blogergadgets.googlecode.com/svn/trunk/recentposts.js to http://bloggergadgets.googlecode.com/files/recentposts_orig.js

    If you are not sure how to make the change, just remove the Gadget and add it again. Sorry for all the trouble :(

    ReplyDelete
    Replies
    1. How can we show the post title under the thumbnail in grid mode? please help

      Delete
  101. I Change
    http://blogergadgets.googlecode.com/svn/trunk/recentposts.js to http://bloggergadgets.googlecode.com/files/recentposts_orig.js

    Thank you so much... It Works.:)

    ReplyDelete
  102. I'm am so glad I saw this...I had tweeted you. It is now fixed.. phew it took me ages to #css this widget (as code and I don't get on). Great widget I love it, the most important on my blog those24littlehours.blogspot.co.uk)

    ReplyDelete
  103. Yes, thank you very much for giving a fix.
    I was yelling at the screen for a while :P

    'cause from my 3 column blog, the right sidebar content had dissapeared.

    Also, donated
    'Cause you deserve it for providing the best plugin I've used so far on blogger.

    Greets!

    ReplyDelete
  104. Hi, great post. Just wondering

    1) How to put a divider
    2) How to make title and date, comments and read to the side of the image, not above and below?

    ReplyDelete
  105. Excellent widget sir! Added it to link a comment blog to my production Blogsite. Elegant in that it does one thing well.

    Now I need to work on making it look pretty! I agree with David - a divider (rule) between entries would be a nice option. Otherwise I'll have to add a graphic to every post to make them stand out. Not a bad thing in itself...

    Thank you for your great contribution. It is much appreciated.

    K

    ReplyDelete
  106. Two questions:

    What are the specific 'posts' contained in? I've tried using ul and li in every method i could think of, and I've also tried messing around with .bp_item (since the title is bp_item_title it was the best hunch i had) I'd like to change the width of the specific item as a whole create a 2 x 3 column effect. (For example my page width is 600px, so I want the items to be 290px wide and in a 2 columns, 3 rows.) CSS suggestions for this would be greatly appreciated.

    And finally, what is the css handle to style the 'more' option? I want to align it to the right, but it appears underneath the item image and summary, and to the left.

    ReplyDelete
  107. Loving the widget!

    But it fails to properly pick up the blog font. I'm using the Awesome Inc. template, i.e. a Blogger standard one.

    The font both on the page and in the sidebar is Trebuchet 14px, but in the widget the inherited font looks huge and cluttered, and if I reduce it to 13px it becomes Arial.

    So I tried to set Trebuchet manually in the widget, but it displays Times New Roman instead (the other available fonts in the widget work fine).

    Could you please fix Trebuchet? That would be awesome. Apart from that, wonderful job, thank you :)

    ReplyDelete
  108. Is the thumbnail dynamic? I need a dynamic thumbnail where it would depend on what I post. thanks.

    ReplyDelete
  109. Thanks! What I like of this is the possibility to show recent updates, instead of recent new posts. That way I am able to decide which posts will show, by "updating" them.

    ReplyDelete
  110. This code is doesn't work now. It ask always "A username and password are being requested by http://blogergadgets.googlecode.com. The site says: "Google Code Subversion Repository"

    ReplyDelete
  111. I put this on my blog and it worked on the side bar but I want it to go across the top of my blog under the header. When I moved it up there, the posts still went down instead of across. How can I fix this? Thanks, Linda

    ReplyDelete
  112. i want to recent posts just on the hompage and not on the other pages how do i do that ?

    ReplyDelete
  113. i want look like this gadget as related post plz any one do for me thankss

    ReplyDelete
  114. Thank you very much for this widget. I'm trying to integrate this into my site but I'm having some issues with the background. It currently spans the entire screen. See here: http://www.siouxwire.com/ Is there a way I can alter it to match the header above it?

    BTW - I would be happy to include a link on my site in the right column if this works; do you have icons suitable for a dark background?

    ReplyDelete
    Replies
    1. try using

      .tabs-outer{
      width:888px;
      margin: auto;
      }

      Delete
    2. Is it possible to extend the bottom margin. If you look at the site (www.siouxwire.com) it looks a little odd with the 5 pixel bottom margin. Apologies, I am unfamiliar with CSS and how to target the attribute at this specific page element.

      Delete
  115. This comment has been removed by the author.

    ReplyDelete
  116. Also, is there a way to move the summary below the thumbnail so that there could be a horizontal row of thumbnails with descriptions directly below them?

    ReplyDelete
  117. hey hey ..........your gadget is not available now in the bloggers gadget list......however my two blogs are still using it.......how could iadd your gadget tomy new blog???????

    plz reply

    ReplyDelete
  118. i want to recent posts just on the hompage and not on the other pages how do i do that ?

    ReplyDelete
  119. I have added this widget and it has changed my fonts on my blog. It has changed all my link color and I it will not allow me to fix them in the Template manager or using HTML. Please help! I am so lost on how to fix this but love the widget!

    ReplyDelete
  120. I love it, but there is no way the thumbnails comes out :( only a colum with the recent post...I removed almost all ( comments,date , more, cuz only want the post name and the image but no image at all :(

    ReplyDelete
  121. Thank you so much, Aneesh! I just had the widget reinstalled and it turned out perfectly. I'm so happy.
    Happy holidays and have a joyful and blessed Christmas! May your New Year ahead be successful and fulfilling, filled with God's manifold blessings.

    ReplyDelete
  122. Hi,
    For some reason it is giving me multiple of the posts. whats wrong with it?

    ReplyDelete
  123. It is a very good feature, just one thing I'd like to have an answer and 2 things problematic.
    Question is how many posts can be shown? At its maximum?
    I checked but can't find such a description.

    Concern is firstly, the widget shows my "unpublished post" which was just slept, so I had to delete the hidden one, to use this widget.
    Next somehow it doesn't show some Japanese written text at all.
    My web site is http://weeaboofailblog.blogspot.jp/

    ReplyDelete