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)
6. Click “Save.” Drag HTML gadget to the area directly above the “Blog Posts” gadget. Click “Save Arrangement” and done!
Gotta try this ! Thanks for sharing !
Thanks Ashton! You’re so smart. I can’t wait to try this out. I love this cursive font too!
Is the code missing?
yes! Sorry…working on it
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!
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!
Sorry! It’s the switch to WP. I lost a few things– this code included. Should have it back up by tonight
Where’s the code ?
Sorry! I lost some stuff in the transfer to WP. Will get it up soon!
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!
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,
Liz
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!
Maureen Sklaroff recently posted..What We’ve Been Reading Wednesday–Graphic Novel Collections of Poe Stories
I know– this post is having the worst issues! I’ll announce on FB when it works again
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 Fold
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
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!
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!
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.
So glad!!!
Is the code back up?
Not yet. I’ll announce it on FB when it’s working
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
It’s been several months (from the comments). I’m curious- was this ever fixed? I am having the same issue.
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!
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!
Yes, suddenly it’s working today! Very happy with it! thanks!
oh shit, I made a mistake, sorry, still not working but I know you’re working on it
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 HEIGHTS
YEs! I think it will be going up next week
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????
Really soon– I just figured out a way to do it! It will probably be next week’s design post
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 Lunch
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.
Awesome! Thanks so much. I shall return.
Mindy recently posted..Color Me Fruity: A Kid Lunch
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?
thank you! i have been waiting for the fix, and this worked! ahh, so happy!
Thanks so much for the suggestion – but it looks like you’re replacing ‘ with the same thing?
I’m confused!
Replace the ‘ with ” (that worked for me)
Amber @ Dessert Now, Dinner Later! recently posted..Peanut Butter Wonder Bars
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.
Lorene (just Lu) recently posted..Cookie Sheet Letter and Number Matching
Woo hoo! Thanks so much DIOGO! I changed the apostrophes and it worked. You rock!
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
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.
audrey recently posted..fun find friday: fairytale follies
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 Cupcakes
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!
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 Blogger
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 Collection
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
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 Blog
This worked perfectly. Thank you!!