How To Change The Width Of The Blogger Templates

Sometimes you may find the new Blogger (Blogger Beta) templates that you like for your blog. However, you’re not very happy with the width of the template. And you want to make some changes to the width of the template.

For example:
You are using standard Minima (2 column) template and you’d like to put adsense’s Banner format (468 x 60) at the top of the main column. However, the main column for the posts in the original template is a bit too narrow (410 px) for the Banner format, which needs at least 468 px width.
In this case, you’ll need to widen the main column slightly.

Here are the steps how to change the width of the main column in Blogger template:

1) Log in to Blogger. In the Dashboard, click “Layout” and it will bring you to “Template” tab. Then click “Edit HTML”. This will open the template editor window.

2) Please remember that every time before you make any changes to the template, save a copy of your original codes first. In case there is something wrong, you can get back your original template again.
(Read this post in case you are not sure how to back up your template: "How To Backup Your Blogger Template Codes").

3) Find the following codes in the template editor:
(You can simply click Ctrl+F for find the keyword “#header-wrapper”, “#outer-wrapper”, “#main-wrapper”, and “#footer” in the codes).

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

#outer-wrapper {
width: 870px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: left;
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 */
}

#right-sidebar-wrapper {
width: 220px;
float: right;
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 */
}

#left-sidebar-wrapper {
width: 220px;
float: left;
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 */
}

#footer {
width:870px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

4) The width of the main column for the posts and each sidebar are 410px and 220px, respectively.
Whereas the width of the header, outer wrapper, and footer is 870 px. Since the template has 2 sidebars, the total width of the two sidebars plus the main column is: 410 + 220 + 220 = 850px. The difference of 20px (between 870px and 850px) should be for some spaces in between the columns.

5) Since the minimum width needed to place a Banner format is 468 px, suppose you’d like to increase the width of the main column to 470px.
That means you will need to add another 60px (=470px – 410px) to the original width.
Consequently, you would also need to add another 60px to the header, outer wrapper, and footer, as they too have to expand to accommodate the new width. Therefore, their width will be changed to 930px (=870 + 60).

Here are the parts of the codes that need to be changed:

#header-wrapper {
width:930px;

#outer-wrapper {
width: 930px;

#main-wrapper {
width: 470px;

#footer {
width:930px;

6) To see the effect of the changed codes, click “Preview” button at the bottom of box (always do this first before saving it). If the result looks fine, save the codes by clicking “Save” button.

Note:
You can use the same way for changing the width of the sidebars too. Just remember that when you change the width of the main column or sidebars, you need to adjust the 3 components (header, outer wrapper, and footer) by the same amount to maintain synchronization. Also, if you’d like to change both main column as well as sidebar, it’s better to do it one at a time. Don’t forget to preview first before saving the codes.

Hope this can help. :)

You might be interested in the following topics:

* Some Tips To Solve Problems in New Blogger

* How To Add A New Page Element (For Adsense Ads/Link Unit, Google Search Bar, or Text) At The Top Of The Main Column (Blog Posts) Of Blogger Templates

* How To Add A New Page Element (For Adsense Ads or Image / Picture) In Blog Header Of Blogger Templates

* How To Change The Text Alignment For The Blog Header’s Title And Description

View the original article here

This post was made using the Auto Blogging Software from WebMagnates.org This line will not appear when posts are made after activating the software to full version.