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


To hide images/pictures from blogger posts and make them appear only in homepage, we will add just a small piece of CSS code in our template and then use the class "hidepic" each time we want to hide an image.

Just follow the next steps:

Step 1. Go to Dashboard - Template - Edit HTML


 Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

 Step 3. Type or paste this code inside the search box then hit Enter to find it:
]]></b:skin>
Step 4. Paste the following code just below it
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.hidepic{
display: none;
}
</style>
</b:if>
Step 5. Save the Template.

Now, each time you create a post, first add the picture that you want to hide and then switch to the HTML tab where you'll see the HTML code of the image that you added - it will look something like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-shsd_c51zRA/T6UeoPgcbII/AAAAAAAACCc/sYI6WB22CaM/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-shsd_c51zRA/T6UeoPgcbII/AAAAAAAACCc/sYI6WB22CaM/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 found at the middle)

Step 6. Replace "separator" with "hidepic" - see the screenshot below:

If you need more help, please leave a comment below.

25 comments:

  1. Very good! thank you for this tutorial!
    So, here as you used first pic to show on your homepage and that pic is not shown here on post page! wao! thanks

    ReplyDelete
  2. What if i want to show images both on post and homepage

    ReplyDelete
    Replies
    1. Oh dude! just ignore the code, don't implement it and you'll get it.. :P

      Delete
    2. By default image is shown on both, homepage and post page

      Delete
  3. Thanks for the info!!!

    ReplyDelete
  4. I am searching a lot about this. Thanks a lot for this tips it help me a lot.

    ReplyDelete
  5. hi author, any idea how to hide the description on the homepage but show on post pages? Without using js if possible...thanks!

    ReplyDelete
  6. What if i don't have this line in my template?

    ReplyDelete
  7. Thanks, but i need help on how to hide the title and description of my blogger blog to the site visitors, and make them visible to search engines only.

    ReplyDelete
  8. This tutorial is what I want to know in the past few weeks. Thanks bro!

    ReplyDelete
  9. how can i also hide the header for a widget? i tried .hidepic > h2 and .hidepic h2 neither will work.. is it something with the code that only hides the div?

    ReplyDelete
  10. Anonymous12/21/2013

    Is there a way to hide a standalone pic on the post page? Right now I have a main pic at top of website that stays no matter what story is clicked on. Would be helpful if anyone knew how to hide it on a post page but to stay on home page. Thanks.

    ReplyDelete
  11. Good info! Works for me. Thanks.

    ReplyDelete
  12. Anonymous1/02/2014

    super....!

    ReplyDelete
  13. Awsomeeeeeeeeeeeeee :)

    csworldx.blogspot.com

    ReplyDelete
  14. my template HTML don't have }]]> code have only . how can i do? do you have any way?

    ReplyDelete
    Replies
    1. Search for ]]></b:skin> only (without the curly bracket).

      Delete
  15. When I search ]]> it doesnt find anything? :(

    ReplyDelete
    Replies
    1. Please make sure that there isn't any blank space before/after it.

      Delete
  16. hello, how can i hide in in mobile to??

    ReplyDelete
  17. very helpful post thanks

    ReplyDelete
  18. GOD Bless
    Thanks Team

    ReplyDelete
  19. Nice tutorial. But what I need is 'how to hide images from homepage but not from post'. Opposite of this tutorial actually. Thanks in advance

    ReplyDelete
  20. Nice. But how about doing reverse, hide the image in main and make it appear in post page

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!