Wednesday, April 27, 2011

Template Designer: How to Increase Entire Blog Template Width

Blogger Tips and Tricks: Template Designer: How to increase entire blog width beyond maximum: "The new Blogger Template Designer has made it very easy to change overall blog width as well as the width of the main column and the sideba..."

Notes From ME(Terri) are in red type: This Blog is full of great and stable changes you can make to your blog, I was able to increase the width of my page using this method!

Peter Enviroman has a Great Blog and is the First Guest Blog in a New Series I am starting about other Bloggers of Note. Make sure you drop by his site and give him a BIG Thank You for some great ideas! I changed my site to 1250 wide and it's made all the difference! (Warning, if you are using the Old templates, this will not work, update your page today! Also, it will alter the structure of your older posts, and may require side scrolling for people with old, small screens, so be aware if you are doing so).


The new Blogger Template Designer has made it very easy to change overall blog width as well as the width of the main column and the sidebars. All you need to do is to sign into Dashboard, click DESIGN > TEMPLATE DESIGNER > ADJUST WIDTH and you will be provided with sliders to drag and drop to whatever values your heart desires, then click APPLY TO BLOG to save the new settings (see screenshot below):



Not only that, you can view the result of your selected changes below and if horrified by your changes, just click RESET WIDTHS TO TEMPLATE DEFAULT. (Note that while there is no slider to adjust the width of the main column, it would be indirectly set by the overall width - whatever width you have set for the sidebar)

However with the Simple (and I believe the others too) template, the overall width is limited to maximum 1000px. So what do you do when you want your overall blog width to be greater than 1000px.?

WARNNG: Before proceeding download a copy of your template! Here is a screenshot of where it is located. If you don't like the changes you can upload your old template and all will be well.
Well, while in the DESIGN tab/mode, click EDIT HTML to open the template editor and search for these codes (use ctrl+ F and search for, say, <b:template-skin> or any portion of the codes below:

<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='0px'/>


then change that 1000px to whatever values you fancy and you would have changed the overall blog width.


BTW the default for the overall blog width is 930px which is roughly the value you would need to set in order to optimize your blog for 1024x768 screen resolution which is what many web designers are doing because the previous lowest denominator 800x600 screen is now used by very few people.

No comments:

Related Posts Plugin for WordPress, Blogger...