Show Blogger Icon Solely Inward Homepage As Well As Cover It Inward Postal Service Page

Here's a actually slow play a joke on that volition brand a Blogger prototype demo alone inwards homepage in addition to enshroud it inwards Blogger posts. In guild to brand images look alone on homepage, nosotros ask to add together a elementary CSS code snippet inwards the template in addition to hence purpose the hidepic class each fourth dimension nosotros desire to enshroud an image.

Hide Image inwards Blogger Post in addition to Show it Only on Homepage

Step 1. First, log into your Blogger draw of piece of job organisation human relationship in addition to click on your blog. Then instruct to "Template" in addition to press the "Edit HTML" button.

Step 2. Click anywhere within the code surface area in addition to press the CTRL + F keys to opened upward the search box:

Step 3. Type or glue the next tag within the search box in addition to hitting Enter to abide by it:

]]></b:skin>

Step 4. Once you lot establish the tag, glue the next CSS code only BELOW it.

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

Step 5. Now that nosotros added the CSS code to enshroud (display:none;) the images amongst hidepic class, click the "Save Template" push to salvage the code.

How it works?

Each fourth dimension you lot utilisation a postal service in addition to ask to enshroud a specific picture, switch to the HTML tab to run into the HTML code of the image, which volition expect something similar this:

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

Note: the html code should hold upward on the exact location where your prototype has been placed. For instance, if the prototype is inwards the middle of the content, hence the code should hold upward establish inwards the middle of the text code. This powerfulness hold upward a fleck tricky at first, but nosotros tin purpose CTRL + F to search for that specific area.

Also, delight brand certain that you lot are inwards the "Compose" tab when uploading your images, otherwise the prototype code volition omit the div containing the "separator" class.

Step 6. Replace the separator CSS class amongst hidepic - run into the screenshot below for to a greater extent than info:

Once you lot replaced it, click the "Publish" or "Update" button.

So this is how nosotros tin easily demo Blogger prototype alone on homepage in addition to enshroud it inwards postal service pages. Enjoy!