Something Swanky

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

Ashton

Ashton is the owner and author ofSomething 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.
Follw me!

Latest posts by Ashton (see all)

   

68 Responses to “My Favorite Blogger Hack: Horizontal Recent Posts Thumbnails”

  1. anne posted on October 13, 2012 at 4:16 am (#)

    Gotta try this ! Thanks for sharing !

  2. Rhondi posted on October 13, 2012 at 2:59 pm (#)

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

  3. Stephanie posted on October 14, 2012 at 10:18 pm (#)

    Is the code missing?

    • Ashton replied: — October 14th, 2012 @ 10:54 pm

      yes! Sorry…working on it :P

  4. Lynet Witty posted on October 16, 2012 at 10:05 am (#)

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

    • Ashton replied: — October 17th, 2012 @ 4:24 pm

      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. Holly posted on October 16, 2012 at 10:04 pm (#)

    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!

    • Ashton replied: — October 17th, 2012 @ 4:22 pm

      Sorry! It’s the switch to WP. I lost a few things– this code included. Should have it back up by tonight :)

  6. Tanmay posted on October 17, 2012 at 7:38 am (#)

    Where’s the code ?

    • Ashton replied: — October 17th, 2012 @ 4:17 pm

      Sorry! I lost some stuff in the transfer to WP. Will get it up soon!

  7. Kendra posted on October 18, 2012 at 3:05 am (#)

    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!

    • Ashton replied: — October 18th, 2012 @ 8:11 am

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

      • Kendra replied: — October 19th, 2012 @ 3:21 am

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

    • Liz Fourez replied: — October 23rd, 2012 @ 1:22 pm

      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

      • Ashton replied: — October 25th, 2012 @ 2:57 pm

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

    • Maureen Sklaroff replied: — October 24th, 2012 @ 3:57 am

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

      • Ashton replied: — October 25th, 2012 @ 2:52 pm

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

  8. Jelli posted on October 18, 2012 at 4:46 pm (#)

    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.

  9. Kathy posted on October 21, 2012 at 6:34 pm (#)

    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

    • Ashton replied: — October 25th, 2012 @ 3:19 pm

      Thanks, I know. There were some issues with this post when I moved to WP. I’m hoping to have it fixed soon. I’ll announce on FB as soon as I do!

  10. Heidi posted on October 22, 2012 at 3:04 pm (#)

    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. Kelly@ Here Comes the Sun posted on October 22, 2012 at 9:15 pm (#)

    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.

    • Ashton replied: — October 25th, 2012 @ 3:06 pm

      So glad!!!

  12. PrinceArnold posted on October 24, 2012 at 10:03 am (#)

    Is the code back up?

    • Ashton replied: — October 25th, 2012 @ 2:49 pm

      Not yet. I’ll announce it on FB when it’s working :(

  13. Tracy posted on October 24, 2012 at 10:41 pm (#)

    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. sarah posted on January 2, 2013 at 11:29 pm (#)

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

    • Ashton replied: — January 3rd, 2013 @ 1:47 am

      Ugh, no. Not fixed yet. I’ve made several attempts, but haven’t given up yet. Will go up on FB once this gets fixed!

  15. Kim posted on January 22, 2013 at 5:57 pm (#)

    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.

    • Ashton replied: — January 22nd, 2013 @ 8:52 pm

      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. Kim posted on January 23, 2013 at 1:45 pm (#)

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

  17. Kim posted on January 23, 2013 at 1:47 pm (#)

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

  18. Tumi posted on February 1, 2013 at 7:11 pm (#)

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

    • Ashton replied: — February 2nd, 2013 @ 2:38 am

      YEs! I think it will be going up next week :)

  19. emily posted on February 1, 2013 at 10:49 pm (#)

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

    • Ashton replied: — February 2nd, 2013 @ 2:37 am

      Really soon– I just figured out a way to do it! It will probably be next week’s design post :)

  20. Mindy posted on February 9, 2013 at 1:08 pm (#)

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

    • Ashton replied: — February 9th, 2013 @ 4:24 pm

      haha— yes. I’ve been trying to figure it out for a while, but I think I’ve got it fixed now. post should be up Tuesday or Wednesday.

      • Mindy replied: — February 9th, 2013 @ 5:52 pm

        Awesome! Thanks so much. I shall return. :)

  21. DIOGO posted on February 10, 2013 at 4:36 pm (#)

    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/

    • audrey replied: — February 14th, 2013 @ 2:48 pm

      thank you! i have been waiting for the fix, and this worked! ahh, so happy!

      • Kathleen @ Carrie Bradshaw Lied replied: — February 15th, 2013 @ 12:50 pm

        Thanks so much for the suggestion – but it looks like you’re replacing ‘ with the same thing?

        I’m confused!

        • Amber @ Dessert Now, Dinner Later! replied: — March 1st, 2013 @ 6:08 pm

          Replace the ‘ with ” (that worked for me)

          • Lorene (just Lu) replied: — April 21st, 2013 @ 7:54 pm

            Yay! I just put this on my blog, and, as Amber said, replacing all of the ‘ (single apostrophe) with ” (quotation marks) and updating it to pull from my feed worked for me.

  22. Summer posted on February 13, 2013 at 6:23 pm (#)

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

  23. Lisa posted on February 13, 2013 at 9:13 pm (#)

    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

    • audrey replied: — February 25th, 2013 @ 3:19 am

      hey Lisa,

      in order to hide the “powered by blogger” all you need to do is add this code:

      .bp_footer{display:none;}

      to your blog’s HTML.

  24. Amber @ Dessert Now, Dinner Later! posted on February 24, 2013 at 5:24 pm (#)

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

  25. Kelly@ Here Comes the Sun posted on March 4, 2013 at 12:52 pm (#)

    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

  26. Vishwas ]kVn[ posted on March 15, 2013 at 10:32 am (#)

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

  27. Charlotte Evans posted on March 29, 2013 at 11:13 pm (#)

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

    • Ashton replied: — April 2nd, 2013 @ 10:55 pm

      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. Viesturs posted on April 12, 2013 at 4:43 pm (#)

    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.

    • Sarah replied: — April 22nd, 2013 @ 12:04 pm

      This worked perfectly. Thank you!!

  29. Amy posted on July 8, 2013 at 10:32 pm (#)

    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. Bothayna posted on September 20, 2013 at 4:17 pm (#)

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

  31. Natalia posted on March 17, 2014 at 2:20 am (#)

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

  32. Jennie @ The Diary of a Real housewife posted on March 18, 2014 at 4:11 pm (#)

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

  33. jelbee posted on March 26, 2014 at 2:17 pm (#)

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

  34. gi3220 posted on April 7, 2014 at 6:52 pm (#)

    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!

    • MakeupWithAHeart replied: — April 18th, 2014 @ 12:00 am

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

  35. Anon posted on July 9, 2014 at 9:31 am (#)

    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. Aakash posted on September 12, 2014 at 11:07 pm (#)

    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. Cara Mengunci Folder posted on September 28, 2014 at 12:34 pm (#)

    thanks for your sharing

  38. Lindsay posted on October 21, 2014 at 10:32 pm (#)

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

  39. Sozibul Islam posted on November 11, 2014 at 4:41 am (#)

    Recent Posts Code Is Rally Good.

Trackbacks/Pingbacks

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

Leave a Comment





Current ye@r *