My Favorite Blogger Hack: Horizontal Recent Posts Thumbnails

posted by Something Swanky

SomethingSwanky is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you.

Blogger Hack

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>
<script src=’https://staging.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.
  •  https://staging.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)

IMAGE URL” />

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.
All Recipes
published on October 10, 2012
« Previous Post

Pumpkin Mousse Brownie Trifle
Next Post »

Angel Food Cake Cupcakes & Strawberry Buttercream

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

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

  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. 🙂

    Reply

  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!

    Reply

  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?
    Thanks!

    Reply

      • 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,
      Liz

      Reply

  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.

    Reply

  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
    Kathy

    Reply

  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!

    Reply

  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.

    Reply

    • 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!

      Reply

  20. 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????

    Reply

  21. 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. 🙂

    Reply

  22. 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/

    Reply

  24. 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.
    Blessings,
    Lisa

    Reply

    • 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 🙂

      Reply

  30. 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;

    Reply

  35. 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!

    Reply

  36. 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.

    Reply

  37. 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!

    Reply

  41. 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.

    Reply

  42. 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

    Reply

Leave a Comment