Tauni Everett

Bibbidi Bobbidi Chew

Tauni Everett » Business + Productivity » Blogging » Top Blogging Tips » How to Add Horizontal Featured Posts in Blogger

How to Add Horizontal Featured Posts in Blogger

snap2

Time for a Blogger tutorial! Who is ready?!

Today I am going to walk you through adding horizontal thumbnails of your most recent blog posts. Here is an example ::

snap1See the 5 square images? Those link to the 5 most recent posts! And they update automatically! COOL huh?! To add this to your own blog you need to —

1. Go to your Blogger Dashboard.

2. Go to Layout

3. Add a new HTML/Java Script Gadget to the area right above the posts.

4. Paste in this code. To copy put cursor at the beginning of the code and drag all the way to the end. 

<center><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;'><a href='http://www.bloggerplugins.org/?utm_src=bp_recent' target='_blank' title='blogger widgets'></a></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://pebblesinmypocket.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'>
</script></center>

5. Make these changes — 

At the bottom of the code change out YOUR feed url for the one shown. Make sure you keep the question mark!

So yours will look like this ::

<script src='YOUR BLOG URL/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'>
</script></center>

You can also change the number of posts by changing this …

var numberOfPosts = 5;

Or you can change the thumbnail size by changing this …

var imgDim = 125;
Press SAVE!  
Leave links and questions in the comment box!
about me
post summary
Popular Posts


Snap

Snap

Editor at Tauni Everett
Snap has contributed 472 articles on https://taunieverett.com since October 2, 2012.

Power Bio Box by Zyra Console



You are here:
Home
Business + Productivity
Blogging
Top Blogging Tips
How to Add Horizontal Featured Posts in Blogger
Title:
How to Add Horizontal Featured Posts in Blogger

Authors:
Categories:
Mentions:
Blogger, Blogging Tips

Keywords:
Add Featured Posts in Blogger

Last Updated:
December 13, 2018

Comments

  1. rebecca lopez says

    Is the code right on step 4? All it’s showing is this : // //
    Is that right? It seems like something is missing. I’m anxious to try this so I want to be sure before I do it. I’m so glad your doing a tutorial on this. 🙂 Thanks.

  4. Laura says

    Thank you, it worked! How do I center the images? And how can I customize the title (I’d like to choose the font, color, and left justify it)? Thanks so much Kendra!!

  10. Rachel @ R & R Workshop says

    OhTauni I wish i could hug you!! Ive been trying to find out how to do this for months!
    Thank you for this post! I look forward to future blogging tips 🙂

    Rachel

    • Tauni says

      Well goodness Rachel. I would hug you right back…I hope that you enjoy having this feature on your site. xoxo Tauni

  15. Raymond says

    Hi, I’d lie to ask you how to make it featured posts by its specified labels/category widget and vertical? Thanks Before!!

  18. Nicole says

    Tauni,

    When I paste this in and make the required change, I just see the html text on my blog, not the pictures. Help?!

    Nicole

    • Tauni says

      Nicole, When code appears like this, it’s usually because you haven’t installed all of the code. Are you making sure to keep the exclamation point in the code when you personalize it? Tauni

  19. Nicole Orrell says

    Thank you for Replying. I am not seeing an “!” in the code above.

    I copied and pasted the code above and changed “pebblesinmypocket” to “olivewoodgrove”. I am not making any other changes.

    • Tauni says

      Nicole, Without seeing the code on your site, it’s hard to say what the problem might be. Is your URL .blogspot.com or just .com?

      I meant question mark, not exclamation point.

      Thanks,
      Tauni

      • Angela says

        Isn’t working for me either. 🙁
        I’ve also copied the whole code on a word document so I could see any missing characters, but still all I get is the html text on my blog, not the pictures. My URL is .com hosted on blogspot. I’ve also tried the .blogspot.com but no luck.
        Would you have any idea what could be going wrong?
        Thank you so much in advance!

        • Tauni says

          Angela, It shouldn’t matter if you’re installing the code on a .com or a blogspot.com. The issue you’re encountering usually occurs when the html isn’t closed or when it’s in the wrong place. Without looking at your CSS it’s hard to say exactly what the problem is…Good luck!

    • Tauni says

      Chynna, I am sorry you’re having trouble with this…I don’t know if you were able to figure things out, but when code is showing on the blog it means that it’s not closed. Ether the code is in the wrong place, or the full string wasn’t copied. Good luck! xoxo Tauni

  22. A Thrifter in Disguise says

    I’m having the same problem with it just showing the code… double and triple checked it and I’m not missing anything. I’ve got a .com but hosted by blogger, too… not sure if that is messing something up?

    • Tauni says

      Hosting shouldn’t cause an issue. I know that a few people have had trouble with the code. It may be the theme you’re using. Unfortunately, it’s hard to trouble shoot the issue without being able to see it. Good luck. –Tauni

  26. Danielle says

    I’m having the same issue with it just showing the html code, but I’m going to look through my code more carefully (outside of the widget) to make sure other code was closed off properly. That said, any suggestions on how to edit the code to show random posts rather than recent ones? Thanks!

  27. shayna says

    I also had the same issue can you please tell me how to fix it…. It is taking me so long to find the exact posts slider i wanted and for some reason i cant get them to work 🙁

  28. Miranda Button (@MirandaButtonUK) says

    Thank you so much! This is exactly what I’ve been looking for.

    Like some others who previously posted, I also had problems with getting it to work with the java/html widget in a sidebar/footer etc. Instead, I copied the code into my Template under the section. I also added this line of text before the code: Featured Posts.. Now it shows up at the bottom of each individual post page and under the last post on the main page. Perfect.

      • Tauni says

        Hey Caterina, it’s been a while since this was shared and things may have changed, but you insert the HTML right above the post area in your CSS. I am on WordPress and haven’t maintained a blogger account that I can go test. Good luck! xo Tauni

  30. Tulika says

    The above mentioned ‘code’ doesn’t work. I have copies pasted and followed all instructions 100% accurate. The code din’t work

    • Tauni says

      So sorry the code didn’t work for you. It appears to work for some and not for others. Unfortunately I am no longer working with Blogger and I am unable to troubleshoot at this time. Good luck! Tauni

    • Tauni says

      It will work, but it’s probably not the best solution for mobile. Your site should have a mobile friendly version, if you’re on WordPress that’s as simple as a plugin. I am not sure quite how it works on Blogger as I no longer keep up with that platform.

    • Tauni says

      Sorry! This post was written over five years ago and I am sure Blogger has changed a lot since then, which may have affected the process? I don’t use it at all anymore or I’d try to help you troubleshoot. Good luck! Tauni

WordPress Hosting by House of Ideas