Optimizing Your Blogger Blog: Adding Featured Images and Thumbnails

How to Add Featured Images or Thumbnails in Blogger

Featured images or post thumbnails are highly sought-after features in Blogger templates. They enhance the visual appeal of blog posts and are supported by most quality templates available today. Prominent Blogger development websites such as Templateism and Themeforest consider this feature essential. However, many users, especially new developers, may be unsure about how to set up featured images or post thumbnails in Blogger. In this article, we will provide a step-by-step method to successfully display feature image thumbnails in Blogger.

One may have noticed that the majority of Blogger templates automatically take the first image from a post and display it as a featured post thumbnail on the homepage and archive pages. However, users often desire the ability to customize these featured images or post thumbnails. While most themes have a built-in summary feature that functions accurately, they do not allow users to set up feature images or post thumbnails of their choice. Additionally, the efficiency of this feature in Blogger falls short compared to WordPress blogs.

Beginner's Guide to Feature Post Thumbnails in Blogger

Before we delve into the tutorial, it is recommended to set up an automatic post summary script for Blogger. This will enable easy setup of a feature image through a minor tweak discussed below.

To add a feature image in Blogger posts, follow these steps: Go to Blogger ›› New Posts ›› and click the "Upload Image" button, which will open an image uploading wizard. You can upload an image from your computer or select an existing image from your blog image library.

After uploading the image, select the "Edit HTML" tab in the top left corner. Copy the complete URL of the image from the HTML editor. The URL will look similar to the following:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQTnWYmZ8vAaEVSSyp5e6dDofaqV54Tli5TlCOO_vuCEsDf1Dt1eG71JhjX1CTn-2KryX-jHMqv608xN_h2cW0W0clGq2btWxxsoSGj4ZpbNaZdq3LunwaUToh-Jybs7YI4GQRPFIGsPICO39cqtuudsuGMr6-LiXA9ENkv7cQW2tDnMltHiVAB4-z/s1600/All%20Epesoide.png

Users often prefer to display the feature image or post thumbnail only on archive and homepage pages, accompanying the post summary. They do not want the feature image to appear within the post when viewed individually. To achieve this, paste the following code at the very top of the "Blogger Post Editor" in the "Edit HTML" tab. Make sure to replace "image-here" with the URL of your desired image for the feature image or post thumbnail:

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

Once you have completed all the steps, publish your post by pressing the "Publish" button. We hope this article has helped you learn the technique to add a feature image or post thumbnail in Blogger. If you have any questions or encounter problems regarding this topic, please feel free to leave your suggestions in the comments below.