How To Split Header Column to 2 Columns

Posted by Lasantha Bandara on May 3rd, 2009 File Under : change template, css, header, html14 Comments

NOTE: Instead of This Post Please Read This Post !!!

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

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

/* Header
===================================
*/
#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;
}

3.Replace above code with below code.

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

#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;
}

4.Now again Scroll down to where you see 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>

5.Replace above code with below 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>

6.Click on "save Template" and you are done.

Update: Doesn't work this method for your template? Then read below posts.They will work correctly than this method and easy to use.

How To Split Blogger Header into 2 Sections

How To Split Blogger Header into 3 Sections

File Under : change template, css, header, html

14 Responses to “How To Split Header Column to 2 Columns”

  1. Sandeep says:

    How to split sidebar widget into 2 coulms.My blog is
    www.techieway.blogspot.com

  2. Rabih Zein says:

    thanks, i cant find the codes above. i uploaded a new template and apparantly they dont have the same code. where should put the new one???thanks

  3. agentmango says:

    Thank you. But this trick seems to work on las vegas template only.

  4. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    To Rabih Zein and Agentmango,

    Read This Post.It definitely work.

    http://bloggertipandtrick.blogspot.com/2009/07/how-to-split-blogger-header-into-2.html

    To Sandeep,

    to split sidebar widget into 2 coulmns read this:

    http://bloggertipandtrick.blogspot.com/2009/06/how-to-add-two-columns-to-blogger.html

  5. Seo las Vegas says:

    Thanks for the sharing of such information. we will pass it on to our readers. This is a great reading. Thanking you. Seo las Vegas

  6. Anonymous says:

    How do get it so it has both options. For example I want to post a 728x90 leader board and square ads side by side under that.

  7. Rohan Jagtap says:

    Thanks! This article helped me alot!

  8. Pak-Hungama says:

    very simple step how to split side bar. visit
    http://pakk-hungama.blogspot.com

  9. Asif Icbal says:

    thank you sir, i have successfully implemented this style in my blog @ http://blosobar.blogspot.com/

  10. pappu says:

    Can Any One Tell Me That

    my Site In Blogger url: http://www.sapnatvlive.com

    my site's logo area (header link ) not working

    i wanna logo link (back to home )

  11. hmmdmlk says:

    wow..thanks friend its work for me.

  12. Sunil says:

    Thanks, it worked for me with the small changes

  13. Suhasini says:

    Great post, thank you very much.

  14. ديوان المعرفه لرائع says:

    thank you ,, very nice job

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.