Make Blogger Header, Navigation In Addition To Footer Amount Width

Blogger is a user-friendly service that provides a lot of actually attractive looking default templates for those simply starting out. Default templates come upwards inward handy, but the dainty things most owning your ain weblog is that yous conduct keep the jeopardy to add together your ain personal touch. As a affair of fact, templates aren't made to bound 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 tally your style.

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

Important: Backup your Template

Making the changes to a amount covert Blogger navigation, footer, or header tin endure done too won't accept yous much time. Before yous tin brand whatever changes, yous should salve extra copies of the template .xml file inward instance anything goes wrong. That way, if yous don't similar it or it doesn't come upwards out looking similar it should, yous tin reuse the contents of the master file to restore your weblog to working condition.

Demo

Hover your mouse over the paradigm to run into a earlier too later on example:

How to Make Header, Navigation too Footer Full Width inward Blogger

Step #1: Access Your CSS File

If you've never opened upwards your CSS file before, log inward to your Blogger account, choose your weblog too navigate to Template > Edit HTML. This volition convey upwards the code of your template containing all your blog's internal files inward i place.

Step #2: Modify the Background

Click anywhere within the code expanse > press CTRL + F keys too type the next trouble > hitting Enter to uncovering it (stop at the outset occurrence of it):

body {

Just below body { yous should run into some lines that volition expect 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 into the highlighted trouble inward a higher house inward the code, take the trouble too supersede it with:

padding: 0px;

Different templates volition conduct keep fry variations, but yous should yet endure able to uncovering 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 into this line:

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

Remove the trouble inward ruby too supersede it with:

padding: 0px;

This volition take whatever of the padding some the inner content, then it won't leave of absence whatever room on both sides.

Now uncovering this part:

$(content.background.color.selector){

Just below it yous volition run into this line:

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

Replace the trouble inward ruby with:

background-color: $(body.background);

Finally, search for this tag:

]]></b:skin>

And simply inward a higher house 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, then you'll adjacent desire to develop this then that it alters the width across the board. This code tin endure constitute searching for:

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

And simply below it yous volition run into the next lines:

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

Delete the trouble inward ruby too supersede that trouble with:

max-width: 100%;

Step #5: Finish It Up

Now yous conduct keep simply ii 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, too simply earlier it you'll run into these symbols highlighted inward 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 simply before/above it:

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

Save the template too larn out out of the editor.

Finished!

Following along alongside this tutorial won't comport upon or alter the pictures yous are using on the blog, simply the blueprint of the content area. If yous conduct keep a logo that stretches across the covert too fits perfectly for 1/3 page header, yous volition need to resize too re-upload this content then that it is able to move alongside the novel adjustments.