Hi bloggy reader,
Do you want the header of your blog to be split in 2 part or 2 column? If yes, then you come to the right place, i will tell you all how to split our blog header. Maybe you want to put your advertisement inside the header.
Ok let's start the tutorial!
1. Login to your blogger account.2. After that, go to layout -> Page Element.
3. Now you can see the header, right? Below the navigation bar and over the post element.
4. Now go to Edit HTML, and then find this code (press Ctrl+F):/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:white;
height:190px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
5. Delete that code and change with this code:
/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:white;
height:190px;
}
#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}
6. Ok, now proceed to the next step. Scroll down to the bottom of the HTML code and find this code (press Ctrl+F):
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
7. Delete that code and change with this:
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
8. OK, Now you are done. Save the template. Congratulation!!
Now to see the result, go to Page Element again and now you can see that your blog header is split in two pieces. You can fill it with your blog search engine or Advertisement or anything else.
Good luck bloggy!
