How To Add Two Columns below blogger Header

Posted by Lasantha Bandara on May 1st, 2009 File Under : change template, css, html6 Comments

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see like this code.

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

3.Now add below code between  </b:section>  and  </div>  .

 
<b:section class='sidebar' id='magazine-left3' showaddelement='yes'>
<b:widget id='Text513' locked='false' title='Column 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right3' showaddelement='yes'>
<b:widget id='Text523' locked='false' title='Column 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>

Look at the picture below.

4.Now Find below code.

]]></b:skin>

5.Add below code before  ]]></b:skin>  tag.

#magazine-left3 {
width: 30%;
float: left;
}
#magazine-right3 {
width: 65%;
float: right;
}

Note : You can change values of width,as your choice.

6.Now save your template and you are done.It look like this.

File Under : change template, css, html

6 Responses to “How To Add Two Columns below blogger Header”

  1. ♥Beads and Ribbons♥ says:

    Hi, I've a link bar widget right below the header. So at which part can i put the code into? Do I need to give you the template to my test blog? Thanks!

  2. ♥Beads and Ribbons♥ says:

    I think I've got it after retrying. Thanks for your tip! it's awesome!

  3. Anonymous says:

    hi..
    thanks for this work and idee... but;

    1- i tried this; one of column is in 100% length, whereas the other so long as determined. why?

    2- i noticed, that the line in your code (<div style="clear: both;"></div> ) is shown in my edit-html just ( <div style='clear: both;'> );
    to make it clear, without (</div>) and without quote signs. why?
    maybe those are the reasons whay it doesn't work..

    i appreciate any answer very much..

  4. mahmoud magdy says:

    please help me... when i follow this steps to make to columns below my blog header it's come to columns but not beside each of other in one line.. it's come 2 columns in 2 line

    please help me!! that's my email: coolboy91_2010@hotmail.com

    ihope you contact me soon

  5. Joshua LaBello says:

    Anyone know how I could modify this to add 3, 4, 5, or even 6 columns instead of just two?

  6. Rajeev Mehta says:

    hey i cant found header-wrapper'> in my blogger

    plz plz plz plz plz help

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.