Show images only in Homepage and Hide in blogger Post Page - Tutorial

In this tutorial, I will show you how to Hide images/photos from blogger post and show or appear only in your homepage. For this purpose we will add a CSS code in template using Edit HTML.

Just follow my steps:



Step 1. Go to Dashboard -> Template -> Edit HTML

Step 2. Press CTRL + F Keys to open the search box.

Step 3. Type or paste this code inside the search box and hit enter to find it

]]></b:skin>

Step 4. Paste the code below it

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

Step 5. Click on Save template

Now, when you create the post, First add the image that you want to hide and then jump to the HTML tab where you will see the HTML code of the photo or image that you added, it will look like this

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

Step 6. Replace “separator” with “hidepic” – See the screenshot below

Important:

It should be at exact location where your image has been added
(If the image is at middle or center location in post, then the code should be found at the middle or center of the post.)