How To Hidden Blogger Header and Replace Image Instead

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

2.Scroll down to where you see this:

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

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

3.Now Replace the above code with the below code.

#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>

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

read more

How To Add New Layout below Header in Blogger

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

2.Scroll down to where you see this:

</head>

3.Add below code into your template just above the </head> tag.

#belowheader-wrapper { width:890px; margin:0 auto 10px; overflow: hidden; }

Note : You can change width:890px to equal the width to your Header wrapper.

4.Now Scroll down to where you see this:

<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.

<div id='belowheader-wrapper'> <b:section class='belowheader' id='belowheader' preferred='yes'/> </div>

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

read more