photo SummertimeAnnouncements.png New posts coming soon :)

May 16, 2009

How To Convert to 3-Column

This tutorial is from Blogger Busters!

The Minima template is the easiest Blogger template to customize, as this is the simplest two column template.

First of all, set your template to Minima (not the stretch template, but any color will do!), then follow these instructions:

1. Go to Template > Edit HTML, leaving the "Expand widget templates" box unchecked.

2. Now, find this section in the HTML code:
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden;
3. Change float: $endSide: to float: right; in the sidebar wrapper code above

4. Copy the code below, and paste it directly under the sidebar wrapper code above.
#left-sidebar-wrapper {
width: 220px;
float: left;
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 */ }
(this will make the new sidebar float to the left of the main column)

5. Now, you need to find this section further down the page:
<div id='main-wrapper'></div>
6. Copy code below and paste it directly above the previous code above:
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>
7. If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accommodate one sidebar. So now we need to expand the outer wrapper to accommodate this new sidebar.

8. Find this section in the HTML code, scroll up a ways:
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont; }
9. Change the width of the wrapper from 660px to 880px.

10. Now you need to change the width of the header-wrapper from 660px to 880px so that it spans the new width of your blog, you'll need to scroll up: T
#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor; }
11. You should PREVIEW & then SAVE your template if all is okay. Your new sidebar will not be show as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Layout > Page Elements in your Blogger dashboard and drag your widgets to the left sidebar.

7. If you add anything to this left sidebar, you will probably notice that it bunches up to the main section. This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML. To do this, we will add a margin to the left side of the main posts section . Find the following code below in your template's HTML and add the code defined margin-left:20px and change to float:left;; as shown below :
#main-wrapper {
width: 410px;
float: left;
margin-left: 20px;
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 */
This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust the width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accommodate this margin too. Either that, or you could reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, PREVIEW your template.

8. Finally, SAVE your template and enjoy your new sidebar!

Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.

10 comments:

  1. Thanks for the tips! I have done all of the steps but, my 3rd column is inline with the main column. How do you get it to the right? I have tried to drag it over, but it will only put it under the main body.

    Thanks

    ReplyDelete
  2. I am having the same problem. I have really been trying to get my blog to be a 3-column blog for a while. I'm excited to have gotten as far as I have with your instructions. However, something just isn't working in that left column yet. For some reason it's above the main column, not seperated. Help!

    -Sarah

    ReplyDelete
  3. I've figured out problem. Be sure to lowercase the LEFT in the #LEFT-sidebar wrapper code. I went through my steps and got to where you guys did and decided to change LEFT to left and it worked after that. I have fixed the tutorial.

    ReplyDelete
  4. I really love your site and the fact that you create free tutorials about doing this. I have followed the instructions and also did the "Left" to left, but still my main posts show up on the left side instead of the middle. Please help me. I am getting a headache. Thanks!

    ReplyDelete
  5. Bonnie, send me an email to butterflygirlms@yahoo.com regarding your problem. I would gladly take a look at your code to see what the issue is. I will need your login information.

    ReplyDelete
  6. Heather, I sent you all my information. I hope you can help me. My kids and my husband probably think I have abandoned them since I have been trying to figure this out. Thanks so much for looking into it for me.

    ReplyDelete
  7. Heather, Thanks for you tutorial on how to change to a 3 column blog. I followed all your directions and I think I have it right but having one problem. When I try to move my gadgets over they won't stay there. They just go back to the original column. Did I do something wrong?

    ReplyDelete
  8. Trish, I'm not exactly sure what you have done wrong. I would need to see your coding to be able to tell. You can send it to me at my email: butterflygirlms@yahoo.com

    ReplyDelete
  9. I know the problem now:: FOLLOW THESE INSTRUCTIONS AFTER the above::


    Be sure that there is NO CAPITALIZATION in any of the code. I know I have it in the code to show you what needs to be changed. I probably need to change that.

    I think I have it RIGHT capitalized in the #sidebar-wrapper code so that needs to be un-capitalized.

    #left-sidebar-wrapper {
    width: 220px;
    float: LEFT; change to lowercase and see if that helps.
    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 */ }

    ReplyDelete
  10. I have rewritten this tutorial and you should have no problems.

    ReplyDelete