Blogspot Trick: How to Change Width of Body, Posts and Sidebar

Why to increase the width

1- You can have bigger images in your blogs.

2- Good result in old browsers like Internet Explorer 6.

3- Sidebar in perfect position.

4- It gives your blog an overall clean look.

Steps to follow

1- First of all you need to go to Design tab and then select Edit HTML.

Tip: Click on Download Full Template to backup your template.

2- Find the following code between <b:skin> and </b:skin>.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Remember: The width factor in #outer-wrapper defined the overall width of blog, in #main-wrapper it defines the width of your posts and in #sidebar-wrapper it defines the width of your sidebar.

3- Now you know the code, you can increase the width in #outer-wrapper and then increase in the #main-wrapper (for posts) or #sidebar-wrapper (for sidebar).

Warning: When you increase the width of any tag, see the preview and if you're satisfied only then you should save.

4- Similarly if you want to change the width of your header, here is the code in your template CSS between <b:skin> and </b:skin>.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

5- Just change the width factor and see the preview, if you're happy with the outcome, save the template otherwise discard the changes.