July 12, 2009

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.

h11

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. header55 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:

h22

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

h33

Do you Like this Story..?

Get Free Email Updates Daily!

Follow us!

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


Share/Save/Bookmark

2 comments:

Unknown said...

i've done it,thanks!

Anonymous said...

Thanks. Its good.

 
Blogging Now And Then © 2009 Med ELJAMALI