How To Display/ Show Image In only Homepage And Hide It In Blogger Post Page?

Hello Guys, I'm back with another Blogger Tutorial. If you're moderator and looking to do something different then make your blogger different by using blogger customization. During this post tutorial I will show you how you can display image in homepage and hide it in blogger post? using this method you can make your blogger different from others bloggers.

  By adding some CSS code image will appear only in your blog homepage and it'll hide for your post.

How To Display Image In Only HomePage And Hide It In Blogger Post?

Step 1: Login to Blogger Dashboard.

Step 2: Navigate to Template option and click on on it.

Step 3: Now click on edit HTML button. A HTML editor window are going to be open in front of you.

Step 4: Now click anywhere within the window and search ]]></b:skin> tag by CTRL+F and press enter.

Step 5: Copy the below code & paste it just above the  ]]></b:skin>

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

Step 6: Now save the template.

Step 7: Now Create new post with image and switch to the HTML tab. Here you'll see the HTML code of image that you added in your post. It'll look something like this .

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

Step 8: Now in HTML Tab replace “separator” with “Hidepic”.

Important!You have to Do This For Each post to Display Image In Homepage and Hide it in the Blogger Post.

That’s it. Now your image are going to be visible only on homepage instead of blog post.

Conclusion

I hope you like this tutorial. And Do not Forget Sharing Is Carrying. Thanks!