Divide Your Blogger Header Into Two Parts

This tutorial will show you how to divide the header of your Blogger blog into two parts, so you can add two gadgets or widgets to both areas and maximize precious header space by adding more functions to your site.
NOTE: This code works best with the Minima template, so if you’re using it with another template, you might have to do a trial-and-error test, or use a different code altogether.

• Login to your Blogger admin dashboard.

• Go to Design.

• Go to Template.

• Click on Edit HTML, then click on Proceed.

• Using Ctrl+F, locate #header-wrapper to check your header’s default size (example: 660px):

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

• Now that we’ve confirmed the header’s size, set the width of the main header section to 300px in the following code below:

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

Notice that we indicated float:left; above the new width. This will relocate one half of the header to the left.

• Let’s create the section for the right half, also at 300px width:

#header2 {
float:right;
width:300px;
}

• Then place it under the #header class as such:

#header  {
 float:left;
 width:300px;
 margin: 5px;
 border: 1px solid $bordercolor;
 text-align: center;
 color:$pagetitlecolor;
}
#header2 {
float:right;
width:300px;
}

Lastly, locate the <div id=’header-wrapper’> tag and paste the following code below it. It should look like this:

<div id=’header-wrapper’>
 <b:section class=’header’ id=’header’ maxwidgets=’1’ 

showaddelement=’no’>
<b:widget id=’Header1’ locked=’true’ title=’my blog title 

(Header)’ type=’Header’/></b:section>
<b:section class=’header’ id=’header2’ 

maxwidgets=’1’ showaddelement=’yes’/>
<br style=’clear:both;’/>
 </div> <!-- end header-wrapper -->

• Save the template.

• Go to Design.

• Go to Layout.

• The new section on the right side of your header should be visible now.

You can try experimenting with different header widths to see what sizes suit your design and widget preferences best.
NOTE: As with any template changes, it is always recommended that you save a backup of your original template first.