How to Increase Blogger Webpage Width

When you are creating your blog using the standard blogger templates, you can either select a fixed-width template or a stretchable width template. Both style has their respective advantages and disadvantages. The more popular style is the fixed-width templates that has a lot more Blogger template styles to choose from. This is probably because the layout of your published materials will look the same regardless of monitor resolution size or the browser page size. The stretchable template tend to "rearrange" your published material based on the monitor resolution and browser page side.

So you decided to use the fixed-width template but the width of the content typically is only 660px and this looks too narrow on your wide screen 24" monitor - too much "wasted" spaces on the sides. Changing the width to suite your need is actually pretty simple and the following is how I did so with my blog:

1. Go to your blogger Layout

2. Click on Edit HTML

3. Scroll down to find the section for Outer-wrapper like follows:

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

}

As in bold letters above, the total width size is 660px, the width of the content/main-wrapper is 410px and the width of the sidebar is 220px. Main-wrapper + sidebar = 630px.  The other 30px for padding etc. Change the size of the main-wrapper or sidebar or both to suit your need. Sum up the 2 widths, add 30px and change the total width number accordingly.

4. Scroll up to find the section on header like the following:

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

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Adjust the width of the header to be the same width as the new outer-wrapper width.

5. Save your template by clicking on SAVE TEMPLATE

Now you can view your blog and enjoy a wider blog webpage.

How to Hide Blogger Navigation Bar

Hiding your blogger Navigation bar (Navbar) like the one above will help to make your blogger site looks more like a website rather than a blog. You may or may not want to do this depending on the content of your site. Hiding the Navbar is rather easy:

1. Go to your blogger Layout

2. Click on Edit HTML

3. Place the following line betwen the element < head > and < /head >

#navbar-iframe{display:none !important;}

4. Save your template by clicking on SAVE TEMPLATE

Now you can view your blog and the Navbar should be hidden.