27 September 2011

How to Adjust the Width of Your Blog

Even before I started this blog I wanted to change its width. It's true! I wanted to have a wide central column so that I could illustrate my insightful articles with beautiful big photos.

At last I learned how to do it and I am eager to share the knowledge with you. Here is a quick magical way to make your blog even wider than what Blogger allows in the Template Designer.

Before you start following this tutorial, make sure you have saved your template in case of failure.

1. Go to Design and then click on Edit HTML.




2. If you are using Mozilla Firefox press Ctr+F and paste this code:   <b:template-skin>. You will see it highlighted in green in the HTML template of your blog.




3. Now look at the next row. You will see this:
      <b:variable default='930px' name='content.width' type='length' value='1050px'/>




And you know what? The last value, namely 1050 is your magic number. This is the total width of your blog template. It could be different for different templates and this is ok because you can change it to any number you like (as long as it fits a regular screen, of course).

If I change it to 1300 and click on the Template Designer and then on Adjust Widths I can see perfectly well that I've done the job and the value has changed:



See? I told you it was magical!

Happy widening!

13 comments:

  1. This is a great tip! It does make it look more professional.

    ReplyDelete
  2. Thank you for your tips! We have been debating changing our blog ~ this will definitely help!

    ReplyDelete
  3. Me again....I just did it and I think it looks so much better. After work I will work on a new banner that matches better than the quick adjustment of the one I already had.

    Thanks again.

    ReplyDelete
  4. Thank you Sonya, you are the best:) Hugs!! Now to go play with my template:):)

    ReplyDelete
  5. Sher, I am loving your new "fat" blog :) The width now allows much bigger photos as well!

    Kala, Kendra + Patricia, I can't wait to see what you come up with!

    ReplyDelete
  6. Great advice, especially if you have a custom banner that you dont want to resize.

    ReplyDelete
  7. J.Crabbit, yes, the banner can be a leading motif for widening but Blogger offers adjustment of its size during upload. Anyway, if one wants to keep its size - why not!

    ReplyDelete
  8. Great info! I wish I had it when I was trying to re-size my blog. It took forever to find the code information I was looking for.
    Valerie
    Everyday Inspired

    ReplyDelete
  9. This is very helpful. I can't wait til I have some time to play with my blog layout; I'm gonna try this :) xo, Mary

    ReplyDelete
  10. yeah, I was thinking of a case where resizing may affect the image ratio or the font. There are 1,000 reasons to adjust the width. TV is so focused on getting thinner, I am glad to see something getting wider.

    ReplyDelete
  11. yeah just read that again.. awful joke attempt on my part

    ReplyDelete
  12. This is really good to know, thank you!

    ReplyDelete
  13. LOL I find it funny that you can 'trick' Blogger like that. ;)

    ReplyDelete