Wednesday, February 02, 2011

How to Split Blogger Header into 2: Pre- & Post Template Designer


There are 2 methods depending on whether your Blogger template is pre-Template Designer or already using the new Template Designer templates.

1. Pre-Template Designer: How to split blog header into 2 (if you are on the main page, click Read more first)
2. Post-Template Designer: How to split blog header into 2 (if you are on the main page, click Read more first)

Whichever, the very first thing you need to do before editing the template is to backup the template and backup page elements (gadgets).

Pre-Template Designer: How to split blog header into 2

This is a relatively simple 2 step proceedure

STEP 1 is to edit the CSS to include a second header2.

Sign into DASHBOARD > DESIGN > EDIT HTML to open the template editor, then search for the following block of codes (use ctrl+F to find #header and if you can't find it, then likely your template is post-Template Designer):

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


and either edit those marked in red or just simply copy the block of codes below to replace the codes above:

#header {
float:left;
width:70%;

margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header2 {
float:left;
width:30%;
}


Note that you can change the 2 widths (70% and 30%) according to your own desire for the split headers.

STEP 2: Now you need to add a section for header2. While still in the template editor, locate the following block of codes (use ctrl+F to search for <div id='header-wrapper'>):

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


where Your Blog Title (Header) is the actual title of your blog, also if you have modified your template to allow adding of "page elements/gadget" in the blog title as described in Additional Add a Page Element for blog Header, those marked in red may be slightly different like for example you may edit it to
maxwidgets='2' showaddelement='Yes'> if you want to be able to add gadgets (for example, for a simple text horizontal navigation bar.

Now immediately after </b:section> and immediately before the last </div>, add the codes below:

<b:section class='header' id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear:both;'/>
</div>


Note that you can put whatever number you want into maxwidgets='3' depending on how many widgets you intend to put into that section of the header or even leave it black like maxwidgets='' in which case there is no limit. Thus after editing that section of the template becomes like below:

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

<b:section class='header' id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear:both;'/>
</div>


Preview and if satisfactory, save the edited template and you would have split your blog header into 2. Now check your LAYOUT (now called DESIGN).



How to split post-Template Designer blog Header into 2


Sign into DASHBOARD > DESIGN > EDIT HTML to open the template editor. This is a 2 step process.

STEP 1: First we need to define a second header in the stylesheet. Locate the end of your template CSS using ctrl+F to find, say, ]]></b:skin> or part thereof (if you can't find that, then probably your template is pre-Template Designer). Then immediately above ]]></b:skin>, add the following block of codes:

#header {width:60%;display:inline-block;float:left;}
#header2 {width:25%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}


so that that section of the template will appear as the screen shot below:

CSS edited to define second blog header

STEP 2: Search for the codes below (use ctrl+F to find <b:section class='header'):

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


where Your Blog Title (Header) is your actual blog title.

Now copy the following codes:

<b:section id='header2' maxwidgets='3' showaddelement='yes'/>
<div style='clear: both;'/>


and paste it right below </b:section> but before the </div> tag so that the block of codes become

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

<b:section id='header-right' maxwidgets='3' showaddelement='yes'/>
<div style='clear: both;'/>


Edit template HTML add section for split blog header
Additional section for second blog header2 highlighted in red. Note also I edited main header to showaddelement because I want to add widget below the blog title


LAYOUT/DESIGN after editing template

In the LAYOUT (DESIGN), the section for the Header will not appear as split and the ADD GADGET for the split right Header will appear below the section for the Main Header as shown in the screenshot below (highlighted in red).



To be sure, you can test adding a text gadget and preview (without saving) to confirm that they are where you want your second header section to be.

42 comments:

  1. Timothy, what template are you using? Without that info, we would not know why what worked for us did not work for you.

    ReplyDelete
  2. best other template which supports new blogger template designer?

    Thx
    Brad Fallon

    ReplyDelete
  3. this is frustrating, my header is now all completely messed up. am using the simple template by Josh Peterson. pls help, i need patch my header up fast

    ReplyDelete
  4. Could this, 75%+25%+15%=115%, be the problem? If so change it to 60%+25%+15%=100%

    below after correction:

    #header {width:60%;display:inline-block;float:left;}
    #header2 {width:25%;display:inline-block;float:right;padding:15px;}
    #header-right .widget {margin:0;}

    ReplyDelete
  5. dear peter, thanks so much for ur reply. i was careful abt the numbers, as u suggested, but it didnt help. h/v aft playing arnd awhile, my header took some shape, but switched sides i.e title is now on the right and my ads now on the left of the header (pls see drtonik.blogspot.com)

    This happened wen i did this:

    1). Added this code=>

    #header {width:45%;display:inline-block;float:left;}
    #header {width:45%;display:inline-block;float:right;}
    #header-right .widget {margin:0;}

    to CSS part of template; and also

    2). as u instructed on the 2nd step in ur tutorial.

    NOTE: any other thing i did not help, including ur instructions above. what are ur thots on this, sir?

    thanks for ur time and help

    ReplyDelete
  6. Also, currently the pages gadget links ONLY to pages. But do you have any idea how to hack the pages gadget to 1). include any url of my choice and 2). add sub-navigation tabs?

    so grateful for your kind help

    ReplyDelete
  7. I have tested before I wrote the post so I don't think the problem lies with my instructions. Perhaps it is the browser you are using because the new Blogger TEmplate Designer templates is not supported by Internet Explorer 6

    ReplyDelete
  8. Admin, you see the horizontal navigation bar in my blog, they are my replacement for the Blogger tabs for static pages. If you want that, refer to how to create simple text horizontal navigation bar

    ReplyDelete
  9. it works for me, thanks for share master...

    ReplyDelete
  10. I used your instructions to remove the "lock" on the header portion of my blog and add another gadget. Thank you! Once I added the gadget, which is a photo, I realized that my margins between headers is far too great. I have tried everything I can think of to remove the margins, but no luck. I am using the "Simple" template with a few revisions. Any help? The blog I am working on is http://mclaughlinphoto.blogspot.com/
    Thanks!

    ReplyDelete
  11. Hello, I got it to work!!! However, my second widget isn't inline with the title. The second widget with advertisement in it, is a little below the title on the left. How can I move the second widget up a little?

    I am using Blogger's simple designer template. Here is a link to the site: http://fitzdaily.blogspot.com/

    ReplyDelete
  12. Timothy, I checked your blog and I see the blog title FitzDaily in line with a Google ad which I assume you have added via that second part of the Header with a HTML/Javascript gadget. Can you send us a screen shot of what you see?

    ReplyDelete
  13. That really works... Thanks for the trick...

    ReplyDelete
  14. I did it, it's temperamental so I don't know how long I plan on keeping it. Wish it would show accurately in Page Elements.

    Check it at Turfhugger.blogspot.com

    Thanks.

    ReplyDelete
  15. Is there any way to split it side by side. Mine doesn't seem to have done it?

    ReplyDelete
  16. Hello Peter. got some problem with Timothy, my adsense is inline with my page title in the bottom portion not in the right side :(

    ReplyDelete
  17. by the way i'm just using the simple blogger template.

    ReplyDelete
  18. This hack is temperamental and needs tweaking. I am afraid it may need further work.

    ReplyDelete
  19. Hi Peter

    Please help! This hack doesn't work in the Travel template.
    In that template, the b:section class='header'section of code is actually much, much longer.

    And I presume that the hack doesn't work work because that part of the code is very different.

    Please help. I'd like a smile as big as the one in your profile picture!

    Thank you for your time.

    Blog title:
    http://fire-the-donald.blogspot.com/

    ReplyDelete
  20. Mr Donald, would really like to oblige but am afraid this hack seem erratic and worked in one blog but didn't in another. When I have a solution I will publish it.

    ReplyDelete
  21. i could not add header2 code...
    when i add then and click preview show me an error messes... please help me

    ReplyDelete
  22. i face a problem when split show me an error message
    The element type "body" must be terminated by the matching end-tag body"

    i fulfill all section as your instraction
    please help me ...

    ReplyDelete
  23. Are you using the template designer template or the pre-template designer template?

    ReplyDelete
  24. "The element type "body" must be terminated by the matching end-tag body""

    That means you have an opening <body> tag somewhere in your template with no matching </body> closing tag.

    ReplyDelete
  25. I split the header. It looks all right in ''design" ,but when I added a text for test in the new area it appear in blog only in the top right corner below header.it is not seen in the entire width.Please help.

    ReplyDelete
  26. Try playing with the widths of the left and right section to fit the overall widths of your blog

    ReplyDelete
  27. Hi peter..I want to add widget element in mixblooo template.I have a blog silentsunny.com

    I want to add widget on the header.
    I want the title and widget all side by side.
    Plz help me..Thanx..

    ReplyDelete
  28. You can do that after splitting the Header into 2 with the left Header for the blog title and the right Header for adding widgets

    ReplyDelete
  29. nice informative post,the code given worked perfectly thanks



    website design company

    ReplyDelete
  30. hi,
    can you suggest how to split the left and right sidebars in to 2, post-template designer?

    ReplyDelete
  31. plz tell me how to split header in my template
    m using picture window
    http://entranceexamblog.blogspot.com/

    thanks plz email me plzzzzzzzz
    professionalstudiesindelhi@gmail.com


    thanks frnd

    ReplyDelete
  32. Thank you. Finally someone who explained that in the layout mode it wont show it is split!! Thanks for a great explanation.

    http://makemoneymakecents.com to check it out

    ReplyDelete
  33. Thanks so much. This was so easy. Looks great on my site.

    www.americna-nirvana.net

    ReplyDelete
  34. Mine is post-Template, in this method it is not explained hoe to put custom length of headers, please explain that

    ReplyDelete
  35. Hi, i read this with interest. I am having trouble with my blog as it's a custom template that I installed but I wanted to have the blog name on header left with the graphic on the right.

    When I tried to locate the header wrapper, I can't find it. Hope you can advise.

    ReplyDelete
  36. If you are still using the old pre-template designer template you can go edit the template. Look for this section:

    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

    Then try editing it to
    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: left;
    color:$pagetitlecolor;
    }

    For the new template designer template, you will have to look for the equivalent section in the template editor and edit it accordingly.

    ReplyDelete
  37. Hi there,

    This worked! I was even able to move the image I wanted to the left of the header and reduce the space by altering some of the html code based n common sense alone (I know NOTHING about HTML). Thanks so much!

    fabulouslyfluffychick.blogspot.com

    ReplyDelete
  38. Hello,


    I've followed your instructions, but my search box is still showing up under the header, not to the right of it. I'm so frustrated, please help!

    Also, when I tried to review again, somehow this section:


    div style='clear: both;'/>

    that I entered under this section:





    shows up here, farther down my template(?!):





    div style='clear: both;'/>



    I'm new at this stuff, so maybe I'm missing something that would be entirely obvious to you. I'm so lost!

    Thank you for your time,
    Jennifer

    ReplyDelete
  39. Maybe your search box width is too wide for that section.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics