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

How To Find The Width Of The Header, Main Column And Sidebar Of The Blogger Templates

Sometimes, we need to know the width of the header, main column or sidebar of our blog.
For example, when we are selecting the format for the adsense code. Suppose I’d like to place Banner format (468 x 60) on top of the main column. That means the width of the main column must at least have 468px width.

Here is how you can find out the width of the header, main column or sidebar of your blog:

1) Find the following codes in the template editor:
(A faster way to do it is by using text search: Click Ctrl+F then type the keyword to be found: #header-wrapper, #main-wrapper, sidebar-wrapper).

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

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

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

2) Based on the above, the width of the header, the main column, the sidebar are 660px, 410px, and 220px, respectively.

So, in this case, if you want to place an adsense in Banner format (468 x 60) on top of the main column, it’s not enough. You need to expand the width of the main column to (at least) 470px.
In the next post, I’ll show you how. Stay tuned! :)

NOTE:

Some Blogger templates may have different “names” for the sidebar. The above example is the codes from standard (2-column) Minima template. In this template, the sidebar is shown as: “#sidebar-wrapper”.

Other templates which have 3 columns (with 2 sidebars) may use other “names” such as:
a) “#right-sidebar-wrapper” and “#left-sidebar-wrapper”
b) “.sidebar-wrapper”
c) “#sidebar-wrapper” and “#new-sidebar-wrapper”

Therefore, for sidebar, when you’re searching the codes using Ctrl+F, just use “sidebar-wrapper” as the text to be found.

Related Posts:

* How To Change The Width Of The Blogger Templates

* 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