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:
Love the wider look! It really looks great. Good job and thanks for sharing how with us!!
I'm really liking your layout today! BEAUTIFUL!
Thank you so much girl! I have been wondering how to do this.
THANK YOU! You make it look so easy! Let's see if I can do it too!
It was easy! Just remember to preview and exit completely if it doesn't work. Are you leaving tomorrow? Sunday?
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!
Well, I'm not on Blogger, but I had to say I love the new look! Wider column, new banner, background and all!
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
For some reason it made my header go to the left and not spread it all out. But it did widen the columns.
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.
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.
I was just thinking about getting motivated enough to look for instructions on how to do this :) Thanks for letting me be lazy today
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).
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.
Much more efficient then randomly changing numbers. Was able to go directly to the code and change it. Thanks!
You rock!
Jblieu-Great! Glad it worked!
Mrs. Parks-Thank you, thank you very much.
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!!
ps... the blog I changed was:
www.2livinglightly.blogspot.com
thanks again!
Carrie @ Heart of a Servant
www.2livinglightly.blogspot.com
This is awesome. :) Thanks!
Worked great. Thanks!!
You a life saver thanx so much!!!
Yay...thanks a whole lot!
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.
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
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! :-)
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
Oh my gosh!! Thank you so much! Just started fiddling around with my layout and it went horribly wrong until i found your post! :)
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!
Thank you three much! this worked perfectly!
you explained it the easiest for people like me, and it worked! thanks!
thanks so much! perfect:)
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.
Thanks for the tutorial!
Thank you so much!! Clear and perfectly precise!
This helped display my video's without cutting off the side PERFECTLY! thank you!
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?
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
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.
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!
Thanks so much for your clear and helpful instructions! I love my new wider blog!
Thanks for that. I never knew how to do this before.
wow that was super easy. Thanks! i actually checked other peoples instruction & they scared me :p Thanks for the simple instructions.
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...
Thanks so much, this was really helpful, especially since I am new at blogger and blogging in general!
Thank you very much. This has been bothering me greatly and I plan to fix it right now!
http://howtobeateacher.blogpsot.com
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!
thanks alot!!! i did the same thing and now my blog looks a lot nicer!! thumbs up!
Great advice, friend! I've used your tip to fix my blog as well...kudos!
oh my gosh!! You are AWESOME! Thanks for sharing how to do this. It was sooo easy! :) Much, much love to you!
This is exactly what I was looking for, thank you! :D
Very helpful! Thanks!
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
xxxooo Thank you for the easy to follow directions!!
Good karma to you :-)
Awesome! You're a huge help!
Thank you so much! I googled "how to make blog post space wider" and found your easy-breezy instructions. Great job!
Thanks! Very helpful! Now I just have to figure out how to make my pictures bigger!
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!!!!
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
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!!
Let me add my thanks as well! I've visited a lot of sites but your info was the most specific and helpful.
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!
Thank you so much! I followed your directions, exactly and it worked!
Thank you this was soo helpful, I could never understand the narrow columns and empty space!
cheers,
thanks for the help
-g
Awesome. Thanks so much!
Thank you! I love it and you made it very clear on what to do!
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/
Loved how easy that was!
Thanks for the instructions!
My template doesn't have a #main-wrapper :(
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.
Thanks, now my blog is sittin' PHAT!
Thanks for the incredibly simple to follow guide
lifesaver, ive been trying to find out how to do this easily for a while, many thanks!
You are the best!! Thank you!! See how this worked: allnaturale.org
nks- I have managed to change my blog thanks to your post!
Karen Steffano - Fine Artist - South Africa
awesome! it works! thanx
Awsome! Thx!
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!
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!
Thank you for sharing this information, it worked great!
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?
I found you by googling for directions to widen my columns in blogger. Thank you so much!!!
I can't thank you enough, this was really helpful :)
Worked like a charm. Thanks.
great work its really to good keep it up man regards
Urdu columns
Thanks so much for the info! Very helpful!
D
Thanks so much for the tip, it looks much better now! *big smiles*
thanks heaps dude... champion..
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
Fantastic!
Thank you very much.
I really like ur blog and I think u will put more posts so its very useful man
keep it up
Urdu Recipe
This kind of information is very limited on internet. . this is very nice idea.Thanks all for the useful information.
Wallpaper Download
Yes! I loved it and I saved it! Thanks a lot!
Ans
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
GREAT! Thank you
Post a Comment