How to make 2 column Header / How to split a Header for Blogger

There are sites that I visit that have split header on them so I ask myself that would it be cool if I make one and the result is at the header of this blog.

Now let's start with the program.

1 - Log in to your Dashboard--> Layout--> Edit HTML

2 - Scroll down to where you see code like this:

 /* Header<br /> ===================================<br /> */<br /> #header-wrapper {<br /> width:900px;<br /> margin:0 auto 0px;<br /> height:190px;<br /> }<br /> <br /> #header-inner {<br /> width:900px;<br /> background-position: center;<br /> margin-$startSide: auto;<br /> margin-$endSide: auto;<br /> }<br /> <br /> #header {<br /> margin: 0px;<br /> text-align: left;<br /> color:$pagetitlecolor;<br /> }<br />   

3 - Replace above code with below code.

 /* Header<br /> ===================================<br /> */<br /> <br /> #header-wrapper {<br /> width:900px;<br /> margin:0 auto 0px;<br /> height:190px;<br /> }<br /> <br /> #head-inner {<br /> width:600px;<br /> background-position: left;<br /> margin-left: auto;<br /> margin-right: auto;<br /> float:left;<br /> }<br /> <br /> #header {<br /> margin: 0px;<br /> text-align: left;<br /> color:#ffcc66;<br /> }<br /> <br /> #r_head{<br /> width:300px;<br /> float:left;<br /> padding-top:10px;<br /> }<br /> <br />  


4 - Now again Scroll down to where you see code like this :

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


5 - Replace above code with below code.

 <div id='header-wrapper'><div id='head-inner'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/><br /> </b:section><br /> </div><div id='r_head'><b:section class='header' id='header2' preferred='yes'/><br /> </div></div> 


6 - Click Preview and if anything seems good you may...


7 - Click on "Save Template" and you are done.

Continue Reading »