How to Customize the Blogger Header in a Template

If you are using blogger then you know that You can not edit or customize the header component in the conventional blogger templates other than changing header image ,title and description .

I just felt that it is taking more space and I should use the same to put more widgets or components .Given below is a step by step procedure to change your header to three column header .

Take a back up of you existing template before doing any change by Logging into Blogger->Layout->Edit Html->Download Full Template .

Now in your blogger template you will find a piece of CSS code as given below .Look for "header-wrapper"
Remeber:The width ,Margin and Padding may vary from template to template.Adjus them appropriately to suit your requirement .

#header-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px;
width: 978px;
}
Copy and paste the following line of code just after the above .
#mainheader-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 386px; /*adjust the width as per your requirement*/
height: 70px; /*adjust the height as per your requirement*/
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#middleheader-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 140px; /*adjust the width as per your requirement*/
height: 70px; /*adjust the height as per your requirement*/
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sideheader-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 140px; /*adjust the width as per your requirement*/
height: 70px; /*adjust the height as per your requirement*/
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.1header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#headermiddle {
width: 140px; /*adjust the width as per your requirement*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#headermiddle h1 {
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 5px 10px 0px 10px;
}

#headermiddle h1 a {
text-decoration: none;
}

#headermiddle h1 a:hover {
text-decoration: underline;
}

#headermiddle .description {
margin: 0px 0px 0px 0px;
padding: 1px 20px 25px 20px;
}

#headermiddle h1 p, #headermiddle .description p {margin:0;padding:0}

#headermiddle a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}
#headerside {
width: 140px; /*adjust the width as per your requirement*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#headerside h1 {
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 5px 10px 0px 10px;
}

#headerside h1 a {
text-decoration: none;
}

#headerside h1 a:hover {
text-decoration: underline;
}

#headerside .description {
margin: 0px 0px 0px 0px;
padding: 1px 20px 25px 20px;
}

#headerside h1 p, #headerside .description p {margin:0;padding:0}

#headerside a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

Now look for another piece of code where the div id is "header-wrapper" .
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='My Tech Findings (Header)' type='Header'/> </b:section> </div>

Replace the whole div tag with the following line of code.
<div id='header-wrapper'> <div id='mainheader-wrapper'> <b:section class='1header' id='header' maxwidgets='3' showaddelement='yes'> <b:widget id='Header1' locked='true' title='My Tech Findings (Header)' type='Header'/> </b:section> </div> <div id='middleheader-wrapper'> <b:section class='headermiddle' id='headermiddle' maxwidgets='3' showaddelement='yes'> <b:widget id='HTML6' locked='false' title='' type='HTML'/> </b:section> </div> <div id='sideheader-wrapper'> <b:section class='1header' id='headerside' maxwidgets='3' showaddelement='yes'/> </div> <div style='clear: both;'/> </div>

Now You can change the Title (highlighted above) as per your blog.Click the preview button just to make sure the syntax is not broken .If you don't get any error then save the template and go to Layout page .Now you should be able to add widgets in your 3 column header.