src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
The Minima template is the easiest Blogger template to customise, as this is the simplest two column template, and has few parameters regarding margins, padding and the like. Once you have developed the third column, it will then be easier to alter font-size, colours and such so leave this until later on. We're going to concentrate on the actual layout first.
First of all, set your template to Minima (not the stretch template, but any colour will do!), then follow these instructions:
- Go to Template>Edit HTML, leaving the "Expand widget templates" box unchecked.
- Now, find this section in the HTML code:
#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 */
}
Copy this entire section, and paste it directly below. We're going to change the elements I've highlighted in red to the following:#left-sidebar-wrapper (this makes the css for this section unique)
float: left (this will make the new sidebar float to the left of the main column)
This will provide the styling for the new sidebar element which we will create next. - Now, you need to find this section further down the page:
<div id='main-wrapper'>
.
Immedietly before this section, you should paste the following piece of code:<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>
Let me explain the elements of this code to help you understand what we've just done:- <div id='left-sidebar-wrapper'> This section tells the browser that the left-sidebar element exists here, and to look in the css for the appropriate styling for this element.
- <b:section class='sidebar' id='left-sidebar' preferred='yes'> This tells the browser the class of the sidebar element and all other elements (widgets) which may be included in this section. The ID of this element must be "left-sidebar" in order to make it unique, otherwie this would cause problems when viewing. It is preferred so that it will feature in the layout, even if no widgets are placed within it.
- 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 accomodate one sidebar. So now we need to expand the oputer wrapper to accomodate this new sidebar.
Find this section in the HTML code:/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px. - You may also want to change the width of the header-wrapper to 880px so that it spans the new width of your blog:
#header-wrapper {
width:880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
} - At this point, you should save your template. At present, your new sidebar will not be seen 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 Template>Page elements in your Blogger dashboard.
- Your layouts section should now look something like this:
You can now add a page element (or two) to your new left sidebar. - But we aren't quite finished yet! If you add anything to this left sidebar, you will probably notice that it jams right up to the main section, like this:
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 hand side of the main posts section. Find the following code in your template's HTML and add the code defined in red:#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 thw width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accomodate 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, your previewed template should look more like this: - Finally, save your template and enjoy your new sidebar!
The same principles described here can help you create a three column template from any Blogger template, though you may find that you'll need to adjust the width, margins and padding for your new sidebar in order for it to look the way you would like.
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.
Here is a download of the three column Minima template for reference (or if you prefer to use a preconfigured template instead!):
Download 3 column Minima template
For more Blogger templates to download, please have a look through the Templates section here at Blogger Buster.
Technorati Tags: blogger | 3+column | template | templates | download
86 comments:
How to make 3 column footer ?
Hi Amanda!
I was trying to make a 3 column blog and was using the Minima Dark template, when you say on step one to copy and paste the sidebar wrapper part directly below, where directly below? I tried to do that and it widened what I already had but did not give me 3 columns and then somehow it would not let me save anything and I tried to get back what I had and got something else and had to pick the Minima again and when I went back to edit it I couldnt even find the same sidebar wrapper info to cut and paste!! I wish you were here :D
Thank you for this how-to post...it helped me so much, and made it very easy for me to add another column to my blog! I wanted to let you know I added you to my list of blogs to follow, because you helped out a bunch.
aaa, your post hepled me save my blog - i tried to customise a 2 column minima into 3 using another tutorial and i totally blew it ...and i cant understand why my first template (saved before teh 'adventure') uploaded back my blog....so i used your advice to mend back the damaged code....well, it's working know, and i have 3 columns!!! thanks
I seem to get 3 columns, but they are in the wrong order. Can you tell me how to get the blog story into the middle?
simple. to the point. nice!
Please help me!!! I wan`t blog with 3 columns but I`am not master for that! http://sandraskanderlic.blogspot.com
Easy to follow! Thanks. ;)
Niiiice! To all those who don't get it, pay close attention to what you are doing. It makes sense. If you can't get it, then you probably need to forget it, and get someone to help you in rl.
You ROCK!!! Thank you!!! It worked out so good...I learned something new tonight and am loving it.
Excellent!
I changed my blog to 3 columns months ago but somehow didn't have the coding to put space between the new column & the main column. it looks so much better now!
orsom, thankyou
Awesome!!!
It perfectly worked for me
Thanks a lot
Thanx 4 this...
Wow - fabulous. I have absolutely zero experience, but found this super-easy. Proud result here: http://www.annaclare.com.au
Thanks!
i've created a 3-column blog using your instruction (rounders template).thnx. but the problem is...i don't know how to put the background color to my left-side bar.the border is not defined.the texts cannot be seen clearly. pls advise. thnx again
Thanks a lot for the tutorial, It works well, easy to do, great blog you have for bloggers, super !
thank you so much!
I found this article very useful! Is it possible to create 3 columns by using rounders template Thank you for writing this!!!
Is there any way to modify minima to have both sidebars on the right?
Hello again,
I figured it out thanks to your very clear instructions and explanations in this post. Instead of looking for div id='main-wrapper, look for div id='sidebar-wrapper'
Thanks so much :-)
Amanda, thanks so much! This is really awsome! Just what i was looking for! Please, see the result:
http://musicismylife-divasandotherbeings.blogspot.com/
Until now, it seems i only have to readjust the size of the banner, no?
Thank you! This was great and super easy to follow and I am a computer dummy. HOWEVER, now for some reason my labels are not visible. According to blogger help, this may be due to my altering the html?? Any clues on how to fix it????
did u no that your link to the minima is broken? please fix it, thanks...
Thank you very much for this tutorial. I spent a lot of time looking for a three column template.
Finally one that worked thanks!
Thanks so much. Your directions were so easy to follow. I tried the instructions on some other sites. Yours was by far the best!
Amanda,
As everyone has said, this is a great tutorial. I have had one problem, though, since I set up the three-column format: now when I post a post-link to Facebook, instead of grabbing text and images from the post, Facebook grabs them from the sidebar. I'm guessing there must be some bit of code that prevents this. Can you help?
heaveninmyfoot.blogspot.com
Thanks!
dear amanda, I CAN'T MAKE A 3-COLUMN TEMPLATE WITH MINIMA :'(
#sidebar-wrapper {
width: 220px;
float: >>>>>$startSide;<<<<<<< THERE'S NO RIGHT OR LEFT. THERE'S ONLY $startSide
what should i do?
thanks a bunch! ♥
huhu...i dont know how to do tht.. can everyone teach me how to do that personaly.. dis my email..lya_dayana@ymail.com
Thanks so much for this tutorial. I was looking everywhere for an easy to follow tutorial for a 3-column layout.
My question is that on the Arrange Elements page, the right column moved all the way down even though on the actual blog, it looks correct.
it very helping me..thanks.. I want to decorate my friendster too., cant anyone tell me how? hehehe...
Thanks a lot. Now http://justshare-ofmine.blogspot.com has 3 columns layout.
Thank you so much for these tips! Super easy and helpful!!
wow. thanks for this. very helpful...
i am looking for a 3 column left side dark marble template because i can't 3 column the template plz help
I posted a comment/question some time ago, but it has never shown up. Did you get it?
I was able to create my three columns. However, I am still having some spacing issues between the newly created left column and the main column.
http://marilyn-caribbean-cakes.blogspot.com/
I finally got the layout I wanted. Thank you. Thank you. Thank you.
I tweaked mine and floated right.
http://marilyn-caribbean-cakes.blogspot.com/
o thank u thank u thank u thank u so much...
i had so much on my right side colum and i wanted to use the left side space for so long.. i was trying to change my template to a 3 colum one... but all my java script widgets werent being displayed ...
i havnt tried it yet... but will definately try it tonight.. thank u sooo much :)
o thank u thank u thank u thank u so much...
i had so much on my right side colum and i wanted to use the left side space for so long.. i was trying to change my template to a 3 colum one... but all my java script widgets werent being displayed ...
i havnt tried it yet... but will definately try it tonight.. thank u sooo much :)
hello
great.. and useful..
cheers!
i like this information and thanks..
Thank you very much. It worked!!!
hi! thanx a lot...almost seemed to work, i had to experiment on a different blog to begin with....the original widgets got pushed all the way down to the right bottom corner!! plus the new widget wrapper on the left has pushed the title off centre... and both of them clash. cud u plz help me out? its not even this blog that needs the editing, but i m tryin to figure out how to apply the same tactics in other formats. thanx!!
thanks a lot for the easy explanation. it works well. cheers!
hey thanks. now it seems i am an expert blogger.hehehe my updated blog.
Organic baby foodthanks again,
hey thanks. this is really a great source.
check my updated blog if you have time.it looks like i am now an expert blogger. :-)
Organic baby foodthanks again to you.
Want to advertise for a cheap price.Visit www.tips4blogging.co.cc to advertise for a cheap price of $2/month
The price is unbeatable
This was a God-send. Thank you so much
thanks Amanda for this usefull tutorial...
Hi Amanda, just tried this. 1. wondering if I can create this from my current blog instead of having to switch everything over and 2. if not, then I set up a test blog...seems that it all is just stretched across my page...if you have time, could you check it out? Here's a link to my test blog HTML page and the actual test blog...thanks so much!
BLOG:
http://testbloghouse.blogspot.com/
HTML:
http://www.blogger.com/html?blogID=3155262427536661490
This is an awesome tutorial. It was so simple and easy to do. I knew nothing about blogs, in terms of formatting and used it, quite to my satisfaction to customize my blog. I also found your tutorial on changing colors of the blog very helpful. Thanks a million!!
Thanks so much! I learned a lot. :)
nice! i just edit my blog. Perfect tutorial!
This was really awesum tutorial. will try creating one.. :)
consider visiting mine @ TheMillionDreams.Blogspot.Com
i keep fail to make 3 column...why? i follow all what u say...
Thanx great info
thx! really helped!! :) :)
I successfully turned my 2-column into a 3 one, with your help!!! Thank you so much! And it was fun- I followed your instructions step by step and I saw all the changes! Amazing!
Hello Amanda
I was hoping that you would be able to help me. I finally got my 3 column to work out as i wanted (except the fact that i can't get the right and left column to seperate from the main post wrapper.Do you know the fix for this? I tried playing with the numbers but then the right sidebar will go under the main post wrapper rather than along side it. But my major problem is that in IE and in AOL my template looks fine but in Firefox my template is all off!! Way off. The left (new) column is in the center of the page the main part is all the way down and widgets are across the page on top of this! Any idea on a fix? http://coocoo4coupons.blogspot.com/
Sherry71481@gmail.com
Thank you in advance for any help you can give!!!
Thanks, that was a great one. I have modified on my current blog and it's impressive. No need to consider wordpress again :-)
http://andyrottenideas.blogspot.com/
Amanda - Your instructions have been perfect. This is the first time I'm able to create the 3 columns without getting multiple errors.
A couple of questions about how my blog turned out http://sometimeslucid.blogspot.com/
1) The body of the blog seems to be bleeding in to the right hand side.
2) My labels go from the right margin to the left margin when the body of my blog ends. How do I fix that?
Thank you so much!!!
can u pls help me see my blog why cant make side bar to left or right?
This is great stuff, I've tried a couple of other ways with no luck and much frustration and your way worked easily the first time...very well explained and with illustrations (GREAT!)
I now want to move the main column to the center of my blog, how would I do that? HELP!
btw I'm following your blog, its great.
thank you so much, i finally got my 3rd colum
it was quite easy to understand also, thanks for your help :D
This was VERY helpful information and easy to follow. thank you!
Hey Amanda! I know this is an old tutorial of yours but any help would be greatly appreciated. Keep in mind I am not any good at this sort of thing but I followed your instructions (I think) and now have a main column on the far left and two columns on the right although the far right one is not active on my page layouts page...I can't add widgets. Help??????
Thanks,
Jenifer
www.jmparris.blogspot.com
this is fantastic!
wonderfully easy for beginners like me!
thanks a lot (:
Thank-you for incredibly user-friendly instructions...that work. I am thrilled with my "new-look" blogs.
Thanks so much for the tutorial. I've just changed my template to a three-column template. Thanks. It was a breeze.
umm, mine didn't work.
maybe i did something wrong along the way,
but i got a huge space now on the rightside.
HELP PLEASE!
I uses this ( and its great info), everything is fine except my header will not show up in the three coloum, I have uploaded my pic and is still has the text header, nothing I do changes it...is there something I need to fix?
Thank you. The instructions were clear and simple. Thanks for taking the time to post these hints. This was extremely helpful.
i can't download the template and the link to other templates is broken. please help
Can you tell me what i have done to my layout? I followed everything but for some reason all my widgets went to the bottom! HELP!!
http://lindseylyman.blogspot.com/
Gosh! This is one of the best, easiest, most effective, to the point tutorial I ever found. Thank you very much. It works real well.
Please help me!
I tried to do the changes to create a third column but I failed, I just don´tknow what to change in my HTML, because when I try it says to me tha´t it´s not possible..
Please help me!
Thanks heaps for this tutorial. It work a treat! Cheers
M*
Great work!
Now I`m finally satisfied with my blog!
At least for a few days I will...
;-)
Thanks for a very helpful tutorial. It really helped me with my new blog. It is easy to follow and simple to understand.
Thanks!
Amanda, I tried to follow your tutorial but for some absurd reason, the entire sidebar continues to come under my main section! Please help!
Hi there, I created a three column layout but now my header image is too small so I created a new one that is 880px wide and uploaded it but it still stays at the same small size - is it possible to get it to fill the whole header box?
Ok, I THINK I followed you closely, but I only have right column and there is no left. Can you help me? I am sooooo illiterate tech wise
THANKS!
j
hello there, I would like to thank you for creating this tutorial, it really helped me make a nicer lay-out. I took the liberty of referring your blog's entry in one of my recent entries: http://ogsessed.blogspot.com/2009/09/day-of-lay-outing.html
thank you, and more power to you :)
- Ogs
hey! thx so much! it do work! i soon can have a 3 column blog now!
Post a Comment