How to add Custom Thumbnails in Blogger?

Thumbnails are featured images that appear next to your blog posts on the homepage, search results or as featured images on social media. 

They can help attract readers' attention and make your blog look more professional and appealing. However, sometimes you may also not want to show the same image in your post content.

For example, you may want to use a different image for the thumbnail than the one you use in the post, or you may want to avoid repeating the same image twice on the same page.

Maybe you want to get more clicks and increase CTR in Google Discover, so a custom thumbnail is needed for your blog that doesn't hamper the website performance.

But, in Blogger you don't have any option for featured images for the posts. And you might be wondering, how to add Thumbnails without showing them in posts in Blogger?

In this case, you can use a simple trick to add thumbnails without showing them in posts in Blogger.

The trick is to use a hidden HTML image tag at the beginning of your post. Blogger basically takes the first image as the posts thumbnail, so this tag will tell Blogger to use that image as the thumbnail, but it will not display it in the post content. You can do this in 2 ways:

Manual Way

Here are the steps to follow

1. Go to Blogger and create a new post or edit an existing one. Switch to the HTML view by clicking on the HTML tab at the top left corner of the editor.

2. Find or upload the image that you want to use as the thumbnail. You can upload it directly from your computer using Blogger's image upload tool. Copy the URL of the image to your clipboard.

3. Paste the following code at the very start of your HTML code:

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

   Replace `image-url` with the URL of your image that you copied earlier.
   

   Paste the HTML Code at the start of the blog post.

4. Write or edit the rest of your post content as usual. You can add other images, text, links, or any other elements that you want. 

5. If everything looks good, publish or update your post.

That's it! You have successfully added a thumbnail without showing it in your post content in Blogger.

Using Thumbnail Code Generator

You can use our thumbnail code generator tool for Blogger. This tool allows you to paste an image URL and generate a code that you can paste into your blog post. Here are the steps to use the thumbnail generator:

1. Go to https://www.innateblogger.com/p/thumbnail-generator-for-blogger.html

2. Paste the URL of the image that you copied earlier.

3. Add image title related to your blog post (for SEO purpose).

4. Click on the "Submit" button and copy the output code that appears below.


Guide for using Thumbnail Code Generator for Blogger

5. Paste the code into your blog post's beginning in the HTML view.

That's it! You have successfully created a thumbnail image for your blog post using the thumbnail generator tool from Innate Blogger.

Conclusion

Adding a custom thumnail in blogger posts is easy if you simply follow the steps mentioned above. You can add the thumbnail code manually or generate it using the thumbnail code generator.

Simply paste the code at the beginning of your blog posts. This way, you can have more control over how your blog posts look and create a more attractive and engaging blog for your readers.