Design 2 column for header Posted by vuluganck | at Monday, April 20, 2009

By this tip today , I will divide the header to 2 part with optional size.To understand easily , you should make another blog and design it first before you do it on your main site.Always back up your main template anytime you touch source code.

2 column ? This is an useful tip for who wants to put the widgets easily as search box, counter, clocks....But none of the blogspot templates include default Google Blogspot template , or free templates are provided by designers have 2 column header.

I want to notice you , this tip is very hard, so you should back up your template by clicking Download full template before you decide to follow it.

Step 1 - Work with body: Log in blogger, ---->Layout---->Edit HTML and find this code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header | Zenplate Blogger (Header)' type='Header'/>
</b:section>
</div>

This is the header has width = template width.Suppose we need to set search box on the right, so you have to change the code above by this new code instead :

<div id='header-wrapper'> /* header-wrapper includes 2 parts */
<div id='header'> /* Left part */
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header | Zenplate Blogger (Header)' type='Header'/>
</b:section>
</div>
<div id='box'> /* Right part */
<b:section class='searchbox' id='searchbox' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML99' locked='false' title='' type='HTML'/>
</b:section>
</div>


Step 2-Work with CSS: Now scroll up and find this code:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

We will change it by :

#header {
float: left; /* On the left, you can use: float: $startSide */
width: 310px; /* Blog's logo size */
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#box {
float: right; /* On the right, you can use: float: $endSide */
width: 320px; /* Box size */
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

At this step , you can change whatever you want such as :change, disable margin, border when you use logo or search box.The most important is you have to design the header that the width of header-wrapper has to be matched with width of its header, border and margin.

This is the successful result when you have finished:
*Before

*After

If you have any problem please leave a comment here , I will help you , join this tip and don't forget to subscribe me.
Thanks and have a good day