Remove blog Header and Use Image Instead

Sometimes using blog header may not look your blog cool and you may like to use a cool header image in place of boring default header.If so then bloganol brings you the cool blogger hacks that removes blog header and you can use a cool header images instead of blog header.

First of all goto Blogger Edit Html Page and Search for the following line of code.

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

Now replace the above code with the following code in your template.

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

The above code hides your blog header.Now to use a cool image in place of header search for the following code in your template.

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

Now paste the following code just after the above code.

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

Now see the demo below.

Before









After