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 ::
See 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;
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.
The // // is all I’m seeing too!
Can’t wait to try it, please let me know when you have fixed the post!!!
~Jamie
Thanks- iIt worked! Cool…
Glad it worked Eileen! It’s such a fun way to share posts. xoxo T.
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!!
it worked! Thanks for the info!!!
Yah! Thanks so much for your tutorials!!
So easy! Thank you! I’ve been looking for something like this!
How do I get “featured posts” or “recent posts” to show above it?
Thank you for sharing!
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!!
Alli, I am so glad this worked for you! I am going to pop over and check it out! xoxo Tauni
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
Well goodness Rachel. I would hug you right back…I hope that you enjoy having this feature on your site. xoxo Tauni
it’ s working. but it shows only 5 posts only. even change to 10
hey great tutorial…I had a question though…how did you get the little line and featured posts image above it?
It’s not working. I copied the code but all it shows is an empty box.
worked , Thanks!
Hi, I’d lie to ask you how to make it featured posts by its specified labels/category widget and vertical? Thanks Before!!
Raymond, I don’t know how to do this in blogger. In WordPress you can use a plugin like category thumbnail list. -Tauni
Well, I’d better try WordPress then. Thanks, Tauni! Xx
*like
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?
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
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
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
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.
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
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!
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!
Thank you this worked for me ๐
You’re welcome! Happy blogging – Tauni
It’s not working it’s just showing the code on my blog! ๐
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
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?
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
Im having the same problem, the html code just shows up, and I copied the code exactly and changed just the url.
This worked perfectly for me! Do you know how to do this same thing but for popular posts instead of recent?
Now working
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!
Unfortunately, this only works for recent posts ๐
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 ๐
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.
Where did you copy exactly this code in your template? I have the same issue ๐ thank you xx
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
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)
The above mentioned ‘code’ doesn’t work. I have copies pasted and followed all instructions 100% accurate. The code din’t work
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
Will this show correctly on smart phones?
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.
is not even showing in my blog
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
Thanks for sharing ๐
You bet! Hope you were able to get those featured posts up and running! xo Tauni
The problem is the external JS which does not exist anymore at bloggergadgets.googlecode.com