Split Your Blogger Header Into Two Halves

Actually when i was modifying my template today i saw blank space beside my blogger header. It had occupied more space. I wished i could put something useful there. When i went deeper i figured out the way to do so. It was very simple and easy. But before proceeding the tutorial let's know what header splitting is.

When you first upload a new template then probably it's header section will be similar to this;

Add caption

You can see that only the header has covered the whole row. Now if it is splitted it will look more or similar like the one below;

As you can see that after the header is splitted it will be divided into two halves and we can keep our wished widgets or any thing else. Actually most of the people keep 468x60 banner there. Hope you have understood what header splitting is and if you want to do so then follow the steps below;

• Sign in to your blogger account.
• Be forwarded to dashboard>design>Edit Html.
• Backup your blog template.
• Search for the following code or similar one;

#header-wrapper { 
  width:960px; 
  margin:0 auto 10px; 
  border:1px solid $bordercolor; 
  }
#header-inner { 
  background-position: center; 
  margin-left: auto; 
  margin-right: auto; 
}
#header { 
  margin: 5px; 
  border: 1px solid $bordercolor; 
  text-align: center; 
  color:$pagetitlecolor; 
}
#header h1 { 
  margin:5px 5px 0; 
  padding:15px 20px .25em; 
  line-height:1.2em; 
  text-transform:uppercase; 
  letter-spacing:.2em; 
  font: $pagetitlefont; 
}
#header a { 
  color:$pagetitlecolor; 
  text-decoration:none; 
  }
#header a:hover { 
  color:$pagetitlecolor; 
  }
#header .description { 
  margin:0 5px 5px; 
  padding:0 20px 15px; 
  max-width:700px; 
  text-transform:uppercase; 
  letter-spacing:.2em; 
  line-height: 1.4em; 
  font: $descriptionfont; 
  color: $descriptioncolor; 
}
#header img { 
  margin-$startSide: auto; 
  margin-$endSide: auto; 
}

• Your code may not be exact but when you have found the similar one. Select the whole code of header section that contains  "#header" or "header" at start.
• Replace it with the following code;

/*------Header-----*/ 
#header-wrapper{ 
    width: 960px; 
    color: #000; 
    margin: 30px auto 0; 
    padding: 0px; 
    overflow: hidden; 
} 
#header-inner { 
    background-position: left; 
    background-repeat: no; 
} 
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited { 
    color: #BF0100; 
    font-size: 36px; 
    font-family: 'Ultra', serif, Arial; 
    font-weight: bold; 
    margin: 0; 
    padding: 0px 0 5px 0; 
    text-decoration: none; 
      text-shadow: 6px 6px 4px #ccc; 
       line-height:1.2em; 
}
.headerleft h3 { 
    font-family: arial, tahoma,  Sans-Serif; 
    font-weight: normal; 
    margin: 0; 
    padding: 0; 
}
.headerleft .description { 
        color: #3B3B3B; 
    font:bold 12px Helvetica, arial,  sans-serif; 
    margin: 0px; 
    padding: 0 0 20px 0; 
        text-shadow: 4px 4px 6px #ccc; 
}

.headerleft { 
         width: 450px; 
         float: left; 
         margin: 0; 
         padding: 0; 
         height:80px; 
} 
.headerright { 
         width: 468px; 
         height:80px; 
         float: right; 
         margin: 0px; 
         padding:1px 0 0 0; 
         
}

• Now search for this code in your template.

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

• It is the div section of you blogger header. Be sure that it must contain   <b:section and </b:section> tags.
• Now replace it with this one;

<div id='header-wrapper'> 
<div class='headerleft'> 
      <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='The MBT Lab (Header)' type='Header'/>
</b:section> 
</div>
<div class='headerright'> 
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'> 
</b:section> 
</div>

• Now save it and view your Page elements page and Lol..

TIPS;

1. To adjust header width edit: 960px
2. To change Header Title colour change:#BF0100
3. To change Header description colour then change:#3B3B3B

If you have any problem feel free to comment below.

• THANKS!!