Show Blogger Image only in Homepage and Hide it in Post Page

Want to know how to hide specific images from blogger posts pages and to appear only in homepage? In this tutorial we'll learn how we can do this! So let's start hiding our images from posts pages:

Step 1. 


If you are using the old Blogger interface:

• Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

• Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Find (CTRL + F) this code in your template:

    }]]></b:skin>

Step 3. Copy and paste the following code just below it

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

Step 4. Save the Template.

Now everytime you create a post, firstly add the pic you want to hide and then switch to Edit HTML tab where you'll see the HTML code of the image you have added that will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSI87JGUD2evvU9pUbC49Mqn0VNuM_E4ZaMHGp7XvlPiVI8_iaBzC_N83Kt0dbbirtUErvCHvkg2IZC3O-4CHGmpANkbqv3ODkkomNKgdfbdlfFwRAjuxTrCRuFgb-VnFISVaPnX2kyo/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/AVvXsEjdSI87JGUD2evvU9pUbC49Mqn0VNuM_E4ZaMHGp7XvlPiVI8_iaBzC_N83Kt0dbbirtUErvCHvkg2IZC3O-4CHGmpANkbqv3ODkkomNKgdfbdlfFwRAjuxTrCRuFgb-VnFISVaPnX2kyo/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Note: it should be at the exact location where your image has been added (if the image is at the middle of the text, then the code should be located also at the middle)

All you have to do is to replace "separator" with "hidepic" as you can see in this screenshot below: