How to add different post thumbnail in blogger

 If you want to know - How to add a different post thumbnail in blogger which shouldn't be showing in Blog post, then you are in the right place here.

Lets see How to add a custom post thumbnail in blogger and it should not be displayed in blog post.

First of all we need to understand how to add a post thumbnail in blogger? It's very simple, there is no way like WordPress that you can separately add a featured image or thumbnail for your blog post. By default Blogger displayes the first image of the Blogpost as the thumbnail.

But, you can easily add a different post thumbnail in blogger which shouldn't show in Blog post by using a simple trick. Let's see how:

1. Open Blogger and create a new post

2. Now you need to add the image which you want to make post thumbnail.

3. After adding the image, click on the image > Setting > Original Size

4. Now switch to HTML view

5. Your code will appear like this:

<p>&nbsp;</p><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/a/AVvXsEgi-QVgYtns71Ml-L7VrjYdWHpZINY8AfFPQ3qmT4119gU-ErDoIHWTbSrh9CABP2qYfYpxbc4s-1_vCTyw31cA-e-y3GBgcq8KS0vkc66CwY0Sh9EwpFlrQ2uvWTZ8XNml4Vgk-mD12_UrLrpRzVmFyg6iqQ4QUOy3xS9aB11T-9jEKS-f8C6fkQ=s400" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="200" data-original-width="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEgi-QVgYtns71Ml-L7VrjYdWHpZINY8AfFPQ3qmT4119gU-ErDoIHWTbSrh9CABP2qYfYpxbc4s-1_vCTyw31cA-e-y3GBgcq8KS0vkc66CwY0Sh9EwpFlrQ2uvWTZ8XNml4Vgk-mD12_UrLrpRzVmFyg6iqQ4QUOy3xS9aB11T-9jEKS-f8C6fkQ=s16000" />
</a></div><br /><p></p>

6. Delete all the code is in white color above.

7. Now your code will be like this:


<img border="0" data-original-height="200" data-original-width="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEgi-QVgYtns71Ml-L7VrjYdWHpZINY8AfFPQ3qmT4119gU-ErDoIHWTbSrh9CABP2qYfYpxbc4s-1_vCTyw31cA-e-y3GBgcq8KS0vkc66CwY0Sh9EwpFlrQ2uvWTZ8XNml4Vgk-mD12_UrLrpRzVmFyg6iqQ4QUOy3xS9aB11T-9jEKS-f8C6fkQ=s16000" />

8. Now add the following code after img

style="display:none"

9. Now your code will be like this:

<img style="display:none" border="0" data-original-height="200" data-original-width="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEgi-QVgYtns71Ml-L7VrjYdWHpZINY8AfFPQ3qmT4119gU-ErDoIHWTbSrh9CABP2qYfYpxbc4s-1_vCTyw31cA-e-y3GBgcq8KS0vkc66CwY0Sh9EwpFlrQ2uvWTZ8XNml4Vgk-mD12_UrLrpRzVmFyg6iqQ4QUOy3xS9aB11T-9jEKS-f8C6fkQ=s16000" />

That's it now you can check that this image is not showing in Blog post. (Remember: This image should be the first image of the post to be thumbnail. )

Wrapping up: To add a different custom post thumbnail in blogger which is not shown on post we need to add that image on the first and hide it from appearing in blog post by using css.