Make Blogger Header, Navigation and Footer Full Width

Blogger is a user-friendly service that provides a lot of really attractive looking default templates for those just starting out. Default templates come in handy, but the nice things about owning your own blog is that you have the chance to add your own personal touch. As a matter of fact, templates aren't made to restrict your freedom of design, but instead they're there to provide you a foundation to build from. With every default template available on Blogger, you can make changes to fit your style.

One of the most common requests out of the Blogger community when making alterations is how to change the look of some of the key sections like header, navigation, and footer. Initially, these items are designed to fit within just 1/3 of the page, surrounded by padding and margins on either side. These margins are used to give the page a slim fitting appearance, but could also cause your content to look compressed.

Important: Backup your Template

Making the changes to a full screen Blogger navigation, footer, or header can be done and won't take you much time. Before you can make any changes, you should save extra copies of the template .xml file in case anything goes wrong. That way, if you don't like it or it doesn't come out looking like it should, you can reuse the contents of the original file to restore your blog to working condition.

Demo

Hover your mouse over the image to see a before and after example:


How to Make Header, Navigation and Footer Full Width in Blogger

Step #1: Access Your CSS File

If you've never opened up your CSS file before, log in to your Blogger account, select your blog and navigate to Template > Edit HTML. This will bring up the code of your template containing all your blog's internal files in one place.

Step #2: Modify the Background

Click anywhere inside the code area > press CTRL + F keys and type the following line > hit Enter to find it (stop at the first occurrence of it):
body {
Just below body { you should see some lines that will look like this:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
Where you see the highlighted line above in the code, remove the line and replace it with:
padding: 0px;
Different templates will have minor variations, but you should still be able to find these lines within every template.

Step #3: Change the Content Section

Next, search using the CTRL+F keys for this part:
.content-inner {
Just below it, you will see this line:
.content-inner {
padding: $(content.padding) $(content.padding.horizontal); 
}
Remove the line in red and replace it with:
padding: 0px;
This will remove any of the padding around the inner content, so it won't leave any room on both sides.

Now find this part:
$(content.background.color.selector){
Just below it you will see this line:
$(content.background.color.selector){
background-color: $(content.background.color);
}
Replace the line in red with:
background-color: $(body.background);
Finally, search for this tag:
]]></b:skin>
And just above it, add this CSS:
.main-outer {
background: $(content.background.color);
}

Step #4: Make the Content Outer Full Width

Content is displayed differently between browsers, so you'll next want to fix this so that it alters the width across the board. This code can be found searching for:
.content-outer, .content-fauxcolumn-outer, .region-inner {
And just below it you will see the following lines:
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
Delete the line in red and replace that line with:
max-width: 100%;

Step #5: Finish It Up

Now you have just two more lines you need to change. Look for:
</b:template-skin>
And click on the right arrow to expand the styles. Note: you will need to search for </b:template-skin> tag again, and just before it you'll see these symbols highlighted in yellow:
]]>
</b:template-skin>
Above this ]]></b:template-skin> section of code, add the following:
.main-outer {
max-width: $(content.width);
margin: 0 auto;
}
Then run a search for:
]]></b:skin>
Add these lines of code just before/above it:
.tabs-inner {
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}
Save the template and exit out of the editor.

Finished!

Following along with this tutorial won't affect or alter the pictures you are using on the blog, just the design of the content area. If you have a logo that stretches across the screen and fits perfectly for 1/3 page header, you will need to resize and re-upload this content so that it is able to work with the new adjustments.

21 comments:

  1. thanks for your tips.. these are so much help ful... sir.. if we want to put our static pages one is above header and one is below header how to plant it.. pl. explain...

    ReplyDelete
  2. Did you know, how to resize Main Post? I got only 630 but I want 1200. Please help me!

    ReplyDelete
  3. Sir your blog is awesome your tips and tricks are well written and I also made main seo and some design update after reading your posts

    Please Sir Visit my new blog - http://freetrickshub.blogspot.com

    ReplyDelete
  4. I love your blog as it not only focuses on the theory it provides us with real-world content that actually help us improve our blog. I have preferred to your blog for all the widgets that I have used in my blog. Keep providing us with these useful tricks....
    Please visit my site: http://desirenetwork.blogspot.in/ and see if it needs any improvements...

    ReplyDelete
  5. i love your blog and specially your blog design, this is my blog http://9700971128.blogspot.in/
    can u please tel me how to add the links to the menus.

    while i'm editing the html code i cant able to find why the search results are appearing when i placed the link of the one of the label in the backend

    thank you

    ReplyDelete
  6. Wonderfulbut i like small template

    ReplyDelete
  7. This worked great. thanks for the tutorial. Keep up the good work.

    ReplyDelete
  8. Thank you Sir.. That's a very useful article.. i've been searching for this one.. you've explained it well and easily..

    ReplyDelete
  9. hello admin your size is super cool as i am a new can you plz help me i want to resize my post i want to make it small so that i can put side drop down menu bar so how can i resize plz help
    www.10yearsquestionpaper.com

    ReplyDelete
  10. An absolutely gold tutorial. Thanks a lot dude :D

    ReplyDelete
  11. Hi.. quick question.
    is it possible to create blogger template without header, footer and sidebar?
    Because every time I tried to delete those sections along with its widgets inside and leaving the main/blog posts area. The template doesn't load any posts. but it's successfully saved in the html editor.

    thanks

    ReplyDelete
    Replies
    1. Hi Nick,

      Have you tried to change the body layout? Go to "Template", press the "Customize" button and access the "Layout" tab. Here you have the option to hide the sidebar - pick the first one. To hide the header and the footer of your template, access the "Advanced" tab and go to "Add CSS" section - paste this code inside the empty box:

      footer {display: none;}
      header {display: none;}

      Hope this helps. Thanks for visiting!

      Delete
  12. This is really helpful post. To help of this post I have change CSS style of my blog header.thanks for writing great post for new bloggers. I was searching this type information from 2 days.

    ReplyDelete
  13. Thanks for the great tutorial! After I have done this I've been wondering how to center the header, navigation bar and footer. Can you help me?

    http://graveyard-grotesque.blogspot.fi/

    ReplyDelete
    Replies
    1. I don't know if you ever figured it out, but in case you didn't:

      cntrl+F ''
      insert '< center >' right after < header >
      then do the same thing with '< /center >' inserted right before '< /header >'

      Delete
  14. Thank You! You are my blogger redesign hero!

    ReplyDelete
  15. What if I don't want to remove the padding from the main posts and sidebar area?

    ReplyDelete
  16. Never mind! Figured it out. I just need help figuring out how to center my menu bar. I'm not using the regular blogger one, since it's a drop down menu.

    Here, you can see what I mean: www.wanderlustandheart.ca

    ReplyDelete
    Replies
    1. Hi Elizabeth,

      Try to remove the float:left; declaration below the ".tabs .widget li, .tabs .widget li {" and "#nav li {" line, then add the following code just below "#nav li {"

      display: inline-block;

      Hope this will work for you ;)

      Delete