Blogger is a user-friendly service that gives a whole lot of actually enticing wanting default templates for these simply beginning out. Default templates come in useful, however the good issues about proudly owning your individual weblog is that you've the possibility to add your individual private contact. As a matter of reality, templates aren't made to limit your freedom of design, however as an alternative they're there to present you a basis to construct from. With each default template obtainable on Blogger, you can also make adjustments to suit your fashion.

One of the most typical requests out of the Blogger group when making alterations is how to change the look of among the key sections like header, navigation, and footer. Initially, these objects are designed to match inside simply 1/Three of the web page, surrounded by padding and margins on both aspect. These margins are used to give the web page a slim becoming look, however might additionally trigger your content material to look compressed.

Important: Backup your Template

Making the adjustments to a full display Blogger navigation, footer, or header might be carried out and will not take you a lot time. Before you can also make any adjustments, you must save additional copies of the template .xml file in case something goes fallacious. That approach, for those who do not prefer it or it does not come out wanting prefer it ought to, you may reuse the contents of the unique file to restore your weblog to working situation.

Make Blogger Header, Navigation and Footer Full Width 1

Demo

Hover your mouse over the picture to see a earlier than and after instance:

Make Blogger Header, Navigation and Footer Full Width 2

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

Step #1: Access Your CSS File

If you've got by no means opened up your CSS file earlier than, log in to your Blogger account, choose your weblog and navigate to Template > Edit HTML. This will carry up the code of your template containing all of your weblog's inside recordsdata in a single place.

Step #2: Modify the Background

Click wherever contained in the code space > press CTRL + F keys and kind the next line > hit Enter to discover it (cease on the first incidence of it):

physique {

Just beneath physique { you must see some traces that may seem like this:

physique {
font: $(physique.font);
coloration: $(physique.text.coloration);
background: $(physique.background);
padding: 0 $(content material.shadow.unfold) $(content material.shadow.unfold) $(content material.shadow.unfold);
$(physique.background.override)
}

Where you see the highlighted line above within the code, take away the road and change it with:

padding: 0px;

Different templates may have minor variations, however you must nonetheless have the option to discover these traces inside each template.

Step #3: Change the Content Section

Next, search utilizing the CTRL+F keys for this half:

.content-inner {

Just beneath it, you will note this line:

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

Remove the road in crimson and change it with:

padding: 0px;

This will take away any of the padding across the interior content material, so it will not go away any room on each side.

Now discover this half:

$(content material.background.coloration.selector){

Just beneath it you will note this line:

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

Replace the road in crimson with:

background-color: $(physique.background);

Finally, seek for this tag:

]]></b:pores and skin>

And simply above it, add this CSS:

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

Step #4: Make the Content Outer Full Width

Content is displayed in a different way between browsers, so you may subsequent need to repair this in order that it alters the width across the board. This code might be discovered looking for:

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

And just under it you will note the next traces:

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

Delete the road in crimson and change that line with:

max-width: 100%;

Step #5: Finish It Up

Now you've gotten simply two extra traces you want to change. Look for:

</b:template-skin>

And click on on the suitable arrow to broaden the styles. Note: you'll need to seek for tag once more, and simply earlier than it you may see these symbols highlighted in yellow:

]]>
</b:template-skin>

Above this ]]></b:template-skin> part of code, add the next:

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

Then run a seek for:

]]></b:pores and skin>

Add these traces of code simply earlier than/above it:

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

Save the template and exit out of the editor.

Finished!

Following together with this tutorial will not have an effect on or alter the images you might be utilizing on the weblog, simply the design of the content material space. If you've gotten a emblem that stretches across the display and suits completely for 1/Three web page header, you'll need to resize and re-upload this content material in order that it's in a position to work with the brand new changes.




Make Blogger Header, Navigation and Footer Full Width 3