How to Show Images only in Blogger’s homepage and hide from post page

Looking for how to add a custom
posts thumbnail in blogger or how to hide a particular picture/image from your posts
in Blogger and make them visible on your homepage as Thumbnails. Other
platforms such as WordPress enjoys this feature when creating your post. You
have an option to choose a specific image to show as thumbnail on your blog
homepage for that post.

This feature makes your site
looks professional and nice when you have an image to support the post title
and maybe snippet too or you don’t want to display the whole image in order to
attract readers to read the full content.  Now, let’s start the tutorial.

Step 1: Go to
Blogger Dashboard -> Template -> Edit Html

Step 2: Click
anywhere in Html Editor and press CTRL+F from your keyboard, a Search Box will
be appear in top right corner of HTML
Editor.

Step 3: Copy the
below code and paste in Search Box then hit ENTER

]]></b:skin>

Step 4: Copy
given below CSS code and paste it immediately after/below this ]]></b:skin>

<b:if cond=’data:blog.pageType != &quot;index&quot;’><style>.hideimage{display: none;}</style></b:if>

And then click Save
theme to save the Template

(adsbygoogle = window.adsbygoogle || []).push({});

Step 5:  Now, every time you create a new post, add
your image (the one you wish to hide) first and then move to the HTML editor.

Then search for the code for that image which will appear
like the below;

Kindly note that this html code for the image can be located
anywhere within the post, depends on where you have the uploaded image in post
(could be in the Beginning, Middle or End)

Step 6: Then replace
the code highlighted below in caption with code “hideimage”

And you are done. You will need to be repeating Step 5 and 6
for every post you create.

Kindly drop you comment and let us know your experience.