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.

111 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
  16. Awesome!!! I've been wanting a 3 column blog forever!! Thank you thank you!!
    :)

    -breezy
    THE PINK DOOR

    ReplyDelete
  17. You are my Heroine for the day! Thank you so much for explaining this. I am so very happy right now.
    Yvonne

    ReplyDelete
  18. Jutta
    Tosi kiva, etta onnistuit, eihan se tosiaan ole kovinkaan vaikeaa. Mielenkiintoista nahda millainen blogistasi tulee. :)

    Pink Door
    I'm so happy to hear that. :)


    Yvonne
    Thank you, and it's not so diffucult after all. :)

    ReplyDelete
  19. Thanks for that 3 column tutorial,
    I tried that for hours with another "explanation" and that didn´t work at all.
    Yours is fantastic, easy to do and it works great! I just played with the "width" to fit it into your fantasic pink angel background ;)

    Now I´m ready to look for what I came back to your blog: a blinkie to grab and link on my blog!

    Have a nice day
    Susanne

    ReplyDelete
  20. Susanne
    I had also difficulties, when I tried some tutorials, but then I checked them carefully, and I noticed, that it's really simple thing, but only explained too complicated.

    ReplyDelete
  21. Thank you. Very simple to follow. I have used it for my new blog http://sharingourgifts.blogspot.com.

    ReplyDelete
  22. Sinclair
    After all, it's really simple, but many instructions just make it look complicated, I have to make instructions simple, that I understand my self. :)

    ReplyDelete
  23. Hello,

    Love your work and design!

    By the way I have tried to email you but for some reason the email listed on your blogger id doesn't work. Can you pease email me? I have a design question that I wanted to ask you vania@fantasywhispers.com

    Thank you,
    Vania

    ReplyDelete
  24. Thx for ur tutorial...u made it so simple for me...thx so much!! ^.^

    ReplyDelete
  25. OMG!! THANK YOU!!! I've been wondering how on earth to do this :) your explanation are better than the other one.... i'm confused.. :P

    ReplyDelete
  26. Thanks so much! I love my blog with 3 columns! One question... I want to add a collage of pictures I made to my header... but now at 880px, it is HUGE! Do you have any tips on how to shrink that up a bit?
    I am at
    http://stephaniemariem.blogspot.com/

    Thanks and love your blog!

    ReplyDelete
  27. +ryaN @ DuR!@n +3mPur@
    Thank you, and it's really amazing easy. I'm happy you succeeded.

    Stephanie
    I peeked to your blog, and I think your header is fine, not too big. If you shrink the banner, it comes also narrower, and I don't know if that would look good. I think you have to make the header completely new, if you want to get it smaller.

    ReplyDelete
  28. Oh yes I see what you mean. You are right, it looks silly narrower. and it cuts off some of the image. I guess I was thinking more about the height being smaller. it seems so huge- oh well thanks a million for the tips!

    ReplyDelete
  29. Thank you so much-I have tried for weeks to figure this code out!!!! LOVE your templates-♥

    ReplyDelete
  30. Hello! Is there some what you can make a blog 3 columns and then make two of the columns joined to make one big column and one regular sized? Or can we learn how to make one column big and one regular size so that our photos can be larger? Crazy question, right? Thanks.
    ~silly sal

    ReplyDelete
  31. Silly Sal

    You can change the width of the columns, like you can make the main column wider, put the photos won't be larger. If you want to add larger photos, you must first upload the photos to a photo host and then add the link of the image.

    It's little bit complicated to explain shortly, I will make a post about this asap.

    ReplyDelete
  32. Perfect!!!! Thank you.
    You are truly amazing in your art and your generousity.

    ReplyDelete
  33. hi itkupilli!!!
    Firstly thanks for ur kindness to share lots of things with us..
    u are such the best artist.. Keep up the good work!!!

    ReplyDelete
  34. Your blog is wonderful. I love to come & visit.

    Thank You ♥ I have just plucked up the courage to go to 3 columns! Your instructions are brilliant & worked perfectly.xx

    Good Luck with all your creations. Gez.xx

    ReplyDelete
  35. Thankyou so much, that was exactly what I was looking for. You are very generous to help out!!
    All the best,
    M

    ReplyDelete
  36. THANK YOU! The instructions were very easy to understand.

    ReplyDelete
  37. I have a question....do you do the changing BEFORE you change the background or do the background first? Thanks

    ReplyDelete
  38. HerArtNest
    The background has no effect to your blog template, so it doesn't matter when you do it, before or later. :)

    ReplyDelete
  39. Thanks for the great template. I'm trying change but can't find header wrapper, etc in my html view and edit. Obviously nobody else had the same problem, I'm using the Scribe template. thks.

    ReplyDelete
  40. hi! i like the designs. check out the source of the template.
    Thank you! i love it.
    More templates easy to download

    ReplyDelete
  41. you are the best!! thank you so much!!!

    ReplyDelete
  42. Thank you so much, I have my beloved 3 column layout back, having lost it a while ago. Now to download one of your delicious backgrounds...

    ReplyDelete
  43. Thank you so much! It really wasn't that hard at all. Your instructions are very easy to follow. Your work is so beautiful. I love my new-look blog now! I like that you are Finnish. I'm Australian but my grandfather was Finnish.
    Thanks again!

    ReplyDelete
  44. I stumbled upon this blog today and helped me no end. Thank you so much.

    ReplyDelete
  45. Thank you so much, it was great to do it all on my own (with your help) you rock!

    ReplyDelete
  46. WOW I can not thank you enough! I have been searching for months trying to turn my blog into a 3 column! THANK YOU SO MUCH!!!!!

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

    ReplyDelete
  48. thanks so much...
    I have been so afraid to try this ..so much work into the blog and just plain afraid.. this was so easy I can't believe I waited..
    mona & the girls

    ReplyDelete
  49. great tutorial! i tried with someone else's just before this and got frustrated because it didn't work.

    your's was super easy and it worked. so, thanks!

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

    ReplyDelete
  51. You are awesome! I searched all day yesterday trying to find a user friendly way to change to three-column! Yours worked the first time! Thank you!

    ReplyDelete
  52. Thank you!!! I've been trying to do this FOREVER, everywhere else I found had unclear steps.

    ~~Silverstar

    ReplyDelete
  53. Thank you! Thank you! Thank you!!

    ReplyDelete
  54. That was the easiest tutorial I found on the web, thanks so much!

    ReplyDelete
  55. Cool blog you got here. It would be great to read something more about this topic. Thank you for posting that info.
    Sexy Lady
    English escort

    ReplyDelete
  56. I tried 3 other explanations for this and they didn't work. Thank you for making it so simple nd easy to understand!!

    ReplyDelete
  57. Itkupilli, your generosity is amazing and so are your blog backgrounds and tutorials. Somehow it all seems so easy when you explain it - and it works, too:)

    I'm trying the 3 column Minima out in a blog I haven't gone public with yet and it looks good. Two points of interest: I've come to the conclusion that if you want to use the default Blogger blog description (in the header), you have to also change the value for that - to 880px - or else it won't stay centered. But that's not a problem - just change the max width property in the header description.

    The other thing is, my layout (on the dashboard) suddenly looks a bit weird and it sort of makes me nervous...! I'm not sure when it happened but it was either when I installed the third column as described in this post or when I added page elements for a menubar et cetera, as described in another one of your tutorial posts. Here's a screenshot of what it looks like now: ooops!

    The actual blog still looks okay in Firefox and IE but the sight of the layout template all askew makes me wonder if perhaps it will look odd in some browsers once I make the blog public. Any reassurement would be welcome:)

    ReplyDelete
  58. Oh, I should say I don't expect anyone to reassure me it looks fine in their browser - that would be a bit hard to do, as I haven't published the blog yet:) What I meant was that perhaps there's somebody out there who has encountered the same "behaviour" and has already come to the conclusion that it really isn't a problem...?

    ReplyDelete
  59. Thank you so much for all your help

    ReplyDelete
  60. THANKYOU your tutorial was great and I did it! my bloodpressure was a bit elevated while doing it but it worked!

    ReplyDelete
  61. Thank you for your beautiful templates and for your help.

    ReplyDelete
  62. thank you for this great tutorial - it works ; o)) and also many thanks for your blogs they are fantastic.

    have a nice day

    Mela

    ReplyDelete
  63. Thanks so much for your help, I have been looking for straight forward easy instructions to change my blog to 3 coloumn. Your blog and tutorials are fabulous. thanks so much.
    hugs Jodie from Oz

    ReplyDelete
  64. Thank you:) I love your page, it's so helpful and beautiful.

    ReplyDelete
  65. I'm glad I could help you! Thank you all for the comments! :)

    ReplyDelete
  66. Thanks so much This was very easy to do. You're awesome!

    ReplyDelete
  67. Bettie,
    I'm glad I could help! :)

    ReplyDelete
  68. thank so much for explaining this, i have been tryibg for ages to do it and now i finily got it ;)

    ReplyDelete
  69. thank you so so much! your instructions are so clear and so easy to follow! and now mandy proof!!! cos I got it to work first time around!

    {{hugs}}mandyxx

    ReplyDelete
  70. Mandy,
    thank you! I'm glad I was able to help! :))

    ReplyDelete
  71. Your instructions were wonderfully easy to follow, but I ended up with my posts on the far right and two narrow columns side-by-side on the left! What did I do wrong?

    ReplyDelete
  72. Thank you so much...at first I got it wrong, then I started over again and found the error, (it was a miracle for my dummy knowledge), corrected it, and now it is so cool. So thanks again :D

    ReplyDelete
  73. Thank you. What an awesome tut. Love your backgrounds too.

    ReplyDelete
  74. Nadja,
    I can fix it for you, if you click on the link above :))

    Petie moi
    and
    Sandra,

    you're both very welcome! :))

    ReplyDelete
  75. Thank you so much for your easier to understand instructions for changing my blog to 3 columns. I'm pretty sure it worked but I don't understand the part about the buttons being added to make it look like 3 columns. Could you explain?

    Thank you!
    Missy
    One Blessed Mommie
    Chateau Chic Boutique

    ReplyDelete
  76. Thank you so much!
    It worked perfect...

    ReplyDelete
  77. Could you explain why my posts are still to the left? and how do make it more narrow?

    LJ

    ReplyDelete
  78. thank you so so so much!!!!!! not only i adore your art, but also this was the one & only tutorial about the 3 columns that i actually understood!!! my & my blog can't thank you enough!!!!!

    ReplyDelete
  79. i've added it and i did everything that you said, but i can't figure out how to access the lefthand sidebar. :/

    ReplyDelete
  80. Did it on the first try! Thank you so much for the great and clear instructions. I love your work! It is so kind of you to share.

    ReplyDelete
  81. Thank you for this great tute. It worked perfectly for me!! Your blog is fabulous!

    ReplyDelete
  82. Ah ha! I did it! Now I just need to add things to my new sidebar thank you so much! xoxo

    ReplyDelete
  83. i manage to do it.
    but how do i want to move or add some gadgets to the left side?

    ReplyDelete
  84. I saved the $10 and I now have 3 columns. Is the post really not in the middle? I can live with that! Although I expected the post to be in the middle! Thank you very much! You're super wonderful! Patsy from
    HeARTworks

    ReplyDelete
  85. hello, my blog 3 column, does not appear. I do everything you told me, but nothing happens. Why?

    ReplyDelete
  86. Gioupiiii!!!!it s o.k.
    thank you very much.

    ReplyDelete
  87. Since 1992, his Christian Louboutin Sale designs have incorporated the shiny, red-lacquered soles that have become his signature. On March 27, 2007, Christian Louboutin Pumps filed an application for U.S. trademark protection of this red sole Christian Louboutin Sandals design Christian Louboutin Boots helped bring stilettos back into fashion in the 1990s and 2000s.
    From Coach Wallets Soho straw tote to the Coach Bonnie black patent leather straw tote, Coach Ergo has an selection of ways to offer straw an exquisite look. If you are going for a summer seashore trip, the Coach Hamptons large straw basket may make the great selection.
    Christian Audigier comes across as an impressive christian audigier with mesmerizing achievements under hardy shirts belt. He is best known for hardy shirt accomplishments at Von Dutch, both with designing and off beat marketing techniques. This is what he tried successfully when he joined hardy shirts followed by all his enterprises.

    ReplyDelete
  88. Since 1992, his Christian Louboutin Sale designs have incorporated the shiny, red-lacquered soles that have become his signature. On March 27, 2007, Christian Louboutin Pumps filed an application for U.S. trademark protection of this red sole Christian Louboutin Sandals design Christian Louboutin Boots helped bring stilettos back into fashion in the 1990s and 2000s.
    From Coach Wallets Soho straw tote to the Coach Bonnie black patent leather straw tote, Coach Ergo has an selection of ways to offer straw an exquisite look. If you are going for a summer seashore trip, the Coach Hamptons large straw basket may make the great selection.
    Christian Audigier comes across as an impressive christian audigier with mesmerizing achievements under hardy shirts belt. He is best known for hardy shirt accomplishments at Von Dutch, both with designing and off beat marketing techniques. This is what he tried successfully when he joined hardy shirts followed by all his enterprises.

    ReplyDelete
  89. why i cant do it?my post still at left side how i change to middle?

    ReplyDelete
  90. I followed your instructions and the page looks fine with the tree colums but when attempting new things blogger won't allow me to edit. I shows everything on the left side when the actual page shows everything in the center and on the right. I guess I'll put my old template back on as this didn't work out at all.

    ReplyDelete
  91. I have referred back to this post many times. I keep changing things up and have to come back and read the instructions all over again. Thank you so much for this helpful tutorial!

    ReplyDelete
  92. Thanks for this info. Right now I will apply this to my blog because I always had wanted to see it in tree columns. Buy Viagra Viagra

    ReplyDelete
  93. Thanks for sharing this information with us. I will apply these tips in my blog in order to use this interesting layout. Nice blog.

    ReplyDelete
  94. pretty cool post, will share your blog and subscribe to feed piff

    ReplyDelete
  95. OMG!You helped me so much <3 Thanks!

    ReplyDelete
  96. worked like a CHARM! Now I can use ur layout & have my 3 columns!
    U ROCK THE HOUSE BABY!

    ReplyDelete
  97. Great perform. And remarkable variety of instruments to work... Fantastic!!
    Diablo 3 Items



    Guild wars 2 CD KEY

    ReplyDelete
  98. Republikaner obstructionism wird Demokratischen Erfolg. Nicht nur wird die Steuer erhöht viel größer als alles, was sie verhandelten, die Ausgabenkürzungen beinhalten erhebliche Kürzungen im Verteidigungshaushalt.

    Eine demokratische und das amerikanische Volk win-win.christian louboutin schuhe

    ReplyDelete
  99. Well done girls, I've runescape gold often wondered where all rs gold this newfangled blogging would get you buy runescape gold and there you Aion Kinah Kaufen are, large as wow gold life (well larger than postage stamp size anyway) on the front page of The Times. Congratulations on being cheap runescape gold their best blog for family cooking.

    He was
    hurt in the first GW2 Gold quarter of Tuesdays win over thee
    Philadelphia 76ers.

    ReplyDelete
  100. Such a nice post, We loved it a great deal!I am a china tour lover,You can learn more: China vacation packages | China city tours | China Travel Agency

    ReplyDelete
  101. You Can't Learn Less. We can only cheap d3 gold add to our knowledge. We don't have to give some d3 gold buy of it up in exchange for new knowledge. Our ability Diablo 3 Gold to absorb and retain knowledge may just be unlimited.

    ReplyDelete
  102. Clarity Leads to Power. When we're clear, we're more Diablo 3 Gold effective. Our clarity reduces our mistakes Diablo 3 Gold and enables us to enlist the help of others. We are Diablo 3 Items more powerful when we are clear, and we are weaker when we are confused.

    ReplyDelete