Pages

Thursday, July 10, 2008

How to widen your columns on Blogger

I have always wanted my main column wider. I just didn't get why it was so small with all that extra space on the left. I thought I wanted to go with a 3 column layout, but I decided against it. I think I like this better. Here's a tutorial on how to change to a 3 column layout.

Here's what I did to widen my main column and header. Let's start with the header.
Go to Customize, Layout, Edit HTML. Scroll down until you see this (although your number that is in red is probably 660 or something.)

#header-wrapper {
width:950px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background-color:#3d310b;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;

Change the header width number to 950. (I don't know why 950. That's just what I found online when I was looking at how to do it.)

Now scroll down aways until you see this:

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;

Again, your number is probably 650 or 660 (I can't remember what it was originally.) Change this to 950 too.

One more thing. So far we've changed the actual blog space. Now we need to change your main post column. Scroll down to this:

#main-wrapper {
width: 650px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#3d310b;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;

I think the original number was lik 410. It should be changed to 650.

Now, click Preview and see if your space has widened. If you love it, Save Template. If you hate it or something didn't work, exit without saving.

This is the site that helped me the most. It goes through the steps I showed you above, along with how to make your sidebar wider (which I decided not to do) or how to change to a 3 column layout. I think it's a little easier than the first link.

Let me know how it goes!

97 comments:

  1. Love the wider look! It really looks great. Good job and thanks for sharing how with us!!

    ReplyDelete
  2. I'm really liking your layout today! BEAUTIFUL!

    ReplyDelete
  3. Thank you so much girl! I have been wondering how to do this.

    ReplyDelete
  4. THANK YOU! You make it look so easy! Let's see if I can do it too!

    ReplyDelete
  5. It was easy! Just remember to preview and exit completely if it doesn't work. Are you leaving tomorrow? Sunday?

    ReplyDelete
  6. YAY! It worked! I'm not up to the widget thing yet, since I'm semi-happy with my background. And you know how I hate browsing for them!
    Sunday!

    ReplyDelete
  7. Well, I'm not on Blogger, but I had to say I love the new look! Wider column, new banner, background and all!

    ReplyDelete
  8. I like your new look and thanks for the directions, I really don't like my site layout and have wanted to fix it for some time. I also love your template

    ReplyDelete
  9. For some reason it made my header go to the left and not spread it all out. But it did widen the columns.

    ReplyDelete
  10. cute....did you learn this from Z's mom? I was just reading over her stuff and have been begging her for a while to post and you both did within hours of eachother..
    great tips.

    ReplyDelete
  11. Hippie family-Yes! I read through her stuff and found the site that I ultimately understood how to do it! Thanks for stopping by!

    Where's my angels-Not sure why it made your header go to the left...

    Insana mama-Thanks! It's really fun to do!

    Beth-Thanks...I think I will keep this one for awhile.

    ReplyDelete
  12. I was just thinking about getting motivated enough to look for instructions on how to do this :) Thanks for letting me be lazy today

    ReplyDelete
  13. I bow down to the blogging goddess...your steps were so simple and so easy and so...so...so...perfect! I just did it myself and what a difference it makes.

    May a thousand butterflies kiss your toes.

    (I have no clue what that means, it just sounded funny).

    ReplyDelete
  14. This is an excellent tutorial, Angie! I wanted just this before I caved and had someone do it for me. Thanks; I'll keep it in my files.

    ReplyDelete
  15. Much more efficient then randomly changing numbers. Was able to go directly to the code and change it. Thanks!

    ReplyDelete
  16. Jblieu-Great! Glad it worked!

    Mrs. Parks-Thank you, thank you very much.

    ReplyDelete
  17. THANK YOu so much!!! I just did this to change the layout of my blog! Worked like a charm! I really appreciate the help! Now I just need to create a larger header!!

    ReplyDelete
  18. ps... the blog I changed was:
    www.2livinglightly.blogspot.com

    thanks again!

    Carrie @ Heart of a Servant
    www.2livinglightly.blogspot.com

    ReplyDelete
  19. You a life saver thanx so much!!!

    ReplyDelete
  20. Many thanks for posting this. I saw a different blogspot site this morning. It look wonderful. So I did a search on "html widen margins blogspot". Your instructions worked beautifully.

    ReplyDelete
  21. Hi,, I like the rest wish to thank you for the simplistic steps to change the width of my page. http://gyr-gt-lee.blogspot.com

    I picked your link out of my google search and am I HAPPY I did! Thanks, Brenda

    ReplyDelete
  22. I just wanted to say thank you for posting this info. I found it while searching Google and appreciate how you gave me the steps to fix what has been annoying me for eons. Have a great day! :-)

    ReplyDelete
  23. Hi
    Thank you SO much - I have been trying to change the width of the columns for ages - your steps are so easy! Thanks again and have a fabulous day :-)
    Shana
    www.secretarydiaries.blogspot.com

    ReplyDelete
  24. Oh my gosh!! Thank you so much! Just started fiddling around with my layout and it went horribly wrong until i found your post! :)

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. If you were here at my house you would here me clapping with excitement. Thanks so much for this easy tutorial. It took me all of 45 seconds to make these changes!

    ReplyDelete
  27. Thank you three much! this worked perfectly!

    ReplyDelete
  28. you explained it the easiest for people like me, and it worked! thanks!

    ReplyDelete
  29. hey, thanks for this. you did a great job - the no-nonsense little things like the red pixel number changes made this the most helpful guide I could find on the subject.

    ReplyDelete
  30. Thank you so much!! Clear and perfectly precise!

    ReplyDelete
  31. This helped display my video's without cutting off the side PERFECTLY! thank you!

    ReplyDelete
  32. Thank you SO much. The new MeFiles that you can earn money with have to be 234 wide, so this just perfect for me. You are an angel! And by the way, I love you colors and header, did you do them yourself?

    ReplyDelete
  33. Hi im new at blogging this helps a lot thanks for the tip and code pls. if you need any softwares or freeware visit my blog @ pinoysoftwares.blogspot.com


    thanks again

    ReplyDelete
  34. Thank yuo so much I need this. I like the way my site looks now.

    Check it out at http://www.fashionwithoutguilt.com.

    Thank you again.

    ReplyDelete
  35. i hate the plain blogger template but my brain shuts off when trying to learn html. so thank you very much for making this extremely simple and painless!

    ReplyDelete
  36. Thanks so much for your clear and helpful instructions! I love my new wider blog!

    ReplyDelete
  37. Thanks for that. I never knew how to do this before.

    ReplyDelete
  38. wow that was super easy. Thanks! i actually checked other peoples instruction & they scared me :p Thanks for the simple instructions.

    ReplyDelete
  39. It doesn't work for me because I don't have the same html code that you have. Which is surprising, but it seems that's the way it is...

    ReplyDelete
  40. Thanks so much, this was really helpful, especially since I am new at blogger and blogging in general!

    ReplyDelete
  41. Thank you very much. This has been bothering me greatly and I plan to fix it right now!

    http://howtobeateacher.blogpsot.com

    ReplyDelete
  42. Thank you so much. I am technologically unsavvy, but I managed to do EXACTLY what I wanted with my blog through your post. Thanks again!

    ReplyDelete
  43. thanks alot!!! i did the same thing and now my blog looks a lot nicer!! thumbs up!

    ReplyDelete
  44. Great advice, friend! I've used your tip to fix my blog as well...kudos!

    ReplyDelete
  45. oh my gosh!! You are AWESOME! Thanks for sharing how to do this. It was sooo easy! :) Much, much love to you!

    ReplyDelete
  46. This is exactly what I was looking for, thank you! :D

    ReplyDelete
  47. RX Pharmacy Online. Get Cheap Medication online. Buy Pills Central.
    [url=http://buypillscentral.com/news_en-us.htm]Get Top Quality Viagra, Cialis, Levitra, Tamiflu[/url]. canadian generic drugs. Cheapest pills pharmacy

    ReplyDelete
  48. xxxooo Thank you for the easy to follow directions!!

    Good karma to you :-)

    ReplyDelete
  49. Thank you so much! I googled "how to make blog post space wider" and found your easy-breezy instructions. Great job!

    ReplyDelete
  50. Thanks! Very helpful! Now I just have to figure out how to make my pictures bigger!

    ReplyDelete
  51. WOW!!!! THANKS SOOOOOO MUCH! Your header has totally inspired me by the way too... I'll have to get my up to par! Really clear instructions my sister showed me your blog post here. THANKS A MILLION!!!!

    ReplyDelete
  52. Sorry... I have one more question. I love how your background is light blue but your side bar and the center section are white. How did you do that? Could you email me if you have the time? THANKS!!!
    gwenethowens@yahoo.com

    ReplyDelete
  53. Thanks so much!! I am excited to apply this change to my blog, however, I will have to figure out a different background as my wording is running into my background now, so until I get that figured out I will change it back to the original.
    Thanks so much!!

    ReplyDelete
  54. Let me add my thanks as well! I've visited a lot of sites but your info was the most specific and helpful.

    ReplyDelete
  55. A friend sent me the link to this post and I just wanted to say thank you! Your instructions made it so clear and easy! I really appreciate the help!

    ReplyDelete
  56. Thank you so much! I followed your directions, exactly and it worked!

    ReplyDelete
  57. Thank you this was soo helpful, I could never understand the narrow columns and empty space!

    ReplyDelete
  58. Thank you! I love it and you made it very clear on what to do!

    ReplyDelete
  59. i fixed my husband's blog using this tutorial! thanks! :)

    (i had a "prof" do my blog!)

    Julia
    www.workwifemomlife.com

    Hubby's
    http://theironedge.blogspot.com/

    ReplyDelete
  60. Loved how easy that was!
    Thanks for the instructions!

    ReplyDelete
  61. My template doesn't have a #main-wrapper :(

    ReplyDelete
  62. I can't get it to look right. Since I don't have a #main-wrapper I tried changing "main", but everything just leaks out of the window.

    ReplyDelete
  63. Thanks, now my blog is sittin' PHAT!

    ReplyDelete
  64. Thanks for the incredibly simple to follow guide

    ReplyDelete
  65. lifesaver, ive been trying to find out how to do this easily for a while, many thanks!

    ReplyDelete
  66. You are the best!! Thank you!! See how this worked: allnaturale.org

    ReplyDelete
  67. nks- I have managed to change my blog thanks to your post!
    Karen Steffano - Fine Artist - South Africa

    ReplyDelete
  68. Can I just say I'd love to pay you about $1,000 for this fabulous post of help! Now I've just gotta "clean" things up a bit, but I'm so excited about my new wider space! Thanks so much for taking the time to share . . . I'm so grateful!

    ReplyDelete
  69. I found you in a search for "how to widen blogger column". Thank you so much for your help! I played with the numbers a little bit to get the look I wanted. I've been wanting to widen my post column since I started my blog but didn't want to lose my template design. Love it! Thanks again!

    ReplyDelete
  70. Thank you for sharing this information, it worked great!

    ReplyDelete
  71. Thank You! This did work good for my text,etc. However, I have a downloaded template. Is there any way to fix that so everything doesn't fall out the sides?

    ReplyDelete
  72. I found you by googling for directions to widen my columns in blogger. Thank you so much!!!

    ReplyDelete
  73. I can't thank you enough, this was really helpful :)

    ReplyDelete
  74. great work its really to good keep it up man regards

    Urdu columns

    ReplyDelete
  75. Thanks so much for the info! Very helpful!
    D

    ReplyDelete
  76. Thanks so much for the tip, it looks much better now! *big smiles*

    ReplyDelete
  77. thanks heaps dude... champion..

    ReplyDelete
  78. SO GREAT AND EASY BUT i HAVE TO CHANGE THE SIZE OF MY BACKGROUND AND HEADER. IF I FOLLOW YOUR TUTORIAL WHAT SHOULD MY BACKGROUND AND HEADER SIZE BE? HOPE YOU CAN HELP ME

    ReplyDelete
  79. I really like ur blog and I think u will put more posts so its very useful man

    keep it up

    Urdu Recipe

    ReplyDelete
  80. This kind of information is very limited on internet. . this is very nice idea.Thanks all for the useful information.
    Wallpaper Download

    ReplyDelete
  81. Yes! I loved it and I saved it! Thanks a lot!

    Ans

    ReplyDelete
  82. OMG thank you so much for this post! U have been trying to change my blog width for years but always got confused with all those tutorials out there because i/m not familiar with html.

    Your post is THE most easiest to understand of all the other websites and I finally can understand how to make it wide.

    I now have a blog template that I've been wanting, thanks to you! :D


    Check out my Fashion & Beauty blog:
    http://twothousandthings.blogspot.com

    ReplyDelete