Homepage image thumbnail is an image that is the preview of a particular post inside your blog or website. A post image on the other hand is the actual image found inside your post when viewed. Below, you can only see one image but there are actually two, the other one is hidden. You can prove what I am saying when you try to preview the link of this post using the Facebook Debugger, click here.

Actual post image

post image

Why do we need to do this simple hack? A very good example of this is when you are writing a post about a video of something. You can just make an image of a video with a play button. But, that can be misleading to your readers, because they might click that image assuming the image is the video but it's actually just an image. They might get irritated and think that you are tricking them. But if that image will only be seen in homepage and another image will be seen in the actual post then that's the thing that we are going to do for this tutorial.

What we just need to do is make 2 images for that particular post, one that will activate during the homepage view and one that will be seen during the post view.

STEPS:

1. Create a New Post and write all the needed paragraphs regarding your post.

2. When done, upload your two images inside your blogger post.

3. Make sure, to put the image that you wanted to appear in homepage view just above the other image. And your second image will be the one that will be seen only during the post view.

4. When done with your images, switch from Compose to HTML.

5. Inside your post HTML, edit the div style if your first image. Add the given code below inside the style="".

display:none;

6. When done, your code should be the same as the code below.
<div class="separator" style="display: none; clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0imO5Hj_7BVZR96Q-LNzan_8fhQduepgI4RVyqK5QY7MIAiDSFXdjOaZHrzgvdHFJ-52ro7wvz8HhzyXzhgnZGBljD-95dcLO9TMsqUyOF64m1r9hCSyYMxYXC4HbIOC8bsara2GUAWI/s1600/766554543478.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="300" data-original-width="550" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0imO5Hj_7BVZR96Q-LNzan_8fhQduepgI4RVyqK5QY7MIAiDSFXdjOaZHrzgvdHFJ-52ro7wvz8HhzyXzhgnZGBljD-95dcLO9TMsqUyOF64m1r9hCSyYMxYXC4HbIOC8bsara2GUAWI/s1600/766554543478.jpg" /></a></div>

Notice the style and display:none; inside the div tag. That's where you need to place display:none;

7. When done, Publish your post and view your post in your homepage as well as the post itself to see whether the hack that we made works or not.

If you have something to share or ask regarding this tutorial, please leave a comment below. Thank you!