Mar 3, 2009

How to change to 3 Column Minima

I promised to help you to change your blog to 3 column, I try to explain it now very simple, and sorry my bad English. This works best with Minima Template, like all my background designs. And the width is same, than I have used to design all my 3 column backgrounds.

And a very good news is, that if you do these little changes to your HTML-code, you don't have to reset your template, so you won't loose any content of your blog.

Please note: before you make any alterations to your Blogger template ALWAYS save a backup copy to your hard drive. You can do this by selecting the “Layout” option in Blogger, then the “Edit HTML” option, then “Download Full Template.”

Select first Blogger "Layout" option and then "Edit HTML."

1. Scroll down until you find #header-wrapper, change the width show with red (660 to 880):


<#header-wrapper { width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}>

2. Scroll down until you find /* Outer-Wrapper, and you will find this following code, where you should make the changes shown with red, (change the width, add margin, change float right, add the whole code for left-sidebar-wrapper) :

<#outer-wrapper { width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

#sidebar-wrapper {
width: 220px;
float: right;
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 */
}

#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 */
}

>

3. Scroll down down down until you find the following code (under /* Footer)(don't do anything to that code, just find it)


<div id='main-wrapper'>

4. Now copy the following code below shown red and paste it straight above the code you just found (yes, just above <div id='main-wrapper'>):

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

5. Now save your template and go into the Layout Editor.(Notice, the posts will be shown on left, until you add some gadgets to your new left sidebar).

6. Enjoy!






PS. Ohjeet suomekielella loytyy Keisarin Uusista Vaatteista.

15 comments :

  1. thank you for explaining this
    thank you for your kindness
    I love your blogs, backgrounds
    and art work....have a beautiful day !

    ReplyDelete
  2. Jann
    Thank you! I hope this helps you, and nice day for you too. :)

    ReplyDelete
  3. Hello~
    I have an award for you at my blog. Stop by and pick it up~

    SFC

    ReplyDelete
  4. Kelly
    Thank you so much, I'm so proud of the award. I will come and pick it later!

    ReplyDelete
  5. Mä en löytäny koodista kohtaa mihin laittaa tuo kohta 3.

    ReplyDelete
  6. Nyt löyty, ainut että ihan kuin joku olisi väärin, kun ei anna vasemmalle puolelle lisätä gadgettia.

    ReplyDelete
  7. Satu
    Se gadgetin lisaaminen siihen saattaa tuntu aluksi hiukan hankalalta, mutta kylla se siihen napsahtaa, kunhan laittaa sen oikeaan kohtaan. Ehka pitais muuttaa tota koodia niin, etta sinne vasemmalle menee jo yksi gadgetti valmiiksi, niin silloin se on helpompaa. Mutta en jaksa sita nyt alkaa muuttamaan, ja sahan saitkin jo kaiken toimimaan.

    ReplyDelete
  8. thank you SO much for explaining this. I have been trying to figure this out on my own and failed miserably. I will go to my blog and see if I can change it to 3 column.
    Thanks again!!

    ReplyDelete
  9. Hi Cathy
    Actually, this is quite simple, but many instructions make it look like more complicated. I tried make this as simple as possible. :)

    ReplyDelete
  10. I did it! I did it! it works. Great instructions. Now I have a whole nother column to fill!

    Thank you for this little tutorial.

    Emily

    ReplyDelete
  11. Emily
    WOW! It's so nice to hear, that it works! I tried to make it as simple as possible, so I could also use it my self. ;)

    ReplyDelete
  12. OMG!! thank you so much for this tutorial I did it!!!!!!!! and it was so easy now I have a 3 column blog yupeeeee
    Thank you again..
    Ledesma

    ReplyDelete
  13. Ledesma
    I'm always so happy to hear that! :)

    ReplyDelete
  14. ITemplatez.com offers professional web templates, flash templates ,swish templates, dreamweaver templates, and other web design productsavailable for immediate download.

    ReplyDelete
  15. Hei, tuhannet kiitokset tutoriaalista! Lisäsin kolmannen kolumnin blogiini, ja kunhan saan aikaiseksi niin varmaan muutakin muutosta ilmeeseen tulossa :)

    ReplyDelete