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:
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)
Step 1.
If you are using the old Blogger interface:
- Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
- Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
}]]></b:skin>
Step 3. Copy and paste the following code just below it
<b:if cond='data:blog.pageType != "index"'>
<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/AVvXsEik7vZ1qynT3Z4Q7dI5Lepcnwn0oHkJT4PhKZ0t76-EMPAD0pG5JsV7mgK6kPyBujSpxteTsyyRhBoViM4JbpNuYOOoEZOL5P-mgU96AxiX_unNQl9R4gA330bhQ7kXuCB26hHqreku7Mw/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/AVvXsEik7vZ1qynT3Z4Q7dI5Lepcnwn0oHkJT4PhKZ0t76-EMPAD0pG5JsV7mgK6kPyBujSpxteTsyyRhBoViM4JbpNuYOOoEZOL5P-mgU96AxiX_unNQl9R4gA330bhQ7kXuCB26hHqreku7Mw/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:
That's it!
0 comments:
Post a Comment