Make Blogger Header, Navigation Together With Footer Sum Width

Blogger is a user-friendly service that provides a lot of actually attractive looking default templates for those only starting out. Default templates come upward inwards handy, but the dainty things most owning your ain spider web log is that yous cause got the guide chances to add together your ain personal touch. As a affair of fact, templates aren't made to throttle your liberty of design, but instead they're in that location to render yous a foundation to construct from. With every default template available on Blogger, yous tin brand changes to jibe your style.

One of the most mutual requests out of the Blogger community when making alterations is how to alter the hold back of some of the fundamental sections similar header, navigation, together with footer. Initially, these items are designed to jibe within only 1/3 of the page, surrounded yesteryear padding together with margins on either side. These margins are used to give the page a slim plumbing equipment appearance, but could likewise crusade your content to hold back compressed.

Important: Backup your Template

Making the changes to a amount concealment Blogger navigation, footer, or header tin endure done together with won't cause got yous much time. Before yous tin brand whatsoever changes, yous should salve extra copies of the template .xml file inwards instance anything goes wrong. That way, if yous don't similar it or it doesn't come upward out looking similar it should, yous tin reuse the contents of the master copy file to restore your spider web log to working condition.

Demo

Hover your mouse over the paradigm to run across a earlier together with afterwards example:

How to Make Header, Navigation together with Footer Full Width inwards Blogger

Step #1: Access Your CSS File

If you've never opened upward your CSS file before, log inwards to your Blogger account, choose your spider web log together with navigate to Template > Edit HTML. This volition convey upward the code of your template containing all your blog's internal files inwards 1 place.

Step #2: Modify the Background

Click anywhere within the code surface area > press CTRL + F keys together with type the next business > hitting Enter to abide by it (stop at the starting fourth dimension occurrence of it):

body {

Just below body { yous should run across some lines that volition hold back similar this:

trunk {
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 yous run across the highlighted business higher upward inwards the code, withdraw the business together with supervene upon it with:

padding: 0px;

Different templates volition cause got nestling variations, but yous should nevertheless endure able to abide by 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, yous volition run across this line:

.content-inner {
padding: $(content.padding) $(content.padding.horizontal); 
}

Remove the business inwards carmine together with supervene upon it with:

padding: 0px;

This volition withdraw whatsoever of the padding around the inner content, together with then it won't leave of absence whatsoever room on both sides.

Now abide by this part:

$(content.background.color.selector){

Just below it yous volition run across this line:

$(content.background.color.selector){
background-color: $(content.background.color);
}

Replace the business inwards carmine with:

background-color: $(body.background);

Finally, search for this tag:

]]></b:skin>

And only higher upward it, add together this CSS:

.main-outer {
background: $(content.background.color);
}

Step #4: Make the Content Outer Full Width

Content is displayed differently betwixt browsers, together with then you'll adjacent desire to cook this together with then that it alters the width across the board. This code tin endure establish searching for:

.content-outer, .content-fauxcolumn-outer, .region-inner {

And only below it yous volition run across the next lines:

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

Delete the business inwards carmine together with supervene upon that business with:

max-width: 100%;

Step #5: Finish It Up

Now yous cause got only 2 to a greater extent than lines yous need to change. Look for:

</b:template-skin>

And click on the correct arrow to expand the styles. Note: yous volition need to search for </b:template-skin> tag again, together with only earlier it you'll run across these symbols highlighted inwards yellow:

]]>
</b:template-skin>

Above this ]]></b:template-skin> department of code, add together the following:

.main-outer {
max-width: $(content.width);
margin: 0 auto;
}

Then run a search for:

]]></b:skin>

Add these lines of code only before/above it:

.tabs-inner {
padding: 0px;
}
.section {
margin: 0px;
}
.header-inner .widget {
margin: 0px;
}

Save the template together with locomote out out of the editor.

Finished!

Following along alongside this tutorial won't impact or alter the pictures yous are using on the blog, only the blueprint of the content area. If yous cause got a logo that stretches across the concealment together with fits perfectly for 1/3 page header, yous volition need to resize together with re-upload this content together with then that it is able to operate alongside the novel adjustments.