How to split post Template Designer blog header in to tow section

Sign into DASHBOARD > DESIGN > EDIT HTML to open the template editor. This is a 2 step process. STEP 1: First we need to define a second header in the stylesheet. Locate the end of your template CSS using ctrl+F to find, say, ]]></b:skin> Then immediately above ]]></b:skin>, add the following block of codes:

#header {width:60%;display:inline-block;float:left;}
#header2 {width:25%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

STEP 2: Search for the codes below (use ctrl+F to find <b:section class='header'

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

where Your Blog Title (Header) is your actual blog title. Now copy the following codes:

<b:section id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear: both;'/>

and paste it right below </b:section> but before the </div> tag so that the block of codes become

<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 id='header-right' maxwidgets='3' showaddelement='yes'/>
<div style='clear: both;'/>

If You Like This. Please! Drop a Comment And Share This...