Design 2 column for header

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: