How to Show Image in Blogger Homepage But not in Post Page

Wednesday, 20 March 2013

How to Show Image in Blogger Homepage But not in Post Page

Normally, when you publish the post then its image is shown by default in both homepage as well as in post page. But, mostly bloggers don't want this feature. They just want that image should be shown in homepage but when anybody click on the post to read it then image shouldn't be shown. Here is the procedure to do this phenomena.

It is very simple procedure by just adding some piece of CSS code in your blog template.

Here is the procedure, follow it step by step:

Go to you blogger 'Dashboard', 'Template' and then 'Edit HTML'.
Check the option 'Expand Widget Template'.
Find the following code with 'CTRL+F'

}]]></b:skin>

Just under this code, write the following code:

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

Save your template, you are don it.

Remember it that, everytime you'll write the post, you have to 'Insert' pics firstly then go to the HTML option which exists on the left side in post writing. You'll have the code like this:

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

Finally write 'hidepic' at the place of 'separator'.

After publish you'll see that image will show on homepage only.

NOTE: The 'hidepic' class should be used everytime in each post means that you have to do the last step of replacing 'separator' with 'hidepic' each time when you are writing the new post.