Split bloggers header in 2 columns

How to split your template's header into two columns so that you can add your widgets along with your blog's logo. By default, blogger doesn't have any option to split header column into two parts.

Below is the how-to guide.

Go to your blogger Dashboard >>Design>>Edit HTML

Do not tick Expand Widget templates

Search for the following code in your template

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>

Just below the above code, paste the following code

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

It should look like this

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My  Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Now search your template for the following code 

]]></b:skin>

Add the following code just above ]]></b:skin>

#header {display:inline-block;_float:left;}
#header-right {display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%;}
body#layout #header-right {width: 50%;}

Now search your template for 

]]> </b:template-skin>

and just above that, paste the following code

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

Last step, SAVE TEMPLATE and then go to page elements to see that your header has been spitted into two columns. 


Source and credit : http://www.theinfow.com/2011/03/split-header-into-two-columns-blogger.html