How To Split Blogger Header into 2 Sections

Posted by Lasantha Bandara on July 2nd, 2009 File Under : change template, html4 Comments

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

2.Don't click on "Expand Widget Templates"

3.Scroll down to where you see like this code:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

4.Now replace above code with below code :

#header {
float:left;
width:40%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header2{float:left; width:60%; height:200px}

Look at the picture below.

Note : If you like you can change width,height,... as your choice.

5.Now again scroll down to where you see like this code:

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

Remember that YOUR-BLOG-TITLE is your real blog title.Look at the example below.

6.Now replace this code with below code :

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

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Look at the example below.

7.Now save your template and your done.It will look like this.

File Under : change template, html

4 Responses to “How To Split Blogger Header into 2 Sections”

  1. Shivam999 says:

    this doesnt work properly.
    When i splitted my header the header works fine but the code in put 2nd header has quite a big padding and margins.
    Help me solve it.

  2. kses says:

    thank you for this trick.

    See this live here: http://dalansine.blogspot.com/

  3. Mohit says:

    Hi,

    I am using new blogger template. I can not find the above mentioned code in my template. Kindly tell me how can I split my header widget into 3 columns in the new template.

    Thanks.

  4. Sunil says:

    I am using new blogger template. and I tried with the above but it is not working properly in my template . Kindly tell me how can I split my header widget into 2 columns in the new template.

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.