hello there! First time visiting? Subscribe to get new posts via email.

My Favorite Blogger Hack: Horizontal Recent Posts Thumbnails

Are you familiar with blogger “hacks?” A blogger hack, to my understanding, is when somebody has figured out how to convert a really nifty WordPress feature into a code that can be used by Google based bloggers. Pretty cool right?

I’ve used several off and on as my design has changed, but my all time favorite is the Recent Posts Teaser gadget.

I’ve always hated how the standard Blogger recent posts widget looks. And I especially hated that there wasn’t a way to make it run horizontally across the top of my blog, because that’s exactly where you want it to be– where it will grab the most attention! We all know what a visual group of people blog readers are, and this is an eye-grabbing way to direct them to some of your posts.

I grabbed the code I’m sharing from this site, and I had originally planned to simply post a step-by-step guide to installing the gadget using the site. However, I had some difficulty in trying to use it tonight and remembered that it took me a really long time to figure it out the first time too! So instead of putting you all through that headache, I’m just going to show you how to easily edit the code I’ve been using on my blog so that it works for you!

1. Copy this code:

<div id=’bp_recent’></div><div class=’bp_footer’><small><a id=’bp_recent_link’ target=’_blank’ href=’http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html?utm_src=BP_recent’ style=’padding: 1px 0px 0px 19px;text-decoration:none;’><img src=’http://image.bloggerplugins.org/blogger-widgets.png’ alt=’Recent Posts with Thumbnails for Blogger’ style=’border:none’ /></a>Powered By <a href=’http://www.bloggerplugins.org/?utm_src=BP_recent’ target=’_blank’ title=’blogger widgets’>Blogger Widgets</a></small></div>
<script style=’text/javascript’ src=’http://bloggergadgets.googlecode.com/files/recentposts_orig.js’></script>
<script style=’text/javascript’>
var numberOfPosts = 5;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 125;
var imgFloat = ‘left’;
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
<script src=’http://somethingswanky.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails’></script>

2. Go to your Dashboard >> Layout >> Add Gadget >> HTML/Javascript

3. Paste the code into the box. Change these items in red:

  •  var numberOfPosts = 5; Change the number “5” to the number of thumbnails you want to be displayed. This will vary based on the width of your blog. The content section of my blog is roughly 850px wide and 5 thumbnails works perfectly.
  •  http://somethingswanky.com/feeds/posts/default Change this to YOUR RSS feed URL. You can find this by scrolling to the bottom of your blog. You should see a link that says Subscribe to: Posts Atom. Right click and copy the link location, then paste in place of my RSS feed in the code.

4. Optional changes in blue:

  •  var showPostDate = false;Change “false” to “true” if you want to display post dates.
  • var showSummary = false; Change “false” to “true” if you want to show a post summary.
  • var showCommentCount = false; Change “false” to “true” if you want to display a comment count for posts.

5. If you want to add a cute gadget title (see below for example) copy and paste the following image code below the gadget code (the code you just edited), and replace with your image location (see my tutorial on creating images here and on how to use image URLs here)


6. Click “Save.” Drag HTML gadget to the area directly above the “Blog Posts” gadget. Click “Save Arrangement” and done!

Please visit my Party Page for a more complete index of Link Parties.

Ashton Swank

Ashton is the owner and author of Something Swanky. Although first and foremost a wife and mother, she considers herself an online entrepreneur, freelance writer and photographer, and brand ambassador. Her focus is in food styling, food photography and recipe development.

70 comments on “My Favorite Blogger Hack: Horizontal Recent Posts Thumbnails”

  1. Gotta try this ! Thanks for sharing !

  2. Thanks Ashton! You’re so smart. I can’t wait to try this out. I love this cursive font too!

  3. Pingback: How To Display Blogger’s Recent Posts Horizontally

  4. Is the code missing?

  5. i am so confused! when you say copy this code, nothing shows except a link to Blogger Widgets. Am I supposed to follow that link? If so, even in that link, I cannot find any code…This would be awesome for my blog. Please help. :)

    • I know! So sorry! I lost a few things in the switch to WP, this code being one. I’ve recovered it though and should have it posted by tonight!

  6. I’ll check back again sometime to see if the code is available. Did it have trouble working? I think this is a great idea and have been wanting it on my blog for some time. Thanks!

  7. Where’s the code ?

  8. thanks so much for this tutorial! I was so excited to see that the code was back up! But, I added the code to my blog and nothing is showing up except the little title “powered by blogger widgets” … any tips?

    • Hm.. I’ll take a look. So bugged that I lost the code!!

    • Can you go back in your old blogger widget and see what the code was you used on your actual design? After switching my blog from blogger to wordpress I am still able to login to blogger and click on layout and open the old widgets I had there.

      I’m guessing that wordpress “ate up” your html when you switched over right? But the original code might be in your old blogger widgets? I’m hoping! :) :)

      I have tried and tried to hack this and figure it out how to do it so i would LOVE to get your code. :)

    • All I got was the “Powered by Blogger Widgets” too. Let me know when you get the code back in order, I can’t wait to add this to my blog! Thanks so much for your awesome design tutorials!

      Love Always,

    • I’ll be sure to announce it on FB when it’s up :)

    • I’m getting the same thing as Kendra. I’m really excited about this option though! Thanks for all your hard work!

    • I know– this post is having the worst issues! I’ll announce on FB when it works again :(

  9. This is great. Still toying with the idea of using it or not, but I love that you show us how. I’ve never seen a tutorial on this one before, and I do hate the standard Blogger widget.

  10. Tried the code, but the script Powered by Blogger was all that showed up. Perhaps if you put the code in a text box it may help.
    I do appreciate you sharing this – would love to use it

  11. Now that you’ve switched to wordpress, how did you keep this in your design. I have wordpress, but this cool feature is not part of my theme. I think I actually have to create a widget area above my posts to make it work. Was it part of your theme, or is there a way to do this easily in wordpress? Thanks so much–loving online blogcon!

  12. Thank you so much for this tutorial! I’ve been wanting to do this for a while and did not know you can do it on Blogger! Thank you Thank you! I’m working my way through the OnlineBlogCon posts and have gotten so mane good tips from the Blog Design section.

  13. here is the link to the website where you can make this widget — works GREAT!! Thanks for posting Ashton. :)

  14. It’s been several months (from the comments). I’m curious- was this ever fixed? I am having the same issue.

  15. I did everything you said, I changed the url into: http://dailylife-kim.blogspot.com/feeds/posts/default
    And put it above ‘blog posts’. Still not working but I really want this widget, can you help me? I don’t no what goes wrong.

    • So sorry! There are known issues with this post, but I’m re-vamping all of my design posts this month and next, so it will be corrected soon! I’ll announce on FB when it’s ready!

  16. Yes, suddenly it’s working today! Very happy with it! thanks!

  17. oh shit, I made a mistake, sorry, still not working but I know you’re working on it :D

  18. This is such a lovely widget – but I’ve had the same issue with it working – have you managed to fix it yet? :)

  19. AAAHHHH I was so excited to find this…. and when it didn’t work I looked at the comments… now realize its not working… wahhhhhh. When will it be up????

  20. Well, after following all your directions, I just see some text saying, Powered by Blogger Widgets. So I headed over to check out the comments and I see there’s been some issues, but that they should be fixed this week. Is that still the plan of action?
    Sorry to be another “it’s not working” comment. :)

  21. Hi there,

    Your code is fine, the problem is the apostrophes, they are not the right ones.

    Use find and replace to change all the ” ‘ ” for ” ‘ ” and it will work perfectly.

    And thanks for the code o/

  22. Woo hoo! Thanks so much DIOGO! I changed the apostrophes and it worked. You rock!

  23. I have the original code from when you first posted this if you need it. I also figured out how to delete the “powered by blogger” at the bottom. I’m always coming back to your blog to check out your blog design tips. Thanks. These post are so helpful and I’m thankful you do this for us.

  24. I got everything worked out except I can’t get the “Powered by Blogger” removed. Do you know how?

  25. Hi Ashton. Wanted to let you know that I found your tutorial word for word on this site with some of your images too.


  26. Hey Only “Powerd By Blogger Widgets” is displaying… please help me… i wanted it urgetly..

  27. Hi has there been any update on this widget? I really want to have it below my header :)

    • Not yet! Keeping up with the blog, my upcoming book, my upcoming online blog conference, and the design shop are keeping me on my toes! So sorry, I’ll announce it on FB when I finally get this working. For now, I think someone has posted a way to do it in the comments :)

  28. Hi guys. I was really looking forward for this widget and it’s not working. But guys I found one which is working as charm. here is the link http://gadgeterror.blogspot.ie/2013/04/horizontal-recent-post-widget-for.html
    Ashton i hope it will help to fix yours also.

  29. Oops, I didn’t think about the HTML being converted! Ashton, please feel free to delete my previous comment, or this one as well if it doesn’t work! And thank you so much for your hard work on the code!

    Powered By Blogger Widgets

    var numberOfPosts = 5;
    var showPostDate = false;
    var showSummary = false;
    var titleLength = 0;
    var showCommentCount = false;
    var showThumbs = true;
    var showNoImage = true;
    var imgDim = 125;
    var imgFloat = “left”;
    var myMargin = 5;
    var mediaThumbsOnly = true;
    var showReadMore = false;

  30. it didnt work i dont know why just followed step by step

  31. I love how this turned out! Is there any way I could make this widget for popular posts instead of recent posts?

  32. I cant find my RSS that I should change! Can you help please =)

  33. Something missing with this tutorial. i guess the javascript..

  34. Hi! Just wondering if this template is fixed yet! I know you must get a lot of questions, but we’re all so excited to put it on our blogs!

    • If you just read back a couple of comments, someone mentioned a solution that worked for them…

  35. Here’s the code that works without any footer:

    var numberOfPosts = 5;
    var showPostDate = false;
    var showSummary = false;
    var titleLength = 0;
    var showCommentCount = false;
    var showThumbs = true;
    var showNoImage = true;
    var imgDim = 95;
    var imgFloat = “left”;
    var myMargin = 5;
    var mediaThumbsOnly = true;
    var showReadMore = false;

    Don’t forget to change YOURBLOG to your personal blog URL or address.

  36. Hey Ashron, I love your blog :) It’s simply awesome! Good work; Keep it up! I needed your help- Is the hack that you have provided above a horizontal random posts “slider”? I need a slider gadget for my blog. Thanks in advance!

  37. So is there a working code now? I tried your tutorial and all it says is ” ‘recentPowered By Blogger Widgets “

  38. Recent Posts Code Is Rally Good.

  39. Hello Ashton, I really love your blog, very simple and attractive. By the way, thanks to your post “Horizontal Recent Posts Thumbnails”, I’m gonna try this on my blogger blog. I think this will be a great widget to display the recent post on my blog.

  40. hey dear,

    It is working fine but I want the images in center in horizontal fashion. I am unable to make that work. Please help

Comments are closed.