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>
<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)

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.
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Comments

  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. Is the code missing?

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

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

  6. Where’s the code ?

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

  8. 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.
    Jelli recently posted..Primp my Present: Tabbed Accordion FoldMy Profile

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

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

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

  12. Is the code back up?

  13. here is the link to the website where you can make this widget — works GREAT!! Thanks for posting Ashton. :)
    Tracy
    http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html

  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? :)
    Tumi recently posted..2013 S/S TREND: BRIGHT HEIGHTSMy Profile

  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. :)
    Mindy recently posted..Color Me Fruity: A Kid LunchMy Profile

  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/
    DIOGO recently posted..How does an astronaut washes his hands?My Profile

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

  24. I got everything worked out except I can’t get the “Powered by Blogger” removed. Do you know how?
    Amber @ Dessert Now, Dinner Later! recently posted..Key Lime CupcakesMy Profile

  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.

    http://tipsandtricktutorials.blogspot.com/2013/02/blogger-hack-horizontal-recent-posts.html
    Kelly@ Here Comes the Sun recently posted..$175 Amazon AND Target Gift Card Giveaway!My Profile

  26. Hey Only “Powerd By Blogger Widgets” is displaying… please help me… i wanted it urgetly..
    Vishwas ]kVn[ recently posted..6 in One Social Widget For BloggerMy Profile

  27. Hi has there been any update on this widget? I really want to have it below my header :)
    Charlotte Evans recently posted..Storage Inspiration #3: My Spring/Summer Nail Polish CollectionMy Profile

    • 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.
    Viesturs recently posted..Horizontal Recent Post Widget For Blogger BlogMy Profile

  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
    Bothayna recently posted..Original Egyptian Molukhiya RecipeMy Profile

  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 =)
    Jennie @ The Diary of a Real housewife recently posted..101 Activites for Kids this SpringMy Profile

  33. Something missing with this tutorial. i guess the javascript..
    jelbee recently posted..One Piece Movie 9: Bloom In The Winter, Miracle Sakura English SubMy Profile

  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!

  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.

Trackbacks

  1. [...] For the complete tutorial together with the customizable options (like show post summary, post date, etc.), CLICK HERE. [...]

Leave a Comment

*

Current day month ye@r *

CommentLuv badge