How To Add New Layout below Header in Blogger

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

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

2.Scroll down to where you see </head> tag.

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

#belowheader-wrapper {
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'/>

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

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

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

File Under : change template, header, html

2 Responses to “How To Add New Layout below Header in Blogger”

  1. Syeikh Azzikri says:


    how do i add widget below header like this blog =

    hope u can help me.


  2. Cherelle says:

    Hi there,

    How can I embed a "Photo of the day" box like this blog: ?

    I appreciate any help you can offer


Leave a Reply

Your email address will not be published.

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