How to Change the Body Size in a Blogger Template

Hope you have created your backup, if any thing goes wrong it would help you. Now,

1. Login into Blogger
2. Select your blog if you have many
3. Then migrate to TEMPLATE –> Click on “EDIT HTML“

Now you need to find the parts that are responsible for, width of your template. There are Main section, Post sections, Sidebar, Header Section and Footer. The sample code how they look.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
…………………………….
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
…………………………….
#main-wrapper {
width: 410px;
float: $startSide;
…………………………….
#sidebar-wrapper {
width: 220px; float: $endSide;
…………………………….
#footer {
width:660px;
clear:both;

► header-wrapper is Header
► outer-wrapper is our Main section, other elements are wrapped inside of it..
► main-wrapper represents Post Section
► sidebar-wrapper stands for Sidebar
► footer is Footer :]

This means from above example, our header-wrapper is 660px wide, outer-wrapper width (Post section + Sidebar+ margins) is also 660px, and footer 660 px.

Now let us change the width of template.

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
…………………………….
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
…………………………….
#main-wrapper {
width: 500px;
float: $startSide;
…………………………….
#sidebar-wrapper {
width: 220px;
float: $endSide;
…………………………….
#footer {
width:750px;
clear:both;

If you decided to make your Post section (main-wrapper) wider. In order to do this, You have to increase your outer-wrapper. Pleas note the following points while changing width :