How to Change the Width of Blogger Blogs

Modifying the Width of Your Blogger Blog

Here is a quick step by step tutorial on how to change the width of your Blogger Blog.

I have provided screenshots of each step - just follow along and you shouldn't have any problems.

Before you start create a backup of your current blog just in case there is a problem.

I will show you how to change the standard template so that the width is the same as this blog. This basically entails 4 things. First you increase the width of the Outer Wrapper and then you increase the width of the Header and then the two columns inside the outer wrapper. This would be the Post column and then the Sidebar column. Lastly you increase the width of your Footer.

You can click on all images to enlarge them.

Step One

Open "Layout" and choose the "Edit HTML" option.



Note: I am using the Minima Template for this demonstration - if you have a different template just find the appropriate section - the steps are the same.

Step Two


Scroll down to the Header section and change the Header Wrapper width to 820px



Step Three

Scroll down to the Outer Wrapper section and change the width to 850px



Step Four

Change the Outer Wrapper "Text-Align" to "left"



Step Five

Change the Main Wrapper width to 550px - this is located right below the Outer Wrapper section. The Main Wrapper is your Post Column.



Step Six

Change the Main Wrapper "float" to "left".



Step Seven

Change the Sidebar Wrapper width to 270px. The Sidebar Wrapper is located right below the Main Wrapper.



Step Eight

Change the Sidebar Wrapper "float" to "right".



Step Nine

Scroll down to the Footer section and change the width to 850px.



Click "Save Template" and you are done.

This is what you have just done;

You widened the size of your usable blog space to 850px. ( The Outer Wrapper )

Inside the Outer Wrapper you have changed the width of the Three Sections that make up your blog.

1) The Header section - 820px

2) The Main Wrapper section which consists of your two columns;

- The Post Column - 550px
- The Sidebar column - 270px

3) The Footer section - 850px

You will notice the Header section is 30px less than the Outer Wrapper.

The two columns add up to 820px - also 30px less than the Outer Wrapper.

I have made the Footer the same size as the Outer Wrapper.

You can play with different widths but be sure that none of the other wrappers add up to more pixels than what you set the Outer Wrapper at. Your two columns should be at least 30px less than the Outer Wrapper so that they have a space between the two columns. The Header should be a little less as you don't want it bleeding right to the edge. (It just looks better) The Footer can be the same width as the Outer Wrapper.

Cheers,

Griz

60 comments:

  1. Grizz,
    Thanks for the step-by-step.

    Hope I don't mess it up. With your examples I should be able to handle it. :-)

    ReplyDelete
  2. Blogger,

    Let me know if I messed up... lol.

    ReplyDelete
  3. Nice Grizz,

    It worked for blog 1.I love having dual monitors. It makes following diretions online soo much easier. Maybe I'll pull out some of my old html books from my networking and communications days and play around a little.

    ReplyDelete
  4. Dennis,

    Glad to hear. I have to say that I can't function without dual monitors - I hate traveling with just a laptop - way too much work "tabbing" up and down. Try answering a 100 comments when you can't read the comments while composing the answers! Lol. I'd have 20 monitors if I could figure out how.

    Thanks Dennis.

    ReplyDelete
  5. Grizz,

    Thanks for the instructions. Easy to follow. What is the purpose for doing this? To make the blog more reader friendly?

    ReplyDelete
  6. Medicman,

    I do it for two reasons; to use larger fonts so it's easier to read and to change it a bit from the standard format which makes the blog look like it's brand new and is owned by a beginner. Not a good thing if you want people to stick around.

    and well, I just think it looks a bit better - not as much white space.

    ReplyDelete
  7. I finally got time to make the changes to at least on of my blogs. Worked great thanks!

    Looks so much better.

    Grizz,

    Do you have a dark background on most of your Adsense blogs? Vic says this works better for getting more clicks. Any input?

    ReplyDelete
  8. Blogger,

    What Vic says is true however I don't do this myself as I don't create strictly made for adsense sites anymore. I want all my sites to be able to pass a manual review if someone was to check and as such they all have good content and don't employ any "tricks". I don't want to take any chances on losing my adsense as I now make a considerable income from it.

    I should point out that most made for adsense sites target less competitive niches and as such there is less risk of being flagged by the competition and therefor you can take liberties with the rules - the tricks of the trade. (I don't recommend this though - adsense is too valuable to lose)

    I target highly competitive niches as they pay the best but it means that I have to do things by the book because my competition will report me in a heartbeat if I don't.

    Please keep in mind that I am not suggesting beginners target the competitive niches - I have been doing this a long time and have the resources to be able to dominate them. Work your way up the ladder by targeting easy niches first, build up your sites, gain experience and slowly tackle harder and harder keywords. If you go for a niche like "credit cards" right off the bat then you will never get anywhere and likely quit from frustration. Baby steps...

    ReplyDelete
  9. Grizz,
    Luckily I came across your blog jut as I was starting. I am so new I can smell fresh paint. Anyway I am trying to make my blog look just like yours. I have tried and tried but how do you get your adsense to appear to the left at the top of you blog? Mine runs right down the middle. Thanks
    Brad

    ReplyDelete
  10. Wow. So simple, clear and straight forward...thank you!! I was just following instructions to see how it turns out and this is the EXACT width
    i had in mind!

    ReplyDelete
  11. Precisely the information I was looking for. Thank you!

    ReplyDelete
  12. Can this be done with another template? I am currently using the "Rounders 3" template, and am struggling trying to widen the columns. The columns themselves widened, but the word space didn't change. Also, you can still see "corners" rounded in the old spots. THANKS for any help you can provide!

    ReplyDelete
  13. These instructions are perfect. This is exactly what I needed to do to my blog. Thanks for sharing.

    ReplyDelete
  14. Hi! Thank for the tips! I have done exactly as instructred but my images are not as large as I would like them to be....this is my blog...
    http://capturedmomentssudbury.blogspot.com/

    Could you give me instructions on how my blog could look like this one?:
    http://impulsephotography.blogspot.com/

    ReplyDelete
  15. This worked amazingly, thanks!

    ReplyDelete
  16. Hi Griz, this instruction is just so fantastic! I have a question though, I noticed that the space between the text lines in your blog is quite wide, which is something that I just can't find to recreate it with my blog. The lines in my blog are quite close to each other which is hard to read. Can you pls provide me with information on how to widen the space between the lines?

    Thanks again for your help!

    ReplyDelete
  17. Dr House,

    Have you tried the georgia font and increase the size 2x (I think - play with the size).

    It's been a while since I set this up but I think that is all that is required. If it doesn't work let me know and I'll check further.

    ReplyDelete
  18. Hello!
    Thanks so much for posting these instructions. I followed them and I can't believe how easy it was.

    The only minor problem that I am now having is that my header is not centred even though in the HTML coding it says that it is.

    Is there any chance that you would consider going to my blog and seeing what I mean? I am 'stuck" as to how I would fix this!!

    foreverandeverhouse.blogspot.com

    Thanks! Jill

    ReplyDelete
  19. nice...thanks for the info

    ReplyDelete
  20. Thanks ! Thanks ! Thanks !

    ReplyDelete
  21. Thanks Griz, it works like a charm ..

    ReplyDelete
  22. Thank you! I found a free blogger template that I really liked but it was a three column and I wanted only two. I got lucky and deleted the part of the HTML for the column I didn't want, but simply couldn't figure out how to change the post width. I wanted my posts to be a more reasonable width instead of feeling really cramped. Works great and super easy to do!

    ReplyDelete
  23. This was great! It worked like a charm. I had some big flash games that were overlapping into my right side bar that look soooo much better now.

    Thanks; I really appreciate this.

    Cyne

    ReplyDelete
  24. Thanks really helped, Finally can fit what I want on, If you want you can drop your link by on my blog its just an advertising one but try it, only new but im still getting visitors...

    http://freeadplugging.blogspot.com/

    Thanks, Zakkeh!

    ReplyDelete
  25. Hi Griz,

    Wonderful post. Thanks for this.

    I tried the above steps for my blog, it is NOT working.

    I want to increase my posting area width; I mean overall content window (including post area and sidebar)

    My Blog: http://oracleexperiments.blogspot.com
    Template: TicTac (Blueberry)


    Here is my template code (Layout structure)

    /* ---( layout structure )---*/

    #outer-wrapper {
    width: 847px;
    margin: 0px auto 0;
    text-align: $startSide;
    font: $bodyfont;
    background: url(http://www.blogblog.com/tictac_blue/tile_$startSide.gif) repeat-y;
    }

    #content-wrapper {
    margin-$startSide: 42px; /* to avoid the border image */
    width: 763px;
    }

    #main {
    float: $startSide;
    width: 460px;
    margin-top: 20px;
    margin-$endSide: 0;
    margin-bottom: 0;
    margin-$startSide: 0;
    padding-top: 0;
    padding-$endSide: 0;
    padding-bottom: 0;
    padding-$startSide: 1em;
    line-height: 1.5em;
    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 {
    float: $endSide;
    width: 259px;
    padding-top: 20px;
    padding-$endSide: 0px;
    padding-bottom: 0;
    padding-$startSide: 0;
    font-size: 85%;
    line-height: 1.4em;
    color: $sidebartextcolor;
    background: url(http://www.blogblog.com/tictac_blue/sidebar_bg.gif) no-repeat $startSide top;
    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 */
    }


    /* ---( header and site name )--- */

    #header-wrapper {
    margin: 0;
    padding: 0;
    font: $pagetitlefont;
    background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif) no-repeat $startSide top;
    }

    #header {
    margin: 0;
    padding-top: 25px;
    padding-$endSide: 60px;
    padding-bottom: 35px;
    padding-$startSide: 160px;
    color: $pagetitlecolor;
    background: url(http://www.blogblog.com/tictac_blue/top_h1.gif) no-repeat bottom $startSide;
    }

    #header h1 {
    font-size: 200%;
    text-shadow: #4F73B6 2px 2px 2px;
    }

    #header h1 a {
    text-decoration: none;
    color: $pagetitlecolor;
    }

    #header h1 a:hover {
    color: #eee;
    }

    Can you please help me out?

    Many thanks in advance.

    ReplyDelete
  26. Thank you very much. The first of many posts I've seen on this subject that worked and was easy to follow.

    ReplyDelete
  27. Thanks so much for your generous gift of this tutorial. It worked great.

    ReplyDelete
  28. Thank you thank you thank you. Awesome post.

    ReplyDelete
  29. You are all welcome, welcome, welcome... :-)

    ReplyDelete
  30. tankx a lot my friend.its working

    ReplyDelete
  31. this is amazing

    thanks so much!

    ReplyDelete
  32. Oh, nice, I have no experience with HTML at this level and this was a piece of cake. Thanks for the screenshots!

    ReplyDelete
  33. Just wanted to say thanks so much for that. I've been trying to figure this out for ages!

    ReplyDelete
  34. thanks it helped me my site http://shortjokes4u.blogspot.com

    ReplyDelete
  35. Great post! Really helpful for my static pages that have photos!

    ReplyDelete
  36. Thank you so much for such a great post!

    ReplyDelete
  37. Thanks!!! Is there anyway to eliminate all the empty space from the left side of screen to the 1st column??

    ReplyDelete
  38. i need a help about how to put ads within the content(within the blog post or after every post).of the blog
    please help me!!!

    ReplyDelete
  39. hey,thanks to your step by step information.i like this.make sure to do this step by step in all your info.

    ReplyDelete
  40. thanks a lot :)
    just used it to fix my with.worked perfectly

    www.trendzeta.blogspot.com

    ReplyDelete
  41. Thanks!!! Love it. Easy to follow step by step.

    ReplyDelete
  42. wow! very easy and clear instructions. thanks buddy. you really helped me out.

    ReplyDelete
  43. MWAH!!!!!!!!!!!!!!!!!!! I LOVE YOU. THAT SAYS IT ALL. THANK YOU A MILLION TIMES OVER!!!!!!1

    ReplyDelete
  44. great work..thank you very much..

    ReplyDelete
  45. OMG! thank you! the step by step guide is very very helpful. bless you!

    ReplyDelete
  46. Thank You for this - worked like a charm!!!

    ReplyDelete
  47. Hi, thanks for the great article! I was unfamiliar with html before I started my blog, but your post inspired me to fiddle around with it. I was looking around for info on how to center the layout of my blog and couldn't find answers anywhere, but I figured it out myself! A proud moment for me :). If anyone else is wondering, I made an article in my design blog: whatnaturecannot.blogspot.com

    Hope it can help someone!

    ReplyDelete
  48. hello, me a bit confused.com that is what i have in my menu:
    * Header
    ----------------------------------------------- */
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: $(description.text.size);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper {
    padding: 22px $(header.padding);
    }

    .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    }

    /* Tabs
    ----------------------------------------------- */

    ReplyDelete
  49. thank you thank you thank you! i almost changed my whole template just to get this effect! but i hate how limited the options are on the other templates. thanks!

    ReplyDelete

Project Payday - Work from Home

This program is for those of you who want to make money online but don't have or want a blog or website. This isn't a get rich scheme. It is a work at home job that can make you a few hundred dollars a day if you put in some effort.

I have written several posts about this and suggest you start with this one. Project Payday

Unfortunately Project Payday is only available to American users at this time. It is free to join.