How To Split Blogger Header into 2 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:40%; height:200px; margin: 0px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header2{float:left; width:60%; 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'/> <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.

Do you Like this Story..?

Get Free Email Updates Daily!	Follow us!

Do you Like This Story Widget For Blogger by Beautiful Blogger Widgets

How To Split Blogger Header into 2 Sections