How To Customise The Widths Of The Blogger Template

While trying to test the various positions and sizes of Adsense unit around the blog, I needed to customise the width of my main column to accommodate the Banner format (468 x 60) of Adsense unit.

I was using standart Minima, which is a 2-column template with the default width of 410 for the main column, which is not long enough to display the whole ad unit.

To customise the widths of the Blogger template:

1. Log in to Blogger.

2. At the Dashboard, click Layout.

3. Within the Layout tab, click "Edit HTML" to open the editor window.

4. Do all the necessary backup.

5. Change the required width values of the following sections: #header-wrapper, #outer-wrapper, #main-wrapper, #sidebar-wrapper, #footer. Click Ctrl+F to find the keywords within the code.

I changed the width of the main column with adjustment as follows:

At #header-wrapper - width: 688px
At #outer-wrapper - width: 688px
At #main-wrapper - width: 468px (note: the width of the Adsense unit in Banner format)
At #sidebar-wrapper - width: 202px
At #footer - width: 688px

Note that the widths of the #header-wrapper, the #outer-wrapper, the #footer (688) are bigger in value than the total of the widths of #main-wrapper and #sidebar-wrapper (668). The difference (20) represents the spaces between columns. This will keep the overall design of the blog in proportion.

Adjust the widths according to your requirement, with the above-mentioned guideline in mind.

6. To see the effect of the changes, click "Preview".

7. If the result is satisfactory, click "Save" to save the changes.


.