Blogspot Trick: How to Change Width of Body, Posts and Sidebar

Why to increase the width


1- You can have bigger images in your blogs.

2- Good result in old browsers like Internet Explorer 6.

3- Sidebar in perfect position.

4- It gives your blog an overall clean look.

Steps to follow


1- First of all you need to go to Design tab and then select Edit HTML.

Tip: Click on Download Full Template to backup your template.

2- Find the following code between <b:skin> and </b:skin>.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}


Remember: The width factor in #outer-wrapper defined the overall width of blog, in #main-wrapper it defines the width of your posts and in #sidebar-wrapper it defines the width of your sidebar.

3- Now you know the code, you can increase the width in #outer-wrapper and then increase in the #main-wrapper (for posts) or #sidebar-wrapper (for sidebar).

Warning: When you increase the width of any tag, see the preview and if you're satisfied only then you should save.

4- Similarly if you want to change the width of your header, here is the code in your template CSS between <b:skin> and </b:skin>.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


5- Just change the width factor and see the preview, if you're happy with the outcome, save the template otherwise discard the changes.

25 comments:

  1. This Blogger FAQs are helpful. There's also a lot of work involved. I wanted to add a tab below my header (the photo with the blog title and description on it). This is where I can add tabs according to topic such as HOME ABOUT RECIPES, etc. People click their mouse on it. I couldn't find the tutorial for this.

    ReplyDelete
  2. Sorry but this still doesn't make any sense. Your code does not match what is found in Blogger. Can you just provide something that we can cut and paste?

    ReplyDelete
  3. hi 4SeasonFisher, actually different blog templates might have different codes, just send me your blog URL and I'll tell you the modification you need to change width....

    ReplyDelete
  4. Hi Bilal!
    Great tutorial.
    I am just starting out with my blog. I tried your tip to get youtube videos in 640 width appear properly in IE. It worked great! Thanks!
    marandr.blogspot.com

    ReplyDelete
  5. i want to make the image behind my title bigger..is that possible?
    hustlecrowe.blogspot.com

    ReplyDelete
  6. @ HUSTLE CROWE, you've already increased the width of your blog. So, simply add a bigger image. Your current image is showing in full size :)

    ReplyDelete
  7. Thank you for the tutorials! They are great! Wish I had found them weeks ago.

    ReplyDelete
  8. Brilliant! Thank you so much - I'm usually scared of anything to do with changing html stuff, but this is so easy - or at least you made it look easy... thank you!!

    ReplyDelete
  9. Hi,

    Thanks so much for your tutorials, really easy to follow. I wonder if you could help me with a problem? I am adapting a template and for some reason the right hand widgets/pictures keep dropping to the bottom of the page, I can't get them to the top!

    The site is: http://coquetteanddovedesigns.blogspot.com

    Grateful for any help.

    Cheers.

    ReplyDelete
  10. @ Coquette and Dove, I've just checked your blog and I think you've already solved the problem.

    ReplyDelete
  11. I did indeed, not sure how, but got there in the end! Thanks so much for taking the time to check though.

    ReplyDelete
  12. I am so confused. Please visit www.lafrugal.blogspot. I would like to expand my blog so it has a bigger feel. How could I do that

    ReplyDelete
  13. @ Megan @ La Frugal, you're using Craftwork Blogger template which has fixed background images. So, the width can't be changed. However, you can use some default Blogger templates if you want bigger width!

    ReplyDelete
  14. Hi,
    i want to add few tabs below the blog description on my blog? how to do that?

    ReplyDelete
  15. @ dBigPumPkins, send me your template file.

    levisinside0@gmail.com

    ReplyDelete
  16. I am usually pretty good at changing the widths since it is found under outer-wrapper or likewise. I downloaded a new template and it says blog-wrapper...Is this replacing "main-wrapper"? Thanks

    ReplyDelete
  17. @ Jeremie I, send me your template file and explain the modifications you want to make it it.

    levisinside0@gmail.com

    ReplyDelete
  18. I applied with new template, i managed to adjust the width but then still not able to show the full photo on the post...do u mind to help pls?

    www.im-chacha.blogspot.com

    ReplyDelete
    Replies
    1. Hi Charlene, full post images will be displayed by applying a different hack. I'll write a tutorial some time later.

      Delete
  19. i m unable to implement any one of above mentioned codes. What i want to do is that grey sidebars that you can see on my blog i mean outer side i m not sure what you call that outer wrapper may be i want it to get close to the tabs ending borders from both side not affecting anything else. I hope you can help

    http://ptetech.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Mahfooz, I'm no longer accepting any new requests. However, you can get premium support starting from $10.

      Delete
  20. Thanx for ur support i lil appreciate

    ReplyDelete

Note: All comments will be moderated.