Template Designer: How to change column width

The new Blogger Template Designer  makes changing column widths a lot easier. In regular (non Template Designer) layout template,

changing blog width requires some code editing in template HTML. With Template Designer you can stay away from the codes, because it can be done from within the designer itself, easy peasy.

 

I. Changing column widths

Here’s what to do,

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Template Designer.
  3. In Blogger Template Designer page click Layout. Then select Adjust Width.
    change width1
  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 1500px (maximum)
    • Left sidebar   -100px to 500px
    • Right sidebar -100px to 500px
    change width2
  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.

    II. Changing sub-column widths

    template designer sub column If you select a layout with sub-columns, like an example on the right, you would have noticed that sub-columns are set to have equal widths (50%-50%) by default.

    You can change that in Template Designer > Advanced > Add CSS, by entering this code in the editor:

    table.section-columns td.first.columns-cell {width:70%;} 
    table.section-columns td.columns-cell {width:30%;} 

    The first line is for the left sub-column and the second line is for the right sub-column. Change the percentage as you wish, as long as the total is 100%.

     

    III. Setting width beyond the adjustable range

    Update August 2011
    Blogger has changed the upper limit from 1000px to 1500px.

    If the width you want is wider than the upper limit (or narrower than the lower limit), then you have no choice but to enter template HTML to perform the changes:

    1. Go to Dashboard > Design > Edit HTML.
    2. Look for following lines in your HTML code:
      <b:template-skin> 
        <b:variable default='930px' name='content.width' type='length' value='1000px'/> 
        <b:variable default='0' name='main.column.left.width' type='length' value='360px'/> 
        <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/> 
      • Code line 2 is for Entire blog
      • Line 3 is for Left sidebar, and
      • Line 4 is for Right sidebar.
    3. Just change the value of value attribute at the end of the code line to your desired value. For example, to set the width of Entire blog to 1200px, just change the figure 1000px to 1200px in line 1.

    That’s it. Enjoy!

    50 comments to "Template Designer: How to change column width"

    Greenlava April 16, 2010 at 7:22 PM    

    @joegrimjow
    Thanks, maghi pulok deh :)

    Diana Joy April 17, 2010 at 12:25 AM    

    Thanks for this tutorial....want to try it today.

    Greenlava April 17, 2010 at 1:12 AM    

    @Diana
    Post questions here if you encounter any problem.

    e~car182 April 18, 2010 at 2:54 PM    

    onl9 x??nak mntak tlg ni

    Auntiepressy April 19, 2010 at 11:36 AM    

    you are an angel. thank you.

    Greenlava April 19, 2010 at 5:56 PM    

    @e~car182
    You can post your problem here. Kalau malu email pun boleh :)

    Ned Funnell June 25, 2010 at 7:24 AM    

    Fantastic!

    Arghya July 14, 2010 at 7:48 PM    

    great !!
    But is it possible to set the value in % i.e 100% instead of px ?

    Greenlava July 14, 2010 at 9:16 PM    

    @Arghya
    You mean in III? I don't think you can (at least not there). I've tried, and got an error.

    Brianna July 26, 2010 at 8:20 AM    
    This comment has been removed by the author.
    Unknown September 15, 2010 at 7:12 AM    

    Thanks! I had been trying to figure this out all day. After reading your instructions; I was done in a minute.

    Greenlava September 15, 2010 at 8:40 AM    

    @Peg
    I'm glad this article helped.

    Satin Russell October 2, 2010 at 11:50 AM    

    Thank you, thank you, thank you! I just spent a couple of hours trying to figure out how to shift things over to the left because I had a huge, blank column on the left-hand side. You've just helped to resolve a lot of frustration. :)

    Greenlava October 3, 2010 at 12:08 AM    

    @Janyaa
    You're welcome. Please share with others.

    Satin Russell October 4, 2010 at 5:49 AM    

    Greenlava,

    Thought you might like this:
    http://www.google.com/support/forum/p/blogger/thread?tid=57918e3b492f0105&hl=en&fid=57918e3b492f0105000491bd6016c59d

    Greenlava October 4, 2010 at 9:30 AM    

    @Janyaa
    Thanks :)

    Kiat October 14, 2010 at 3:52 AM    

    Thank you very much!!!
    help me a lot....haha!!!

    Anonymous,  November 7, 2010 at 1:14 PM    

    Thank you so much. This is just the information I was needing. I do have another question, and I'm not sure if you will find it here... Occasionally when I post a particular topic, I will lose a couple of followers. I always wonder who I lost and because I've so many, I can't figure it out. Is there any way to tell who stopped following me? I often wonder if I offended them, etc. Thank you again for help. Now I just need to resize my header. One thing always leads to another, doesn't it?

    Greenlava November 8, 2010 at 8:37 AM    

    @Jan @ bobbypins boardwalk
    I'm afraid there's no way of knowing that at the present time.

    Admin December 12, 2010 at 3:48 PM    

    Hey Dude.. Thanks a Lot! It Surely Helped me.. Thank You So Much!! ^_^

    Andrew Graeme Gould December 14, 2010 at 2:34 AM    

    My aim is to have screen filling sized photos on my photoblog.I'm using the Awsome design with a few changes.

    I have tried the width slider at between 900 pixels and full width. The photos looks good but I cannot get them to centre on the screen. If you take a look at this test blog of mine, you'll see how there's just too much space over to the left.

    My TEST BLOG is HERE: http://aggtestblog.blogspot.com/

    My REAL BLOG can be seen by clicking on my name as poster of this message. This is the blog that I want to apply these changes to, and then I'll be able to link larger photos from my Flickr account.

    Another related question:
    The width slider in the template designer in Blogger has a maximum of 1000 pixels. I presume it's alright to use this width, otherwise it wouldn't be available. But does this mean that at 100 pixels, some viewers with smaller screens will have to scroll?

    Is there a fix for this?

    Thanks very much...

    Greenlava December 14, 2010 at 9:26 AM    

    @Andrew Graeme Gould
    1. You need to increase the width. Set it to 1110px, follow the instructions in step III.
    2. Yes viewers withs smaller screens have to scroll. There no fix for that.

    Andrew Graeme Gould December 15, 2010 at 4:04 AM    

    Thanks for the reply.

    Before I go any further, I would like to set my blog so that those who use a 10" netbook won't have to scroll.

    What is the maximum width I can set for this?

    I note that Blogger's default settings are:
    Entire Blog: 930 px
    Right Side Bar: 360 px

    Can I go any wider than this for a 10" screen? I´ll need to consider this before going further.

    Thanks,
    Andrew.

    Andrew Graeme Gould December 15, 2010 at 4:10 AM    

    OK... I'm back after establishing that a 10.1" netbook (which I may buy myself in the future) usually has a resolution of 1024 pixels wide by 600 pixels tall.

    So it would be able to view a Blogger (or other) blog set at 1000 px width, wouldn't it?

    Thanks.

    Greenlava December 16, 2010 at 1:50 AM    

    @Andrew Graeme Gould
    I'm not sure if 1024px is enough. Don't forget the vertical scrollbar on the right of your browser, and the frame on the left, I say at least 30px there.
    The best way to find out is by using an online tool that checks how your blog looks like on different resolution. Try this one: Mark Horrell - Browser screen resolution checker.
    I hope that helps

    Andrew Graeme Gould December 18, 2010 at 3:08 AM    

    Thank you so much for that very useful page.

    I link my photos to my Blogger blog from my Flickr account, and I've now worked out that the Large link size there, which is 1025 px wide, is far too big to display even on a 15.6" screen. I was originally using Flickr's link for Medium 500 px width images, and felt it was too small, but it was the largest share link size from Flickr that would fit in the template at the default setting.

    The Blogger Template Designer adjustable width selector's default for the entire blog is 930 px. Increasing this to 980 allows Flickr's larger 640 px width Medium size to fit nicely.

    I can see from that resolution check page that a viewer on a 10.1" screen would see the main blog are very well. They would have to scroll only to see the sidebar (also adjustable), and I think that's a satisfactory compromise.

    I hope this test of mine will be of use to other Blogger/Flickr users, too.
    Thanks once again, and all the best...

    Indi Robzzzzzzz December 31, 2010 at 4:24 PM    

    Good we need the xml code help us if u know..............

    Greenlava January 1, 2011 at 12:20 AM    

    @Indi Robzzzzzzz
    What xml code are you referring to?

    Baoshancampus January 6, 2011 at 12:25 PM    

    Thanks soooooooooooo much.

    joey April 30, 2011 at 3:53 PM    

    thanks..more power..http:/technewsdepot.blogspot.com

    Prayag Verma May 10, 2011 at 1:40 PM    

    thanks a lot

    Yelena's Nest June 27, 2011 at 3:03 PM    

    Finally! I have found a way to widen my blog! I have been searching and trying for months with no results.. I was never able to find the heading wrapper etc in my html. With your help I changed the setting width beyond the adjustable range, from 1000 to 1200. Thank you so much!!

    Honeybee July 8, 2011 at 7:46 PM    

    Hi Greenlava,
    I do some width adjustment to my blog. But now it looks like the changes affect the menu bar. Instead of being in a normal single horizontal tab, it become double and in perfect mess. How to fix it?
    healthybeautifulblog.blogspot.com

    Thanks a lot in advance.

    Honeybee July 8, 2011 at 8:30 PM    

    Hello again, I got it fix already =)

    Unknown October 18, 2011 at 5:44 PM    

    Thanks a lot for this info. It added something to my blogger knowledge.

    Filipino recipe February 26, 2012 at 5:49 PM    

    I want to widen the width of left side bar of the blog to fit 336 x 280. I hope that you could help.. Thanks

    Connie March 12, 2012 at 11:31 PM    

    I've look through my template twice and don't see "template skin" anywhere. I'm using one of the old ones, Minima stretch, so should I look for something else besides "template skin"??? Thanks!!

    Greenlava March 14, 2012 at 12:32 AM    

    @Connie
    This tutorial is intended for (newer) Designer Templates. Yours is an (older) Layout Template. What you need is the following tutorial:
    How to change blog width in a Layout template

    youtube html5 player April 23, 2012 at 2:51 PM    

    Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

    SEO SMO Services May 22, 2012 at 1:47 PM    

    Hello Green Lava - this is my 1st visit in your blog. I have found this blog while touring in the blog land. I must say - this is truly a helpful write up for the newbies blogger. Thanks for sharing. I have tweeted it also to my followers. I hope they will also get benefit out of it. Thanks a lot. :)

    jspng June 24, 2012 at 8:20 AM    

    I added some photos to my blog and they didn't fit. Your instructions were excellent and I could widen my page to fit the photos. Thanks. It fixed all my pages.

    jspng June 24, 2012 at 8:22 AM    

    Thanks for your slider bar instructions. It worked perfectly on my blog. I added photos and they didn't fit. Changing the width of my writing space helped. Thanks. Now my blog looks good!

    muhafaja August 5, 2012 at 2:57 PM    

    Thank youuuuuuuuuuuuu

    vinod August 17, 2012 at 7:41 PM    

    Thanks for the awesome tutorial . Worked perfectly :)

    Unknown September 21, 2012 at 11:38 AM    

    Thanks so much! I was clueless as to how easy this was.

    Tips on blogging November 17, 2012 at 8:15 PM    

    A lot of thanks for your help. I was looking for it.

    Blue Vader November 20, 2012 at 4:15 PM    

    thank you bro!

    home coffee maker January 1, 2013 at 11:30 PM    

    Very nice post and good information here.Thanks for your posting!

    Aunie January 19, 2013 at 3:29 AM    

    perfect perfect perfect! i've been looking for the sub=column headings tut and you solved it! thanks! www.auniesauce.com

    Ant March 23, 2013 at 12:54 PM    

    cheers

    Post a Comment

    We love to hear from you! Leave us a comment.

    To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.