Bifurcation of Header Bar

You can Bifurcate the Header Bar of your Blog in order to give more room for the gadgets.
A Bifurcated Header Bar will look something like this:

Follow these Steps:

1>Go to Layout->Edit Html and Backup your current template.

2>Search for this code:
#header-wrapper{


3>When found,replace the entire header-wrapper block with this code:


#header-wrapper{
width: 980px;
color: #fff;
margin: 30px auto 0;
padding: 0px;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
.headerleft h1 {
color: #FFF;
font-family: Georgia, Times New Roman;
        font-size:56px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}


.headerleft h3 {
font-family: Lucida sans unicode,Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 0;
}


.headerleft .description {
color: white;
margin-left: 0px;
padding-left: 20px;
        font-family:Georgia, Times New Roman;
        font-size:18px;
        font-style:italic;
        font-weight:bold;
}
.headerleft {
         width: 480px;
         float: left;
         margin: 0;
         padding: 0;
}
.headerright {
         width: 470px;
         float: right;
         margin: 0;
         padding: 0;
         font-weight: bold;
}

You are almost done!!

Now you need to configure the HTML code of the template:

1>Search for <div id='header-wrapper'>

2>When found,delete the code in that header-wrapper section and this code below it:

<div class='headerleft'>

      <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'/>

</div>

<div class='headerright'>

 <b:section class='headerright' id='headerright' maxwidgets='5' showaddelement='yes'/>

</div>

3>Save the template and close

Blogger Templates