Sunday, 4 August 2013

Make A particular Image to be shown only in Home Pages and not be shown in Blog Post Pages

The people using Auto Read More Hack use a suitable image for every post. Some images are not suitable to be shown on Post Pages. To hide images/pictures from your blog posts and to make them appear only in homepage, we have to 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:

Procedure:

Step 1. Go to Dashboard - Template - Edit HTML
Step 2.Make a Back up of your template.
Step 3. Find (CTRL + F) this code in your template:

        }]]></b:skin>

Step 4. Copy and paste the following code just below it

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

Screen Shot

Step 5. Save the Te mplate.

Now every time you create a post, firstly add the pic you want to hide and then switch to 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/AVvXsEgAto2SX0-H1w3OmvgPZYmDEt13Jo0BK2cDikQwf4fZg6ntgYCApqZYIBlf3Ivtb7EHNAPKq50OOOJdUjOzpeuUaawj53ZABPjWZaMig13KnaH6DOgctdrY6C5LKAbUaSCDFsgI5oslQ6E/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/AVvXsEgAto2SX0-H1w3OmvgPZYmDEt13Jo0BK2cDikQwf4fZg6ntgYCApqZYIBlf3Ivtb7EHNAPKq50OOOJdUjOzpeuUaawj53ZABPjWZaMig13KnaH6DOgctdrY6C5LKAbUaSCDFsgI5oslQ6E/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. Thanks for visiting.
Like the Post? Please share it with your Friends.

No comments:

Post a Comment

Search This Blog