How to change width of blog (blogger)

These days, people are using high resolution monitors and using smaller width for the blog seems like wastage of screen space. But at the same time, if you want to make sure your blog fits any resolution screen, it is advisable not to adjust the width.

If you have understood the impacts and thought of expanding the usable space in your blog, I have done in mine, here is how you do it:

 1.     Go to Dashboard > Design > Edit HTML.
 2.     Back up your template.
 3.     Do not tick the  Expand Widget Templates checkbox on top right of the code window.
 4.     Find the following code in your HTML (The code block can be little different based on the tempalte you are using):
  

/* Outer-Wrapper */
   #outer-wrapper

  {
     width: 1025px;
     margin:0 auto;
     padding:10px;
     text-align:left;
     font: $bodyfont;
   }

#main-wrapper

 {
    width: 530px;
    margin-left: 20px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#sidebar-wrapper

  {
    width: 250px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#newsidebar-wrapper

   {
     width: 170px;
     float: left;
     word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   }

 The main wrapper and the two sidebar wrappers are contained withing the outer wrapper.

- The width of each of these secttions are described by the "Width" parameter.

- Their positions are described by the "Float" parameter.

Notice that the outer wrapper does not have a float parameter. This is because its position in the center of the page is described by the "margin 0 auto" parameter.

To change the width of any of the main or sidebar column change their width parameters only. Then change the width of the outer wrapper by the same amount because it has to expand to include the new width.

These adjustments make some significant changes on how your blog looks on the browser. So, take the following "SAFERTY PRECAUTIONS" while doing this:
   1. Make changes to one component at a time

   2. Preview the blog to see the effects before saving the changes in the template
   3. Once you think everything seems the way you wanted, go ahead and save the changes.

   4. If you don't like the changes or if the things go bad, reload the old backed up template any time.

To change the width of the HEADER scroll down or find the following code in Edit Template text box:

/* Header */
   #header-wrapper

     {
        width:750px;
        margin:0 auto 10px;
        border:0px solid $bordercolor;
    }

then change "Width" to whatever width you want it to be.

IMPORTANT : As I already mentioned, to allow your blog/site to be viewable in all resolutions restrict the width of the outer wrapper to less than 750 px.

One more Note: Some templates are configured little differently and they may not have "Outer Wrapper" as a separate division. In that case, go to Edit Html under Template tab and usually the first division after "Body" and the a links will usually correspond to the outer wrapper.

Smile and Live Happy!