How to Add Featured Images or Thumbnails in Blogger

Socialize It →

Tweet

32

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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQXI09_Gi5mvUaEegG5mrRkgXnxKS-G1Giay3Y2j9FcrLM1enFy9PcnB8D8O4GiPscUlFTYLlot7Ba-hFMvyf5q9-nDc1AM5hgPA5E_pxxRsRiW8_JhUhtqKeqzYFOD8mdGeQC59QKRnww/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

About the Editorial Team

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