• Business + Productivity
  • Creative Projects
  • Recipes
  • Travel
    • Disneyland
    • Facebook
    • Instagram
    • Pinterest
    • Twitter

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!

Related Posts

  • Blogger: Add ‘Related Post Thumbnails’ After Your Posts
  • How To Truncate Posts in Blogger
  • Add Your Instagram Photos to Your Blogger Sidebar
  • Add Pinterest Hover Button in Blogger
  • 10 Posts to Add to Your Editorial Calendar Before End of Year
  • Blogger or WordPress?
  • How to Offer A Free Printable in Blogger
  • Customize Block Quotes in Blogger
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:
  • Snap
Categories:
  • Blogger
  • Blogging
  • Top Blogging Tips
Mentions:
Blogger, Blogging Tips

Keywords:
Add Featured Posts in Blogger

Last Updated:
December 13, 2018

  • One Word Goal: The Celebration Shoppe
  • One Word Goal: 30 Minute Crafts
  • Updated! – How to Embed a Pinterest Board on Your Blog
  • How to Offer A Free Printable On Your Blog
  • Customize Block Quotes in Blogger
  • How To Make an Image Slider in Blogger
  • Add Your Instagram Photos to Your Blogger Sidebar
  • A Beginners Guide to Blogger’s Template Designer

«
»

Blogger, Blogging, Top Blogging Tips 57

Comments

  1. rebecca lopez says

    April 30, 2013 at 11:59 am

    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.

    Reply
    • Lora @ Craftivity Designs says

      April 30, 2013 at 4:24 pm

      The // // is all I’m seeing too!

      Reply
  2. Jamie @ Scattered Thoughts of a Crafty Mom says

    April 30, 2013 at 5:14 pm

    Can’t wait to try it, please let me know when you have fixed the post!!!
    ~Jamie

    Reply
  3. Eileen Hull says

    May 1, 2013 at 9:53 pm

    Thanks- iIt worked! Cool…

    Reply
    • Tauni says

      May 2, 2013 at 10:03 am

      Glad it worked Eileen! It’s such a fun way to share posts. xoxo T.

      Reply
  4. Laura says

    May 1, 2013 at 10:41 pm

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

    Reply
  5. tisa says

    May 3, 2013 at 8:54 am

    it worked! Thanks for the info!!!

    Reply
  6. eva scott says

    May 4, 2013 at 8:27 pm

    Yah! Thanks so much for your tutorials!!

    Reply
  7. The Brain Lair says

    May 12, 2013 at 8:09 pm

    So easy! Thank you! I’ve been looking for something like this!

    Reply
  8. Kylie says

    May 13, 2013 at 4:23 pm

    How do I get “featured posts” or “recent posts” to show above it?

    Thank you for sharing!

    Reply
  9. Alli Miller @ Cupcake Diaries says

    June 1, 2013 at 3:01 pm

    I don’t know why I look anywhere else for tutorials. This was the only one of these that I’ve seen that has actually worked. Thank you!!

    Reply
    • Tauni says

      June 2, 2013 at 12:30 pm

      Alli, I am so glad this worked for you! I am going to pop over and check it out! xoxo Tauni

      Reply
  10. Rachel @ R & R Workshop says

    August 5, 2013 at 3:21 pm

    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

    Reply
    • Tauni says

      August 6, 2013 at 9:11 pm

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

      Reply
  11. wallpapers says

    August 28, 2013 at 8:17 am

    it’ s working. but it shows only 5 posts only. even change to 10

    Reply
  12. Deonna Wade says

    September 3, 2013 at 7:13 pm

    hey great tutorial…I had a question though…how did you get the little line and featured posts image above it?

    Reply
  13. Russell says

    September 10, 2013 at 11:21 pm

    It’s not working. I copied the code but all it shows is an empty box.

    Reply
  14. bibek says

    September 15, 2013 at 12:14 am

    worked , Thanks!

    Reply
  15. Raymond says

    September 30, 2013 at 2:17 pm

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

    Reply
    • Tauni says

      September 30, 2013 at 9:46 pm

      Raymond, I don’t know how to do this in blogger. In WordPress you can use a plugin like category thumbnail list. -Tauni

      Reply
      • Raymond says

        October 1, 2013 at 12:03 am

        Well, I’d better try WordPress then. Thanks, Tauni! Xx

        Reply
  16. Raymond says

    September 30, 2013 at 2:17 pm

    *like

    Reply
  17. Sheila Lynne says

    October 1, 2013 at 1:32 pm

    It worked for me, however, i have a strange little “Blogger” Icon on mine and I was wondering if you know how to remove it?

    Reply
    • Tauni says

      October 1, 2013 at 9:28 pm

      Hey Sheila, Yes! You can refer to this post for instructions on changing out your favicon: https://taunieverett.com/add-favicon-to-blogger/ xoxo Tauni

      Reply
  18. Nicole says

    October 7, 2013 at 2:18 pm

    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

    Reply
    • Tauni says

      October 7, 2013 at 3:20 pm

      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

      Reply
  19. Nicole Orrell says

    October 8, 2013 at 8:55 am

    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.

    Reply
    • Tauni says

      October 11, 2013 at 7:48 pm

      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

      Reply
      • Angela says

        December 7, 2013 at 1:21 am

        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!

        Reply
        • Tauni says

          December 8, 2013 at 5:35 pm

          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!

          Reply
  20. Rahul Shetty says

    November 30, 2013 at 9:25 pm

    Thank you this worked for me ๐Ÿ™‚

    Reply
    • Tauni says

      December 1, 2013 at 9:33 pm

      You’re welcome! Happy blogging – Tauni

      Reply
  21. Chynna says

    January 17, 2014 at 1:08 pm

    It’s not working it’s just showing the code on my blog! ๐Ÿ™

    Reply
    • Tauni says

      January 26, 2014 at 5:30 pm

      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

      Reply
  22. A Thrifter in Disguise says

    February 21, 2014 at 8:41 am

    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?

    Reply
    • Tauni says

      February 25, 2014 at 4:04 pm

      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

      Reply
  23. lipsiie says

    March 14, 2014 at 8:40 am

    Im having the same problem, the html code just shows up, and I copied the code exactly and changed just the url.

    Reply
  24. Natalia says

    March 17, 2014 at 12:42 am

    This worked perfectly for me! Do you know how to do this same thing but for popular posts instead of recent?

    Reply
  25. Umer Prince says

    May 31, 2014 at 11:36 pm

    Now working

    Reply
  26. Danielle says

    December 12, 2014 at 5:43 pm

    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!

    Reply
    • Tauni says

      November 2, 2015 at 7:30 pm

      Unfortunately, this only works for recent posts ๐Ÿ™

      Reply
  27. shayna says

    January 9, 2015 at 12:05 am

    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 ๐Ÿ™

    Reply
  28. Miranda Button (@MirandaButtonUK) says

    May 3, 2015 at 4:44 am

    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.

    Reply
    • Caterina says

      October 30, 2015 at 3:54 pm

      Where did you copy exactly this code in your template? I have the same issue ๐Ÿ™ thank you xx

      Reply
      • Tauni says

        November 2, 2015 at 7:34 pm

        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

        Reply
  29. jamie says

    September 24, 2015 at 12:00 pm

    Quick question, Before I add this gadget to my page, can you tell me if it is hosted on google code? Google code is shutting down Jan 2016 and if so, it won’t work after jan 2016. (http://www.codeitpretty.com/2015/03/how-google-code-shutdown-can-affect.html)

    Reply
  30. Tulika says

    March 21, 2016 at 3:51 am

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

    Reply
    • Tauni says

      March 21, 2016 at 11:30 pm

      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

      Reply
  31. Brain's Yoga says

    December 4, 2017 at 2:55 am

    Will this show correctly on smart phones?

    Reply
    • Tauni says

      December 4, 2017 at 1:32 pm

      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.

      Reply
  32. Destiny Okpalaeke says

    December 26, 2018 at 1:05 pm

    is not even showing in my blog

    Reply
    • Tauni says

      December 26, 2018 at 4:20 pm

      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

      Reply
  33. Panduan Blog says

    March 17, 2019 at 2:28 am

    Thanks for sharing ๐Ÿ™‚

    Reply
    • Tauni says

      March 18, 2019 at 5:12 pm

      You bet! Hope you were able to get those featured posts up and running! xo Tauni

      Reply
  34. Max says

    May 30, 2019 at 11:23 pm

    The problem is the external JS which does not exist anymore at bloggergadgets.googlecode.com

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recipe Rating




Featured Posts

Disneyland Lunar New Year Mandarin Mousse Cake

The Best Disney Lunar New Year Food

Disneyland Lunar New Year Festival Entrance

Disney Lunar New Year

12 CLASSIC DISNEYLAND TREATS 1

12 Classic Disneyland Treats You Can Get All Year Round

Disneyland Snacks that Will Not Wreck Your Diet Bengal Outback Skewer

10 Disneyland Snacks That Will Not Wreck Your Diet

WordPress Hosting by House of Ideas

Copyright © 2023 SNAP! Creativity · Design by: Key Lime Digital Designs· Darling Theme