This article is about how to split your Blogger’s header into two columns. Do you want your blog to look professional and beautiful?
You can place your blog title beside advert. You can add gadget close to header
by splitting header section into two columns on Blogger. I am going to show you
an easy way to split blogger header into 2 columns.
How to Divide or Split Blogger Header Into 2 Columns

Below are the simple steps to follow in splitting Blogger
header into 2 columns/sections
Step 1: Login to your Blogger account and go to
Step 2: Click on Template
Step 3: Click on
Step 4: Press CTRL F and search for 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’>    
Now, it’s possible you are unable to get the whole code at
once, just copy some portion and search for it, then trace others.
Step 5: Then add code below just after above code
(in Step 4)
<b:section id=’header-right’
<div style=’clear:
Step 6: Now go back to the search box and find ]]></b:skin> , then add below code just before/above  ]]></b:skin>
#header, body#layout #header
#header-right, body#layout
#header-right {width:40%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
Step 7: After that, now search for ]]></b:template-skin> add below code just
above  it
#layout #header {width: 40%; float: left;}
#layout #header-right {width: 60%; float:
Step 8: Then click on “Save template”, and you are
How to Divide or Split Blogger Header Into 2 Columns
After following the above steps, go to “Layout”, you are
supposed see two column header section on your Blogger layout.
Note: 40%; or 50%;
varies, depends on your choice.


Please enter your comment!
Please enter your name here

Captcha verification failed!
CAPTCHA user score failed. Please contact us!