Split blogger header into two columns

Split blogger header into two columns

We can add gadget  next to header by splitting header section into two columns on blogger.It is easy to split blogger header into 2 columns.By dividing gadgets into 2 columns, We can add any blogger gadget  next to blogger header.

Follow below steps to split blogger header into 2 columns

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit HTML

step 4 : *Do customization as below*
* search below code*
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your title name (Header)'
type='Header'>    
</b:section>

*add below code just after above code*

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

Again search  *]]></b:skin>  , *and add below code just above*  ]]></b:skin>*

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

And again add below code just above  *]]>   </b:template-skin*>

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

step 5 : click on save template.

Now go to blogger and click on layout , now you can see two column
header section on your blogger layout.

well ... in some cases... you must add the widget manually.. because some error occured when you save the layout..