SOHO : Small Office Home Office
Freeware - Opensource software tips, tricks, tweaks & fixes for managing, securing, improving the performance of SOHO Desktop, Laptop, Networks

Friday, April 29, 2011

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'/>
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 id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
Now search your template for the following code 
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 :


  1. really wonderful post. i tried many but succeeded in this trick. cheers!!!

  2. You are a Rockstar Man
    thanks veryyy much

  3. Yes Really Thanks man.......Keep it up!

  4. Thanks man!!! it worked for my blog