How To Split Blogger Header into 3 Sections

1.Log in to your dashboard--> layout- -> Edit HTML

2.Don't click on "Expand Widget Templates"

3.Scroll down to where you see like this code:

#header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }

4.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}

Look at the picture below.

Note : If you like you can change width,height,... as your choice.

5.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>

Remember that YOUR-BLOG-TITLE is your real blog title.Look at the example below.

6.Now replace this 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><!-- end header-wrapper -->

Look at the example below.

7.Now save your template and your done.It will look like this.

If you find this article useful, please feel free to link to this page from your website or blog.

url:

HTML link:

forum link:

Don't Copy This Article:

This work by http://www.bloggertipandtrick.net/ is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License.