Template Designer: How to change column width

The new Blogger Template Designer  makes changing column widths a lot easier. In regular (non Template Designer) layout template,

changing blog width requires some code editing in template HTML. With Template Designer you can stay away from the codes, because it can be done from within the designer itself, easy peasy.

 

I. Changing column widths

Here’s what to do,

1. Login to your Blogger account.
2. Go to Dashboard > Design > Template Designer.
3. In Blogger Template Designer page click Layout. Then select Adjust Width.
   
4. Use the slider to adjust the width. You have (maximum of) three adjustable widths. Below are the names and their width range (in px):
   • Entire blog -500px (minimum) to 1000px 1500px (maximum)
   • Left sidebar   -100px to 500px
   • Right sidebar -100px to 500px
   
5. Use the slider to change the width. Changes you make will be reflected instantly in a live preview beneath the editor. 
   
6. If you like the result, click the orange Apply to Blog button to save.

II. Changing sub-column widths

If you select a layout with sub-columns, like an example on the right, you would have noticed that sub-columns are set to have equal widths (50%-50%) by default.

You can change that in Template Designer > Advanced > Add CSS, by entering this code in the editor:

table.section-columns td.first.columns-cell {width:70%;} 
table.section-columns td.columns-cell {width:30%;} 

The first line is for the left sub-column and the second line is for the right sub-column. Change the percentage as you wish, as long as the total is 100%.

 

III. Setting width beyond the adjustable range

Update August 2011
Blogger has changed the upper limit from 1000px to 1500px.

If the width you want is wider than the upper limit (or narrower than the lower limit), then you have no choice but to enter template HTML to perform the changes:

1. Go to Dashboard > Design > Edit HTML.
2. Look for following lines in your HTML code:

   <b:template-skin> 
     <b:variable default='930px' name='content.width' type='length' value='1000px'/> 
     <b:variable default='0' name='main.column.left.width' type='length' value='360px'/> 
     <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/> 

   • Code line 2 is for Entire blog
   • Line 3 is for Left sidebar, and
   • Line 4 is for Right sidebar.
3. Just change the value of value attribute at the end of the code line to your desired value. For example, to set the width of Entire blog to 1200px, just change the figure 1000px to 1200px in line 1.

That’s it. Enjoy!