17 May 2012

How to Split Blogger Header into TWO sections

Advertisements

You can easily divide your header into two sections. The other section can be used to ad gadgets like ads, menubar, banners, search etc.


You can check the demo here on Simple Clean white Blogger Template

Let's do this.

STEP 1
Login to Blogger and go to Edit HTML page. Do not click on Expand Widget Templates.
Look for 
#header {

You will get
#header {
color: #000000;
text-align: left;
}
This code may slightly differant depending on the template you are using but the basic code is same.

Change above code as follows
#header {
color: #000000;
text-align: left;
float:left;
width:70%;
}

#header2 {
float:left;
width:30%;
}


STEP 2
Now look for
<div id='header

You will get
<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>

Modify above code as follows
<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='3' showaddelement='yes'/>

</div>
What we have done is we added
<b:section class='header' id='header2' maxwidgets='3' showaddelement='yes'/>

just below the  
</b:section>

Save the template and go to Page Elements to check the new changes.

UPDATE

If you are using Blogger's Template Designer then adopt the following method instead of above one.


STEP 1
Login to Blogger and go to Edit HTML page and look for ]]></b:skin>

Just above paste following code
#header {width:70%;display:inline-block;float:left;}
#header2 {width:25%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

STEP 2
Same as above STEP 2. Save your template.

Related Posts

11 comments

May 18, 2012 at 9:39 PM

I haven't found <div id='header in my template 66quotes, i am using simple blogger template,struck at step 2.

May 19, 2012 at 12:06 AM

Check for
header-wrapper
or the similar code in STEP 2

May 22, 2012 at 1:39 AM

header-wrapper cant find. but found this "<b:section class='header' id='header' maxwidgets='1'", and applied the second step,while saving i got this error.
"Sections may not be nested: section header2 is contained within header". Now what to do?

May 22, 2012 at 2:35 AM

Undo it and send your template to
gabbar1113(at)gmail(dot)com

May 22, 2012 at 10:32 PM

sent to specified mail, made bachup and sent that file

May 23, 2012 at 6:38 AM

Depending on the template you have this code

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test blog (Header)' type='Header'/>
</b:section>
</div>


Now modify it as given in STEP 2.

June 8, 2012 at 6:47 AM

I do not work, the banner goes under the header.
Could you help me?Here is my blog http://makemoneyonline-olga.blogspot.com/
I want to change the background color in sidebar boxes to reduce the Widget

June 8, 2012 at 7:53 AM

@ Olga
Do you want to split header or want to change sidebar boxes color?

June 8, 2012 at 1:51 PM

I want to split header

June 9, 2012 at 12:50 AM

send the template to
gabbar1113(at)gmail.com

notify me here after sending the template.

June 12, 2012 at 7:17 AM

I sent the template

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More