How to remove empty spaces on left or right side of your blog? Increase the width of your blog template - Solutions for sidebar folling down

Share |

Many blogger template comes with spacing at the left and/or right side of the blog. Which seems to be wasting of so much space of your blog. Also I have seen problems on some blog that side bar gadgets are displayed at down side instead of being at side bar. The solution for this is to increase the total width of your blog as well as increasing the width of sidebar and the main section of your blog.

If you are using standard template then following are very simple and easy steps to increase the width of your blog. For this you need to edit the HTML template of your blog. But don't worry it is very easy perform this.

• Login to Blogger.com and you are at the Dashboard
• Now click on Layout link for the blog for which you wanted to change the template
• Got to Edit HTML and you can see the HTML template for your blog
• Here first take the backup your blog template (Click here to know how to take a back up of blog template)
• Now select check box for Expand Widget Template
  
• Now from the HTML template code search for defination for #outer-wrapper which can be similar to following
  

  #outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
  }

OR
#outer-wrapper {
width: 80%
margin:0;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

• Here you can see that value of width is specified as 660px; in your case it can be different or may be specified or given in the form of percentage. To reduce the spacing increase the value of the width or to increase the spacing decrese the value of width. (Note this is total width of your blog). Here the value of width is given in the pixels(px), hence it becomes fixed for specific resolution. To fix this globally for all kind of resolution provide the width in the percentage format (e.g. width: 100% or width: 85%)
• Hence you code can be similar to following (Note: only change / add the value width and not any thing else)
  

#outer-wrapper {
width: 100%;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
}

OR
#outer-wrapper {
width: 100%
margin:0;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

• As we have changed the width for outer-wrapper we need to change the width of main-wrapper , sidebar-wrapper and header-wrapper
  
• You can look for #main-wrapper and change the width of main-wrapper as we have done for outer-wrapper (Note: Changing main-wrapper width changes the width of the post section. Hence if you have side bar then don't give width for main-wrapper to 100% or in case of pixel based width it should be smaller than outer-wrapper and also total sum of width of main-wrapper and sidebar-wrapper should be always less than width of outer-wrapper)
• Similarly for changing the width of sidebar-wrapper, look for #sidebar-wrapper and increase or decrease its width to change the width of side bar (Note: Changing sidebar-wrapper width changes the width of the sidebar section. Don't give width for sidebar-wrapper to 100% or in case of pixel based width it should be smaller than outer-wrapper and also total sum of width of main-wrapper and sidebar-wrapper should be always less than width of outer-wrapper)
• Now the final thing is to search for the #header-wrapper and change the width for it as it was done for others. (Note: This will change the width of header section.)
  

Share |