Jan 31, 2009

Adding A Third Column To Your Blogger Blog

Another feature that can give a garden blogger WordPress envy is those fancy third columns. I admit that when I discovered WordPress and their fancy third columns I almost ran into the arms of WordPress. Then I learned how easy it is to add one to your Blogger blog. Of course you could always do a Google search and find many three column templates you can use but if you like making your own and having full control over the design of your blog building your own "from scratch" is the way to go.

I'll try to avoid any unnecessary wordage and just show you how to do it. In this example I'll be modifying the "Minima" Blogger template it will have one column, then the post area and then another column just like on the Chicago Gardeners blog.

I don't really recommend doing this on your live blog but I've done it so you can work on your live blog but at your own risk. I recommend creating a test blog and trying it out there first and when you become comfortable you can do it on your live blog. Create another test blog and do it again until you're 100% confident. OK? Lets begin.

Near the top of the code of your template find the header code that looks like this:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


Make the following changes:
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


Scroll down to the outer-wrapper that looks like this:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Make the following changes :
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Scroll down to the main-wrapper that looks like this:
#main-wrapper {
width: 410px;
float: $startSide;
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 */
}


Make the following changes:
#main-wrapper {
width: 445px;
margin-left: 3px;
margin-right: 12px;
float: $startSide;
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 */
}

Now scroll down to the sidebar-wrapper that looks like this:
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Copy it and paste it right below making the following changes:
#sidebar2-wrapper {
width: 220px;
float: $startSide;
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 */
}


Notice that I added the number 2 to the name of the new sidebar I created. I didn't this because it has to have a unique name from the sidebar already on your template. You'll see the number 2 come up again below.

Scroll down to the footer-wrapper that looks like this:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


And make the following changes:
#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


Now scroll down a ways to what are called the "divs" it looks like this:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

Copy and paste "div" labeled sidebar above the "div" labeled main and make the following changes to the new "div" we created for the new sidebar:
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>



Make note of the fact that I added the number 2 again this time to the "div" for the new sidebar I created. If you're working on your live blog (which you shouldn't unless you feel comfortable) the "div" for the original sidebar will have widgets. If so remove the widgets like I did in the example above. Now just hit preview and if you did everything correctly you'll get a successful preview but won't notice the new sidebar until you go under Layout>and add gadgets to your new sidebar. If you followed along you're done. The following will be explanation of things for those who are interested. If you don't need to know how the sausage gets made you can stop reading now.

What is the outer-wrapper and why did I make it 900pixels?

The outer-wrapper is what holds your main area and your sidebar in place. Think of it like your belt- it has only enough room (notches) for a certain waist size. If you gain weight you need to add more notches to your belt to accommodate your girth. So that is what we did, we when we added pixels to it-we gave it more "notches" to have room for the new sidebar. Unless I totally messed up the pixels used in the main area and sidebars should add up to 900. main-wrapper pixel including pixels used in the margins = 460. The two sidebars combined add up to 440. 440+460=900.

Does the outer-wrapper have to be 900pixels wide?

No, it can be smaller or it can be larger. It just has to have enough room to contain the main area and the two sidebars. Say we made our sidebars both 200pixels wide and our main area 500 pixels wide it would still add up to 900pixels total and fit in our wrapper. You get the idea. If you got up to 1000pixels for your outer-wrapper you have 100 extra pixels to give to divide up between your main blog area and your sidebars.

Why add margins to the main blog area?

The numbers I used there aren't set in stone either. If you don't add margins to the main area then the sidebar we added would be very close to the main blog. The margins we added push the sidebars a little to the either side of the main area giving some negative space which makes reading easier. Feel free to play around with the numbers keeping in mind that everything has to add up the same number of pixels as the outer-wrapper.

Why add the new sidebar div above the main blog area?

The reason the div I created for the new sidebar was added above the div for the main blog area was because I wanted the template design to be sidebar-main-sidebar. If I had placed the div below the main blog area the template created would have been main-sidebar-sidebar.

Why make the header & footer wrappers larger?

Mostly for design purposes. Nothing will happen if you don't make the header and footer the same size as the outer-wrapper except that your template will look a little uneven.

Feel free to ask questions if any of this needs clarification. Again, I say try this on a test blog until you feel comfortable enough working around a live blog. Make sure to backup and save your template in case you make any mistakes.

35 comments:

  1. Very good post. I have a 3 column blog, but sometimes on other computers the sidebars turn into one- my moms mainly- she has a been screen too. I have to check my code to see if I have the *IE part in there probably.

    I do have a question- how do you make sure all the columns are of equal height? I've tried the code fix on Blog Buster and others and can't get this! I want to change the colors for the spring season- but I can't until I get this.

    Any help would be great!

    ReplyDelete
  2. Tessa,

    Your template does that because you're using a floating template. If you go to a fixed width template it should fix the problem of one column getting pushed below the main and sidebar column. I know floating templates are cool but you should design your template for the screen resolution most people who visit your blog use.

    As for the columns of equal height; aside from that code hack that you mentioned I don't know of an other option. Except, that you could use a template where the background of the sidebars goes all the way to the bottom. Look at the Tic Tac template. The background color of the sidebar goes all the way down to the footer no matter how many gadgets you have in your sidebar. You can use that template as your starting point-stripping away all the stuff you don't like and adding the stuff you do like.

    ReplyDelete
  3. Wow! That was fast! I would try the fixed, but it is only my moms computer and one friend of mine too (she has a very old monitor and it's small) that I've noticed this on- we have at least 4 computers here at home, different sizes and it doesn't do this in ie or ff- not sure what the problem is. Maybe I'll try it and then check my moms. It sure would be nice to fix this. Funny, I thought having a fluid template would do the opposite. I didn't really want to find yet another template and then have to change the width again- but to get the fixed sidebars that probably would be the easiest way (not sure where to look for that). I'd rather find the right template and stick to it- making any changes myself (like background images, etc.) I have added so many things to the code that I'm afraid to switch the template- hacks that took some time to get working right!

    I thought about applying a plain color background photo to the sidebars. Not sure how to go about this though- searching for one online. The problem is most of them I've seen have a pattern and my new look for spring I've added a background picture, centered it, and it's fixed. So adding another patterened pic to the side bare will be too busy! How do I look at the tic-tac template without loading it on my blog (even though I'd use the test blog)?

    Thanks so much for your help- I hope I can get these issues changed soon...spring is around the corner!

    ReplyDelete
  4. Tessa,

    If you look at the wrappers for your blog you'll notice that the widths are not pixels like in the examples above but %. To make yours a fixed width template you'd have to go in there and change all the wrapper %s to pixels. For example your outer-wrapper is ...width: 95%;... you'd have to change it to pixels like; width: 1000px;... Then you'd have to do that for all the wrappers, "header, outer, main, sidebars and footer."

    Take a look at the statistics for your blog and see what the most common screen resolution is for your visitors. On my monitor (1440X900) your blog looks fine but as smaller sizes it may not. So, I say use a fix width template customized to be the best experience for the greater number of people who visit the blog.

    you can see mbttest.blogspot.com -I'll leave it with the TicTac template until I know you've seen what it looks like. Check out the sidebar color and how it goes all the way down.

    I'm not sure I understand the question about the sidebar background.

    ReplyDelete
  5. Well, I'll try that. I don't understand the conversion with % to pixels, but I'll figure it out. I'll head over tonight and take a look at the source code for the mbttest.blog- i'll be sure to let you know when I'm done.

    For the sidebar background- i've read some things on other blogger help sites that say to put apply a background image that will force the columns to be the same height- I didn't understand it myself, but I'm not done experimenting yet.

    Thanks for all your help- you're suggestions have helped me more than the blog help sites!

    I just hope I can get this right soon :)

    Tessa

    ReplyDelete
  6. Tessa,

    If you still don't understand the comment about changing percentages into pixels let me know and I'll try to be more clear or do a small tutorial on how to do it.

    ReplyDelete
  7. I'll let you know if I need further help with the %'s. I haven't had a chance to look at that source cold. Last night I was too busy reading about the terrible fires in Australia- very sad.

    I did look at my source code last night, and funny thing, my header wrapper is in pixels- but the outer, main, and sidebars are in %- weird.

    I'm going to try to work on it tonight. I have lots to sow in the greenhouse today!

    Thanks again for all your help- know it is very appreciated!

    ReplyDelete
  8. Tessa-I've deleted some of our convo in this post. I accepted the invite to see your blog but couldn't comment on it because you have it set to author comments only. Check your gmail account for an email from me. We can talk more about your template via email.

    ReplyDelete
  9. I still haven't received those emails to my gmail account- I wonder if I put the wrong address in. It is blossomsnblunders@gmail.com. I'm going to enable comments on my test blog too.

    ReplyDelete
  10. MBT,

    Thank-you very much for helping me with my blog! You have been so much more helpful than other blog help sites...know that it is appreciated! I am a lot closer to finalizing my spring look, thanks to you :)

    Hope you have a good Valentine's Day!

    Happy Gardening

    Tessa

    ReplyDelete
  11. Hi,

    I've had a 3-column template for a while and have a couple of things to add:

    Firstly, your tutorial's fine for the simpler templates such as Minima and Denim. It won't work for templates which use images such as Thisaway. I found this out to my cost at the weekend - I used another site's instructions to make the required changes, not realising it had images in it. These images are held in Photobucket and there was a problem with the account's bandwidth which resulted in a very unsightly sidebar plastered with error messages :( Needless to say I've changed templates to one without images, so that my blog's template is back under my control.

    Secondly, the instructions you've given results in sidebars on either side of the page. If you want the sidebars on the same side you can set both floats in the sidebar wrapper section to be startside (left hand) or endside (righthand).

    ReplyDelete
  12. PS If the template uses images you HAVE to have the appropriate changed images set up and held somewhere online for the revised template to work.

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

    ReplyDelete
  14. hey,
    firt of all I want to appreciate what you're doing for the blogger community.

    I'm from Argentina so allow me to have grammatic mistakes please!

    I read carrefully your tutorial but the thing is that I have actually 3 columns BUT I'm having problems with the location of this 3rd column.

    Please, visit my blog (www.comubeisbol.com) and tell me how to fix it!

    I really really appreciate your help.

    Mariano

    ReplyDelete
  15. Hi VP,

    Sorry for the late reply. You are right that this modification creates a template with sidebars on either side of the main blog area. I believe I linked to an example in the post to make that clear and made mention of it being for the Minima template.

    Actually if you want the sidebars on the same side you have to put the divs in the right place. If you just use "float" if your main area isn't enough to keep them in place then they can shift or look different depending on the browser.

    Mariano,

    I looked at your website and only see two columns. I looked at your source code and it doesn't look like you have enough space in there to accommodate the third column. Your outer-wrapper is 900 pixels. But your main blog area and your sidebars equal to 915pixels. Change your outer wrapper to 920 pixels to give you enough room.

    ReplyDelete
  16. Do you know how I can make my header image show instead of the title and description? I uploaded my pic, and checked the option for instead of title and description, but it isn't working. Any help would be great!
    Thanks,
    Deanna

    ReplyDelete
  17. Deanna,

    Below I'll post a link to making mods to the header. If you do that mod you can add more gadgets to the header like a pic to the header and take out the name/title gadget to get around your problem.

    http://www.gardenbloggers.com/2008/10/adding-gadets-and-widgets-to-your.html

    let me know how it works.

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

    ReplyDelete
  19. I really like your Blogger advice. On adding a 3rd column do I have to start with the Minima or would the Minima Lefty do? Secondly, I remember reading elsewhere that it really helps SEO a lot for the main blog column to be on the left. If I add a 3rd column to Minima or Lefty where will the main column be and if it's not on the left what can I do to get it there or does that really matter for SEO?

    ReplyDelete
  20. Campfire Shop, You can start with any template you like. I too have heard the same thing about SEO and I'm not the one to ask about SEO and get an authoritative answer from. I will say that I have noticed how templates with columns on the left will sometimes hang for me if they have too much stuff on them like photos, music and badges. When that happens I can't read the posts because the blog is stuck trying to load the left column. So there may be some truth to the "SEO" thing and left columns.

    Hope this helps.

    ReplyDelete
  21. Ok, now one more question. I intend to add a third column. I also want to add a background color to only the column just to the right of the main column, or what will be the middle of the 3 columns. Is there anything in particular that I need to do to add the background color to that column only while keeping the main column on the left and the two sidebar columns to the right?

    ReplyDelete
  22. Campfire Shop,

    You can add it just to one sidebar. See my post on adding background colors to the sidebar. http://www.gardenbloggers.com/2009/02/adding-background-color-to-your-sidebar.html

    ReplyDelete
  23. Ok, tried it and it didn't work. It said that I had two sections with ID: Main and that section ID's should be unique. What my error?

    ReplyDelete
  24. Campfire,

    Were you trying to add a third column or were you trying to color a sidebar?

    From the error message it sounds like you tried to add a second "main" area instead of a second sidebar. Also, when you add in a new section it has to have a different name than the first one. In the example above I made the new sidebar and gave it a new name by calling it "sidebar2" to avoid the section ID error.

    ReplyDelete
  25. Thx man really usefull and clear.

    cheers

    ReplyDelete
  26. Well done! Your method of describing what to do was perfect. There are many helpful people out there on the web who are willing to share what they know, and my hat is off to them, but it is very rare that anyone will take the time to present the information in a manner that is pretty straight forward. One might say that highlighting the text to be changed is no big deal. But as easy as that may have been to do, the fact is, you decided to cater to your audience and make sure they got what they needed...not just the information, but an easy to follow presentation of that information.

    Thanks!

    ReplyDelete
  27. I have added a thrid column to my blog but now the the fonts for all of my headings are huge and the borders on my pictures and posts have disappeared. Any advice???

    http://lifelite10.blogspot.com/

    ReplyDelete
  28. I just tried your method on my test blog and it works perfectly ! I'm so happy 'cause I've downloaded a lot of 3-columns templates but all had bugs with the header and footer widgets. Your method doesn't change anything else, so it has no bug and I'm still free for the rest of the design. Thanks a lot !!

    ReplyDelete
  29. Anonymous6/09/2010

    Brilliant! I've wasted so many hours trying to make this work through other sites, and 10 minutes after finding your post it's finally done right. Thanks so much!

    ReplyDelete
  30. Thanks you very much for giving a clear explanation on how to add a third column on my blog. It works like a charm! I have searched everywhere and this site answered my problem. Again, thank you very much.

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

    ReplyDelete
  32. Multiple attempts with numerous other tutorials and yours is the only one that worked for me! ;) ...thank you for providing a great DIY!!

    ReplyDelete
  33. Thank you for this! Your instructions are very clear to follow, unlike other blogs I've seen before landing here :)

    ReplyDelete
  34. I must be the only blogger who can't suss this damn thing, it is driving me up the wall. I want to add a 3rd column, but I am getting absolutely nowhere with it. Everytime I try and do something and preview it, the changes I try and do go awol.My blog is:http://hairandbeautylicious.blogspot.com/ Really appreciate some help, thank you

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.