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.
Subscribe to:
Post Comments
(
Atom
)
thank you for explaining this
ReplyDeletethank you for your kindness
I love your blogs, backgrounds
and art work....have a beautiful day !
Jann
ReplyDeleteThank you! I hope this helps you, and nice day for you too. :)
Hello~
ReplyDeleteI have an award for you at my blog. Stop by and pick it up~
SFC
Kelly
ReplyDeleteThank you so much, I'm so proud of the award. I will come and pick it later!
Mä en löytäny koodista kohtaa mihin laittaa tuo kohta 3.
ReplyDeleteNyt löyty, ainut että ihan kuin joku olisi väärin, kun ei anna vasemmalle puolelle lisätä gadgettia.
ReplyDeleteSatu
ReplyDeleteSe 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.
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.
ReplyDeleteThanks again!!
Hi Cathy
ReplyDeleteActually, this is quite simple, but many instructions make it look like more complicated. I tried make this as simple as possible. :)
I did it! I did it! it works. Great instructions. Now I have a whole nother column to fill!
ReplyDeleteThank you for this little tutorial.
Emily
Emily
ReplyDeleteWOW! 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. ;)
OMG!! thank you so much for this tutorial I did it!!!!!!!! and it was so easy now I have a 3 column blog yupeeeee
ReplyDeleteThank you again..
Ledesma
Ledesma
ReplyDeleteI'm always so happy to hear that! :)