How to center the header in blogspot

Your header image may not wide enough and you will see the image is placed on the left side.
Follow below steps to place your header image in the midlle..

1. Go to template

2.  Click Customize

3. Paste below code into the highlighted in yellow below. You may adjust the number "110" below to adjust the image placement.

.header-outer {margin-left:110px;}

Create two or more column in header

Now we will change the header column become 2 header columns. Click Edit HTML tab, go to your template code and find the code like this :



/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

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

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

Delete above code and replace with this code ;




/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
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;
}



Go to lower side and find the code like this :




<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>


Delete above code and replace with this code :




<div id='header-wrapper'>
<div id='head-inner'>
<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>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>


Click SAVE CHANGES button and done.


Now click Page Elements tab and you will see your header column become 2 columns :

Customize Title Header Placement

Did you know that the placement of the title header can be change either center or right hand position? In blogspot the default setting is on the left hand side.
By adding CSS code you will change the tittle header placement left, right or center within less than 1 minutes. Don't believe me. Let try.
Below are the steps;

Step 1

• Go to the design
• Then Template designer

Step 2

• On the template designer, select advanced
• On the sub tittle, select Add CSS
• Add below code into the CSS

.Header { 

text-align: right; 

}

Note: If want to change to center position, just change word right above to center