How to modify blogger header size in two columns

By this useful article you teach that How to modify blogger header size in two columns. In this regard lot of visitors and other readers email me about changing of blogger header in two columns and sections, because more visitors interested that they want to insert logo of blogger blog and also want to run slide show in the header of the blogger blog. One my friend said that he has searched lot of articles online but very difficulty to understand it. You can also change and read more about cute blogger header,blogger header design, blogger header image, tutorial blog blogger,header image beside blog title,change blogger header.

Now to see the requirement of the readers and friends I have prepared some codes in this regard. Now the question is that how to split your template's header into two columns so that you can insert your widgets along with your blog's badge (logo) accordingly. In my experience I have checked that blogger did not maintain option of split header in two columns. Now I will have used good technique to blogger template alongwith some useful codes, you are ready now to split header columns, but remember one important thing that download your blogger template and save your backup any place of your computer start practice first and if you success in this regard you can continue.

After that follow my instructions and look your free blog blogger header more beautiful in two columns by the magic of some codes. Look the following easy steps and suggestions:

1. Go to www.blogger.com and then log in to your blogger dashboard and after that  go to Design and select Edit HTML. Now search the following code in your blogger template:

#header-wrapper {

width:950px;

margin:0 auto 0px;

height:180px;

}

#header-inner {

width:950px;

background-position: center;

margin-$startSide: auto;

margin-$endSide: auto;

}

#header {

margin: 0px;

text-align: left;

color:$pagetitlecolor;

}

2. It is done now you should be change the above code with following code with carefully.

#header-wrapper {

width:950px;

margin:0 auto 0px;

height:180px;

}

 #head-inner {

width:650px;

background-position: left;

margin-left: auto;

margin-right: auto;

float:left;

}

 #header {

margin: 0px;

text-align: left;

color:#fffff;

}

 #r_head{

width:350px;

float:left;

padding-top:10px;

}

3.  This practice is not complete now once again search the following code in your blogger template:

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

4. Replace the above code with following code carefully.

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

5. Now you are done and save your blogger tempate and enjoy with two column blogger headers.

I hope the above article will be very useful for you, if you like it please leave your comments: