How To Hidden Blogger Header and Replace Image Instead

Posted by Lasantha Bandara on April 1st, 2009 File Under : background, change template, header, html, image6 Comments

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see header-wrapper code block.It will nearly look like this:

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Note :- width:800px can be different value.

3.Now add "display:none;" into your header-wrapper code block.Look at below:

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display:none;
}

Done. above code hides your blog header.

4.To use a image instead header,find the below code.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your header title' type='Header'/>
</b:section>
</div>

5.Now paste the below code just after the above code.

<a href="URL_OF_YOUR_BLOG"><img src="URL_OF_THE_IMAGE" alt="Home" /></a>

Note : Replace URL_OF_YOUR_BLOG and URL_OF_THE_IMAGE with your content.

6.Click on "Save Templates" and you are done.

File Under : background, change template, header, html, image

6 Responses to “How To Hidden Blogger Header and Replace Image Instead”

  1. GoIzzy says:

    thank you soooooo much ! the templet that I got did not allow me to upload an image thru blogger at all.

  2. Pamela says:

    thank you very much!

  3. Anonymous says:

    how do i center the image?

  4. lirik says:

    thanks for the info

  5. Abhineet says:

    hey anonymous i know how to center the image.
    you can use center tag......
    for more info. you contact me at
    http://abhicomputech.blogspot.com/

  6. BG says:

    Thanks For your info.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.