How To Display Blogger’s Recent Posts Horizontally

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 
IMAGE URL” />

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