There are 2 methods depending on whether your Blogger template ispre-Template Designer or already using the new Template Designertemplates.
Whichever, the very first thing you need to do before editing the template is tobackup the template and backup page elements (gadgets).
STEP 1 is to edit the CSS to include a second header2.
Sign into DASHBOARD > DESIGN > EDIT HTML to open the template editor, then search for the following block of codes (use ctrl+F to find #header and if you can't find it, then likely your template is post-Template Designer):
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
and either edit those marked in red or just simply copy the block of codes below to replace the codes above:
#header {
float:left;
width:70%;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2 {
float:left;
width:30%;
}
Note that you can change the 2 widths (70% and 30%) according to your own desire for the split headers.
STEP 2: Now you need to add a section for header2. While still in the template editor, locate the following block of codes (use ctrl+F to search for <div id='header-wrapper'>):
<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>
where Your Blog Title (Header) is the actual title of your blog, also if you have modified your template to allow adding of "page elements/gadget" in the blog title as described in Additional Add a Page Element for blog Header, those marked in red may be slightly different like for example you may edit it to
maxwidgets='2' showaddelement='Yes'> if you want to be able to add gadgets (for example, for a simple text horizontal navigation bar.
Now immediately after </b:section> and immediately before the last </div>, add the codes below:
<b:section class='header' id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear:both;'/>
</div>
Note that you can put whatever number you want into maxwidgets='3' depending on how many widgets you intend to put into that section of the header or even leave it black like maxwidgets='' in which case there is no limit. Thus after editing that section of the template becomes like below:
<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>
<b:section class='header' id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear:both;'/>
</div>
Preview and if satisfactory, save the edited template and you would have split your blog header into 2.
Be blessed,
0 comments