Increase your blogger page width! [ Selfwritten ]

It could be really a pain when your posts get cropped up due to the less width available in the default templates of blogger. This less width could be due to smaller display sizes that were available in the past. Also these default templates provided by Google must be made of a standard size, long time ago, for the universal audience to address. Whatever the reason Google always gave you an option to do whatever changes via editing the HTML of your template. After searching the web I found various guides on modding the HTML, but all were a little bit detailed & dated & much more confusing too! Here I will share the basic & simplest way to do HTML editing for increasing your blogger width. :)

Before I tell you the simple HTML way, you might be interested in an equally simple way that do not needs any HTML edit. But I am not sure if this works for all types of templates as it did not worked for my template. Well in that case no worries, you just go ahead & read the second way that involves HTML edit, is fairly simpler & is recommended by me!

Before we go for doing any tweaks with our blogger template, let us make a backup in case things go awry!! :-D
Log in to your blogger account. Go to Layout> Edit HTML>Download full template. Also you can just copy your whole HTML code & save it in a notepad or MS Word.

Now let's increase our blogger width!
[Way 1.] Straight, without HTML edit:

1. Login to Blogger In Draft.
2. Go to Dashboard > Layout > 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 (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.

[Way 2.] Edit HTML(Recommended):

1. Log in to your blog. Go to Layout> Edit HTML.
2. In the HTML code just find out the column 'Page Structure'.
3. In this part you need to carefully change just 2 values & your blog width would increase!

- Sample HTML code -
/* Page Structure
----------------------------------------------- */
#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:1050px;
margin:0 auto;
text-align:$startSide;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:800px;
float:$endSide;
padding:100px 0 20px;
font-size:85%;
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 */
}
- Sample HTML code -

4. The 2 values needed to be changed are highlighted above. First increase the width of 'main-wrapper' in 'px' (this is the actual post width, remember the change that you make here, do not increase more than 800px or the post may become too wide) If you added 350px here to the default size then you need to add the same number of px in the 'outer-wrapper' too. Else the proportion of the blog page would be unsymmetrical!
5. After you have carefully changed the 2 values (same number of px incremented in 'outer-wrapper' as were in the 'main-wrapper') your blogger page width will be increased! Njoy! ;-)