Pages

Tuesday, November 8, 2011

Split Header Section

By default there is only one column of Header and there is no option to add another. You can see it in the following image:




Now after reading and following the steps below you can insert an additional column right after the header section as shown in the image below:


And here are the steps involved.

Step 1: Goto -> Template -> Design -> Edit HTML. Using Ctrl+F, find the following code.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Step 2: Replace the following code with the later one.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogging Made Easy (Header)' type='Header'/> </b:section>

<div class='header-column-left'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Blogging Made Easy (Header)' type='Header'/>
</b:section>
</div>
<div class='header-column-right'>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<div class='clear'/>
Step 3: Find /* Header and insert the following code after /* Header
----------------------------------------------- */
.header-column-left {  float: left; width: 70%;}
.header-column-right {  float: right; width: 30%;}
Step 4: Now Save Template and you are done.