How to Split Blogger Header into 2: Pre- & Post Template Designer

There are 2 methods depending on whether your Blogger template is pre-Template Designer or already using the new Template Designer templates.

1. Pre-Template Designer: How to split blog header into 2 (if you are on the main page, click Read more first)
2. Post-Template Designer: How to split blog header into 2 (if you are on the main page, click Read more first)

Whichever, the very first thing you need to do before editing the template is to backup the template and backup page elements (gadgets).

Pre-Template Designer: How to split blog header into 2

This is a relatively simple 2 step proceedure

STEP 1 is to edit the CSS to include a second header2.

Sign into DASHBOARD > DESIGN > EDIT HTML to open the template editor, then search for the following block of codes (use ctrl+F to find #header and if you can't find it, then likely your template is post-Template Designer):

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

and either edit those marked in red or just simply copy the block of codes below to replace the codes above:

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

#header2 {
float:left;
width:30%;
}

Note that you can change the 2 widths (70% and 30%) according to your own desire for the split headers.

STEP 2: Now you need to add a section for header2. While still in the template editor, locate the following block of codes (use ctrl+F to search for <div id='header-wrapper'>):

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

where Your Blog Title (Header) is the actual title of your blog, also if you have modified your template to allow adding of "page elements/gadget" in the blog title as described in Additional Add a Page Element for blog Header, those marked in red may be slightly different like for example you may edit it to
maxwidgets='2' showaddelement='Yes'> if you want to be able to add gadgets (for example, for a simple text horizontal navigation bar.

Now immediately after </b:section> and immediately before the last </div>, add the codes below:

<b:section class='header' id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Note that you can put whatever number you want into maxwidgets='3' depending on how many widgets you intend to put into that section of the header or even leave it black like maxwidgets='' in which case there is no limit. Thus after editing that section of the template becomes like below:

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

<b:section class='header' id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Preview and if satisfactory, save the edited template and you would have split your blog header into 2. Now check your LAYOUT (now called DESIGN).

---

How to split post-Template Designer blog Header into 2

Sign into DASHBOARD > DESIGN > EDIT HTML to open the template editor. This is a 2 step process.

STEP 1: First we need to define a second header in the stylesheet. Locate the end of your template CSS using ctrl+F to find, say, ]]></b:skin> or part thereof (if you can't find that, then probably your template is pre-Template Designer). Then immediately above ]]></b:skin>, add the following block of codes:

#header {width:60%;display:inline-block;float:left;}
#header2 {width:25%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

so that that section of the template will appear as the screen shot below:



STEP 2: Search for the codes below (use ctrl+F to find <b:section class='header'):

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

where Your Blog Title (Header) is your actual blog title.

Now copy the following codes:

<b:section id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear: both;'/>

and paste it right below </b:section> but before the </div> tag so that the block of codes become

<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 id='header-right' maxwidgets='3' showaddelement='yes'/>
<div style='clear: both;'/>

Additional section for second blog header2 highlighted in red. Note also I edited main header to showaddelement because I want to add widget below the blog title

LAYOUT/DESIGN after editing template

In the LAYOUT (DESIGN), the section for the Header will not appear as split and the ADD GADGET for the split right Header will appear below the section for the Main Header as shown in the screenshot below (highlighted in red).



To be sure, you can test adding a text gadget and preview (without saving) to confirm that they are where you want your second header section to be.