How to Split or Divide Header In Three Colums in Blogger (Blogspot) Templates

How to Split or Divide Header In Three Colums in Blogger (Blogspot) Templates? Many blogger wants to divide their blogger header into three section for adding adsense ads or buysellads so after applying this trick in your blog you can add ads and other social network widget in your blogger header.

 

* First go your blogger dashboard.

* Now click in design tab and edit HTML .

* Expand your blogger template.



* Find out the below code

#header {
margin: 5px;
border: 1px solid $bordercolor;

* Now replace above code with below code

#header {
float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{float:left; width:30%; height:200px}
#header3{float:left; width:39%; height:200px}

Note- You can change #header2 and #header3 height and you can change width if you want.

* Now again scroll down to where you see like this code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>
</div>

Note- Remember that YOUR-BLOG-TITLE is your real blog title.

* Now replace above code with below code

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

* Change your blog title with your own.

* Now save your blogger template now you are done.