How to Change Width of Body, Posts and Sidebar of a Blogger Template

Normally blogger template have written in xml format. So if want to change its widths we have to write some html codes in a proper pace. Lets think Why we increase the width, Some reasons as follows

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.

Then to change width of post, sidebar or body, follow these steps. 

1. First of all you need to sign in to your blogger account.
2. Then go to template tab and select Edit HTML.
3. Find the following code between <b:skin> and </b:skin>.

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

/* 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.

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.

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;

}

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