How to hide featured images in the article page on Blogger

There can be scenarios when you have featured image for a post, but instead of removing it you can just hide your feature image. Here is the real trick that will make your Blogger featured image that will only show your featured image only on home page.

You just have to add a simple CSS code snippet in your Blogger template and then use the hidepic class each time you want to hide your featured image in your post. Just follow the simple steps and you will be done in no time.

How to hide featured image in Blogger post and only show it on a homepage

Step 1. Login to your Blogger blog and click on Template and select Edit HTML.

How To Hide Featured Image In Blogger Post Page

Step 2. Click anywhere inside the HTML code area and by pressing Control + F together and search for below code.

 ]]></b:skin>

Step 3. Past the below code just below the ]]></b:skin> code.

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

Step 4. Add the CSS code snippet to hide (display:none) the images with hidepic class, and Click Save to save your template.

So, how it works?

Whenever you create a new post and if you want to hide your featured post image, switch to the HTML tab to see the HTML code of your image, which will look similar as below.

 <div class="separator" style="clear: both; text-align: center;">  
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGPnSYrXOGj-Xax7sRrnsXTZ2CSCfbCV2fRdexQWup1YQS87QwLmi5HnoqlnBgl2jo_lT6mNlAfYHEKFP4xTWNb046um9ioxIE-tcuzJKFIUfhMi4TKb4ZoP3q4y2VJ6_FmEdHAYfZ-Y/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGPnSYrXOGj-Xax7sRrnsXTZ2CSCfbCV2fRdexQWup1YQS87QwLmi5HnoqlnBgl2jo_lT6mNlAfYHEKFP4xTWNb046um9ioxIE-tcuzJKFIUfhMi4TKb4ZoP3q4y2VJ6_FmEdHAYfZ-Y/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Note: That the HTML code should be on the exact location where your feature image is.

Also, note that you have to make sure; you upload your images in Compose mode only or else the image code will omit the div containing the separator class.

Step 5. Replace the Separator CSS class with hidepic – below is the screenshot for your reference.

Now Publish or Update your post and enjoy or for any suggestion or queries or you have found any difficulties in implementing the codes, you may leave a comment below.