Back to Top

3 Modify Blog Widths, For Old and New Blogger Templates

Learn to change your blog’s widths by various methods to suits your template.

Basically, there are two types of codes written for blogger templates

Blogger Template Widths

Simple Codes
If your template is in regular codes then following lines need alteration.
Fixed Width Templates

#header-wrapper {
#outer-wrapper {
#main-wrapper {
#sidebar-wrapper {
#footer {

You will see different width values below each of above codes.
To change above values

Log in to your blogger
Select the blog for editing
Click on the template on the very left corner of the blogger dashboard
Click on Edit HTML
Press CTRL+F inside the code box and type #header-wrapper {

Change the values as per your requirements, make sure different resolutions are used everywhere, so do not modify too much higher limits unnecessarily.

Try to alter values looking above self-explaining the image, while doing changes you will automatically learn what is happening. Keep in mind that Post Section, Side Bar, Outer Wrapper are co-related.

Variable Codes
Some templates are made to fit automatically into different browsers and monitor resolutions. Much of new blogger support this type of codes.

It can be done in two ways.

Template designer/ Template Editor
For Custom Templates

To do this go to your blog's Dashboard
Click Design > Template Designer > Adjust Widths

You can easily change the values and also see the preview of your blog at the bottom. The difficulty is it just allows up to 1000px value. If you want to edit for more values then you need to edit template’s codes. Also, note only some layouts have this facility.

Altering template’s HTML Codes (It's Simple!)
Fluid width or Stretch templates

Be careful to backup your template every time you try changes.
Again Click on Edit HTML in Template option
Note: If you do not see Expand Widgets option, then click each arrow inside the code box (Near code line numbers) to ensure your search do not miss codes.

Search for "<b:template-skin>"

You will see below line of codes

      <b:variable default='986px' name='content.width' type='length' value='986px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

Change main "Post Section" width by altering value 986 to say 1100. Accordingly you may need to change main column right width to fit on the page. You can always save and see the changes in blog's preview in a new page.

Do not go away from the blog's main edit page. Often try to right down values on a notepad to ensure you do not miss original values and do not require template restore.

Note: Main Wrapper + Side Wrapper + Margin = Outer Wrapper

How to change blog’s Content Width?
Go to blogger Dashboard
Go to Template
Click on Edit HTML
Press CTRL+F

/*-----------Container Style---------------*/
{ float: left;
margin: 0;
overflow: hidden;
padding: 15px 20px 15px 25px;
width: 640px;
word-wrap: break-word;

Adjust width according to by altering the width px.
Related Posts Plugin for WordPress, Blogger...