Complete Solution

How to Split/Divide Header in Two Columns in Blogger Template? This tutorial will help you to split the Header of your blogger template in to Two Columns. Simply follow these easy steps to do this.



1. First log in to your Blogger account and back-up your template.



2. Then click Template >> Edit HTML



3. Chose Proceed to start editing the HTML code.



4. Click on "Expand Widget Templates"



5. Scroll down to where you see the code like this:

#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

6. Replace above code with below code.

#header-wrapper {
width:900px;
margin:0 auto 0px;
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;
}

7. Now again scroll down to where you see the code like this :








8. Now replace the above code with below code.








9. Save the change



OK, Now you are done. Save the change by pressing the Save Template button. To see the result, go to Page Element again and now you can see that your blog header has been split in two header parts.







Ok then, that's it for now about how to split header in two parts.

Subscribe to Get Newest Articles By Email!

Follow us!