How to Add Featured Images or Thumbnails in Blogger

Advertisements
Featured images better known as post thumbnails are a popular feature that every blogger adores to have in his Blogger Template. Today most of the quality Blogger templates support custom post thumbnails functionality. Some popular Blogger development websites like Templateism and Themeforest have some standards of keeping this feature must. However, some new developers as well as users don’t have any idea how to setup a feature image or post thumbnail in Blogger. Therefore, in this article, we will be providing a method to successfully display a feature image thumbnail in blogger.

You may have notice that all most the majority of the blogger templates takes the first image from a post and displays it as a feature post thumbnail on homepage and archive pages. Sometimes users want to have an ability to customize those Featured Images or Post Thumbnails in Blogger.  Mostly themes have a built-in summery feature that does the most the job pretty much accurately but it doesn’t let you set up a feature image or post thumbnail of your choice. Even if you are able to setup a feature image it does not gives same efficient results that WordPress blog does.

Beginners Guide to Feature Post thumbnail in Blogger:

Before getting started with the tutorial, I would recommend you to setup automatic post summery script for blogger so that you can easily setup a feature image through a minor tweak that we will be discussing below.

To add a feature image in blogger posts, simply go to Blogger ›› New Posts  ›› and click "Upload Image" button which will open up a image uploading wizard. You can use that to upload any image from your computer or you can also add an existing image from your Picasa image library.


After uploading the image select “Edit HTML” tab from the top left corner and copy the complete URL of the image which would somewhat look like as it can be seen below:


http://2.bp.blogspot.com/-uHgj9VUvTgY/UwTR9fgi8bI/AAAAAAAADxE/LpOrJ6pnRv0/s1600/Picasa-Images.png

People want an ability to display feature image or post thumbnail only on achieve and homepage that appears along with the post except (summery). They don’t want to have the feature image to be shown on the same post when viewer opted to view it. Now to make it possible, paste the following piece of coding at the very top of the “Blogger post Editor” through “Edit HTML” tab. Remember: Do not forget to replace the image-here with the URL of your image that you would like to show as feature image or post thumbnail.

<img src="image-here" style="display:none;">

Once everything is done, publish your post by pressing "Publish" button. We hope this article have helped you in learning the technique to add feature image or post thumbnail in Blogger. if you have any questions or problems regarding this topic, please do not hesitate to leave your suggestions below in the comments. 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

29 comments

February 19, 2014 at 11:34 AM

Very well written article bro! I will mus try it.
Thanks for sharing :)

February 19, 2014 at 8:25 PM

How about putting featured post with thumbnails on the homepage?

Editorial Team MOD
February 20, 2014 at 7:19 AM

Yes, that tutorial is under progress.

February 20, 2014 at 6:08 PM

Use the rel="image_src" in the homepage

February 28, 2014 at 10:03 AM

You win! Everything else I read said it couldn't be done. THANK YOU!

Editorial Team MOD
March 1, 2014 at 7:56 PM

We're glad it worked for you :) Cheers!

April 22, 2014 at 12:24 PM

but where is Blogger post Editor?

Editorial Team MOD
April 22, 2014 at 12:40 PM

Blogger >> Add new Post

April 30, 2014 at 2:26 PM

please, can you tell me how to put a thumbnail to show when i share a link of one of my posts? For example, when i post one article on facebook, the only image that appears is my main screen page. Watch for example
http://yisyou.blogspot.gr/

Editorial Team MOD
May 1, 2014 at 1:41 AM

Read this tutorial

http://www.mybloggerlab.com/2013/05/how-to-add-facebook-open-graph-meta-data-in-blogger.html

December 10, 2014 at 2:59 AM

Thanks ... that did the job :)

February 3, 2015 at 7:46 PM

Wow. So simple and effective. Kudos. Made this change to the top of my post and the Blogger Post List API now returns that image URL.

February 6, 2015 at 1:36 PM

This worked perfectly,thank you! Is there a way to enable this code to go into every post automatically? Basically I want the second image in every post to be the feature thumbnail?

April 24, 2015 at 11:38 AM

Had I only known it was this simple... Thank you so much!

Editorial Team MOD
April 26, 2015 at 11:55 AM

You're welcome, Do share our blog with your friends.

May 23, 2015 at 12:54 PM

wow...how did you merge your blogger comments with google+ comments?
nice work BTW.

Editorial Team MOD
May 24, 2015 at 2:53 AM

Here's the tutorial

http://www.mybloggerlab.com/2013/04/how-to-use-blogger-and-google-comments-together.html

Thank you

May 29, 2015 at 10:49 PM

This worked perfectly,thank you!

June 9, 2015 at 9:05 AM

Thank you, this worked for me, in that, when posting the link (within facebook), it makes the right arrow appear indicating choices and I was able to pick the photo I wanted to appear in the thumbnail. Great help! :)

June 27, 2015 at 12:50 AM

Thank you!

January 31, 2016 at 5:21 PM

I'd like to add a image, and just to clarify what I'm looking for:
When writing my blog's url in a message or post, there is a image that appears in messenger (a wrench) and no image in Whatsapp for example. I know that when I write Whether.com in Whatsapp a image does appear. Which meta tag do I add to have that on my blog?
Thanks.

February 24, 2016 at 5:25 AM

Thanks. But it's not working 100%. Featured pictures got hidden too.

May 10, 2016 at 5:44 PM

this is not functioning to me

Editorial Team MOD
May 27, 2016 at 11:27 PM

It only works with the sites that are using Auto Thumbnail on their Archive and Home pages.

August 2, 2016 at 11:06 AM

useful article for me .thank u for sharing this...

August 5, 2016 at 11:43 PM

working bro thanks alot

August 16, 2016 at 12:32 PM

It worked the first time I tried it. Great piece. Thanks soo much

Editorial Team MOD
August 19, 2016 at 5:23 AM

I am Glad, it worked for you.

September 10, 2016 at 8:13 AM

does it work on simple template on blogger?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.