Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Feb 9, 2007

Digg This Story

Three Columns Minima Template

The typical new Blogger Minima Template has only one sidebar. We can add a third column to the left, to have two sidebars. This maximizes the space, and allows greater flexibility in adding page elements to the sidebar.

Note that this guide is for those who want to convert their Minima template into a three column template by adding another sidebar. In our Rounders Template article, we have explained why the Rounders, Scribe, No. 897 or other templates are different and how the background images should be changed in order to cater to the new layout. We shall try to create new test blogs under different templates and post the tutorials once we have converted them into three column templates.

In the meantime, if you are using other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Rounders Template;
4. Three Columns Rounders 2 Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Scroll to the part where you see this:-

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

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

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


The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrapper – referring to the main Blog Posts
#sidebar-wrapper – referring to the right sidebar.

To add another sidebar, copy the part highlighted in red and paste it immediately after that, but rename the “#sidebar-wrapper” to “#newsidebar-wrapper”.

Next, adjust the width settings of all the wrappers. For this example, I used what is commonly used by many people i.e., 750px for outer-wrapper, 400px for main-wrapper, and 150px for sidebar-wrapper. You can of course change these values, so long as the total widths of both sidebar-wrappers and the main-wrapper do not exceed the width of the outer-wrapper.

Also, fix the left margin of the main wrapper but allow the newsidebar to float to the left, leaving the original sidebar on the right.

Your template should now read something like this:-

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

#main-wrapper {
width: 400px;
margin-left: 25px;
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 */
}

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

#newsidebar-wrapper {
width: 150px;
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 */
}

Update:

We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines (shown in red):-

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}


Blog Posts in the Center

This sets the style sheet for the template. We will now need to add a section in the body of the template. Scroll to somewhere near the bottom of the script where you see this.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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


Add the portion in red above the div id='main wrapper'. The segment should look something like this:-

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

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


The code will give you a newsidebar on the left, main post in the middle, and leave the current sidebar on the right, just like what you see in this Blog.

Blog Posts on the Left

If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion in red below the div id='main wrapper'. It will look like this:-

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

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


Change Width of Header and Footer

One more thing. If you have a wider layout, you may also want to lengthen the width of your Header and Footer. Go to the part of your template that says this:-

#header-wrapper {
width:660px;


and

#footer {
width:660px;


You can change the number in red. In this example, I may want to widen it to the same width as that of the outer-wrapper. I will therefore change the above codes to this:-

#header-wrapper {
width:750px;


and

#footer {
width:750px;


You may click “Preview” to see the new layout, and if you are happy with what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. You have now three columns in your layout!

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

Note:

If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

396 comments:

MarketMania said...

Hi,

Thanks for the cool info. I've been trying to change my blogs to 3 column blogs for a while now, and each time I tried I just got error messages. Your info. actually worked ! So I now have a whizzy 3 column blog http://firsteditionbooks.blogspot.com/
which I shall now fill up with info. on collecting books, I shall also be changing my other blogs ! Many thanks for the info. Have yo got any info. abot how to encourage visitors to drop by ?

Janie Hickok Siess, Esq. said...

I'm hoping you can help me!

I used the same basic hack to convert my rounders template to 3 columns.

The problem is that I can't find the blog where I originally found the hack.

Worse, the gentleman there did not want the rounders sidebars, so he had a step by step guide instructing where to remove the link to the rounder image.

I didn't really want to do that, but figured it out too late. So now I have the rounder column on the right side of the page and not on the left. I'm sure it is something simple that I just don't understand about CSS. But I've tried and tried to figure it out and I can't.

Can you tell me how to put the column back on the left side? It would be wonderful if you could e-mail the answer to me at jhsesq@comcast.net.

THANKS!

bizwhiz said...

Hi Marketmania. I have seen your blogs. Nice. Will post an article as you have suggested soon.

Hi Janie. I have sent you an email with suggestions on how you can switch the left and right sidebars in your template. If you have further problems, feel free to drop me a mail.

Cheers!

JennyMcB said...

You are the best!! I have a link to your blog now. I so wanted the three columns. Now I am going to put my imagge in the header tonight! Thank you.

T Struck said...

Many thanks. I'm not an HTML expert and have tried several times to convert my template to 3-column. Your instructions are perfect and now my blog is coming along ... next step is a custom header! With your instructions, my blog's format works for Explorer, Firefox, and Safari.

Thanks again,
T Struck
http://struckreviews.blogspot.com/

Bichara said...

thank you very much for these great services , but I don't know ,I had a disastrous result for the 3 columns: the original side bar got thinner and the main column got on the other side ,
I have undone the whole task of course.
visit me.
http://elimranisos.blogspot.com

bizwhiz said...

Hi Bichara

You are using the rounders template and not Minima template. In rounders, there are 2 wraps to the sidebar to include the top and bottom graphics to round the edges. If you could let me know I can contact you, I can email to you suggested change that you can try out on your template.

Bichara said...
This comment has been removed by the author.
Bichara said...

It's kind of you to reply so fast , I actually didn't notice you were talking about another kind of template, please e.mail to me the suggestions for my blog I'll be very greatful
my mail: elimranisos@yahoo.fr
But please treat me as a beginner !

Ashley & Byron said...

Thank you soooo much! I can't believe I actually edited html on my own! Your instructions were so clear and they were the first ones that actually worked. Thanks again!

Judy said...

Could you PLEASE help me too? Can I change the Scribe template to 3 columns? Thank you very much!
http://cellojudy.blogspot.com/

bizwhiz said...

Hi Judy

If you want to have the scribe template enlarged, you would have to create wider background pics as well. For example, you will see in your code images like bg_paper_top.jpg, bg_paper_bot.jpg and bg_paper_mid.jpg that together form the background of your template. Quite a fair bit of work for you to do.

Evy said...

Great and Thank you so much! I had tried for more than 50 times just to change my blog to 3 column blog, but failed. Accidently came in to your blog and found the way. Now I have my blog with 3 column ~> http://evyooi.blogspot.com.

@>-

Judy said...

Dear bizwhiz,

Thank you very much for your help. I did it! Feel free to give me more suggestons. www.chingfangwu.com

Cho said...

Please please...I have the denim template and I followed your instructions but it is a disaster. What do I need to do?

Thanks.

Mandy said...

Ok. I did it. But now when I go to add and arrange page elements in the blogger template tab, the easy buttons of Add A Page Element are no longer there. Do I have to code the rest of my blog now to set up my side bars? Because I'm clueless when it comes to code.

bizwhiz said...

Hi Cho

I have not experimented with your denim template but as I see the source code, it shouldn't be a problem adding a new sidebar. Did you ensure that the total of the widths of the 2 sidebars and main wrap does not exceed the content wrap? What exactly is the problem you face?

bizwhiz said...

Hi Mandy

I am able to see the Add Page Elements buttons in both Firefox and IE. Not sure as to why you can't see yours. But let me find out and I'll let you know. :)

Emma said...

Thanks heaps for this. This was the only explanation i could find that made sense to me.

The only thing that I cant figure out is how to remove the divider at the top of my first column ('Contributers' widget) so that all three column headings align properly. I'll keep playing...

bizwhiz said...

Hi Emma

Could it be that the Label Cloud is the title of your right widget whereas the Contributors are part of the contents (and not the title) of the left widget? If both are headings, they ought to be aligned.

MIKE said...

Hi,
I really like your tips. I was wondering if you could help me with something. I would like to put a little space in between my columns so that the back ground is seen between them. I am still working on it, but can't seem to get it.

Thanks,
Mike
#12 Ryan Newman Fan

bizwhiz said...

Hi Mike

If you scroll to your #content-wrapper setting, you will see a link to your current blue background image "backel1.jpg" This image, when repeated is the reason for your blue background. To split it such that you have a blue background for your sidebar and another one for your main wrapper, you may have to do up 2 new blue images. Delete this content-wrapper background. Insert the new images as backgrounds to your #sidebar-wrapper and your #main-wrapper. If you need to have wider margin, play with the margin widths to find an ideal width. Hope that helps.

Anonymous said...

Hi,
Thanks for this cool site. It is very very helpful for newbie like me.

I have one question...Is all the customization are applicable to BLOGGER 2?

Can I apply 3 colums blog etc in the BLOGGER2?

Thanks
Sandy

bizwhiz said...

Hello Sandy

You mean the new Blogger that just out of beta recently? Yes, this site you are seeing is on that new Blogger platform. :)

Enumerator said...

Great advice here on your site. I now have a three column blog,GenBIRes and lots of other bits and pieces to try out.

Thanks very much - as a result I have included this site on my links section on my blog.

Anonymous said...

Hi,
Thanks for the info.

But I am little confused.

The Blogger 2 (Beta) template has a different layout from Blogger 1.

I am using Blogger2 templates and I am not able find all the tags/wrapper given in the post. (Eg. for #header-wrapper, there is no width specified in current template?).

Am I missing something?

Thanks
Sandy

bizwhiz said...

Hello Sandy

Different templates may use different names. The one I used for this blog is the Minima template.

If you look at your code, you should see one with a width of 700 to 800 plus px. That is probably the overall width of your layout. You should also see a width for the main post which is probably about 400 to 500px and another smaller width for the sidebar.

If you let me know your blog address, I could take a look and identify the style tags for you. You could also follow the general guide above and drop me a note if you should face further problem. Cheers.

Anonymous said...

Hi BizWhiz,
Thank you very much for your reply. I really appreciate your help.

I am using "ROUNDERS-3" Template. My blog address is
japandarshan.blogspot.com

Thanks
Sandy

bizwhiz said...

Hi Sandy

There is more work to be done if yours is a rounders template. For example, if you look at the HTML, you will find a link to images corners_cap_top.gif and corners_cap_bot.gif in the header. These are what make the edges appear round. If you change the width, you will have to create new images and upload them onto a free server. Otherwise, you will find that the edges are either not round or only round on the left side for your header, main posts, or sidebars.

The width of your header is found at #header-wrapper, that of your main post is at #main-wrap1, and the sidebar is at #sidebar-wrap and #newsidebar-wrap.

You may have to adjust the width settings too to maintain proportionate spacing in between your sidebars and main post.

Style IT said...

Hi,

I'm using the Minima template, and I was hoping that the new column would be to the right of my blog posts. I have tried changing float: left; to float: right;. How do I get the sidebar to move to the right of the blog posts? I can be contacted at styleitonline@gmail.com.

Thanks so much!

bizwhiz said...

Hi Style IT

I have sent you an email. The example I gave was to have a new sidebar inserted on the left since the original sidebar that comes with Minima is on the right. If you look at your template, you will notice that both the sidebar and newsidebar float to the left. Please change one of it to the "right".

Your outer-wrapper is 750px which is exactly the total of main (400px) and 2 sidebars (350px). It will mean then that there is no margin in between the columns. Is that what you want? If it is not, you might want to either widen your outer-wrapper to 800px or any value that is greater than 750px.

Amanda said...

Thanks for all of your tutorials...I used your tips to make my blog three columns and to customize my header/banner. Your tips are the best I've found and I was able to make my blog what I've wanted it to be for the first time. Thanks!

Clive and Van's Mama said...

Help! My sidebar keeps moving down to the bottom of my page and I can't get it to stay where it's supposed to. Also, I have some weird marks below it that I can't get rid of. Do you have any suggestions? I love your site!

bizwhiz said...

Hi Clive and Van's Mama

Your template is a rounders template, and I don't think you have done anything to add a 3rd column or whatever. In fact it looks very much like the original rounders template. So I don't suppose your query is relating to this article.

The only change I can see on your template is perhaps a Navbar code at the top. Did you add that recently? You may want to remove that code to see if that is causing you the problem. If you would like to remove the Navbar, you may look at the article on this site on the way to do it.

Clive and Van's Mama said...

Thank you for attempting to help my poor blog. I have absolutely no clue what I'm doing. My friend referred me to your blog (which is so awesome!) and I messed around with a bunch of things last night. I was addicted for like 3 hours. Anyway, it's weird b/c I removed my header and the navbar (based on your instructions) and when I would preview my blog it would indeed be removed, but when I go to my blog now it's still there. I don't understand that. Also, about the sidebar. I did use a generic template from blogger and the sidebar used to fit nicely at top right side of my blog. Periodically, it will choose to move to the bottom underneath my postings and stay there. It's usually after I post a lot of pictures on my blog or something. This has happened a couple of times in the past and it occurs randomly, not after I change anything (b/c I've never attempted to change anything on my template until last night). I can't really figure out when/why it does this, but usually I end up having to change m template altogether to fix the problem. It's really annoying. If you have any additional suggestions I would really appreciate it. Thank you so much!!

bizwhiz said...

Hi Clive and Van's Mama

Before you change any part of your template, it is always good practice to save the current template in a text file.

I don't think there is any prob with your template because it looks like the standard rounders template. The alignment might be due to the insertion of a code before the head section.

The navbar code ought to be within the header section. Presently I think it is before the head. Please cut that. Next, scroll to the bottom where you see /head and paste the code before it.

Is your header removed? If it is only the green color background, you can delete the background color code for your header.

In my other blog, I have used the rounders template but had never had the problem of the sidebar going to the bottom as you have experienced. If you think it is the video or the pictures that pose a problem, could I suggest that you set the video widths correctly whenever you embed them. Look at the settings I wrote in an article on adding video to blog.

Would you like to try it and let me know how it goes? Take it a step at a time. You shouldn't need to change template altogether because your presently template seems to be the generic rounders template.

bizwhiz said...

Hi Clive and Van's Mama

I just had another look. When I viewed your blog's individual posts, the sidebar shows very well on the right. It is the case for posts with videos and posts with pictures. So that might not be the cause.

Under Settings -> Formatting, if you choose to show fewer posts on the main page, do you still see the same prob? It could be a prob with one of the posts, and we are just hoping to narrow down the prob.

Clive and Van's Mama said...

I am seriously so grateful to you for all this help! You have no idea. Ok, so I am having major trouble...when I do editing on my blog/posts and preview it, it looks how I want it. Then, when I actually go to "view blog" it looks completely different (color, size of things, header, footer, etc...). For instance, I have changed my colors to a teal and brown and I have removed my header altogether. Well, it looks how I want it in "preview" mode, but as soon as I go to "view blog" it looks like my old blog. I don't get it. AAAHHHH! I also changed the sizes of my videos after reading your section on how to do that and once again, in the preview section it looks perfect, but not when I go to "view blog". Can I just give you my password and have you look into it further? Thanks again for your time and advice!

bizwhiz said...

This comment has been removed by the author.

bizwhiz said...

Hi Clive and Van's Mama

If you can let me know how I can contact you through the chatbox, we shall correspond via email.

What you might do is to go to Edit HTML and copy the entire template, save it in a MS Notepad text file. I shall go through it to see if I can be of help.

I think it is never a good idea to give anyone your password. Cheers.

Clive and Van's Mama said...

Ok, you seriously must be good luck. Miraculously, about 10 minutes after I sent you that last email, it started working and my new blog is appearing. It really scared me for a second though b/c I was even trying to post "test" posts and they would show up when I'd preview my blog, but they wouldn't show up on my "view blog". So, thank you very much for all of your help. I love your site and will use it a lot for future reference (hopefully I won't have to bug you anymore though). Thanks!!

binge and purr said...

I am getting this message when I try to code for 3 column minima template:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The document type declaration for root element type "html" must end with '>'.

Can you help?

I could email you the full code.

bizwhiz said...

Hi binge and purr

This comes about when you have an opening tag without an end closing tag. If you have followed the codes explained in this article, you shouldn't see this message. Would you like to double check the code? The first part where you define the additional sidebar style shouldn't be a problem. Look at the later part where you have to insert the div id. You can also block-copy the example given without having to retype.

Anuraw said...
This comment has been removed by the author.
Anuraw said...

Thanks a ton, that was really simple to do and I guess its because you describe it this way.

I have been trying to do this from quite some time and because i am new to blogger not able to do it.

Wanna really thank you.

http://trueindiancricketfan.blogspot.com/

Candace Dempsey said...

I cannot believe this worked. I have been trying and trying. It only two me two tries using your method. Thank you so much.

Roy Cavanagh said...

bizwhiz,

Thank you for another clear and concise explanation. It's difficult to explain the frustration of a newbie getting to grips with HTML. Discovering your site has saved me (and many others)from hours of aggravation. Your blog is outstanding and it's fantastic to see you going to such time and effort to respond to the people leaving comments.

Thank you again,

Roy.

fabdo said...

Hi Bizwhiz,
Here I am again:solved one problem I have a new one!
The template I use is "Scribe" with 2 columns. I just would like to make the space between them wider. How can I do that?
Thank you in advance!
ciao ciao Donatella
http://paroledicioccolato.blogspot.com/

bizwhiz said...

Hi Fabdo

These templates normally have a fixed top.jpg and bot.jpg which account for the background image. To extend the overall width, these images will have to be redone and replaced.

If you are ok with keeping the present overall width of the template, you can reduce the width of the #main or #sidebar to have more space in between the columns.

fabdo said...

Hi Bizwhiz,
thanks for your answer.
The fact is that find the overall width I now have, small. On the two sides there is a lot of space that could be used in a better way.
Is it really complicated, for a dummy like me, to increase the space between the 2 columns? Can I add for instance a 3 column just in between to increase the width?
Ciao Ciao
Donatella

bizwhiz said...

Hi Fabdo

I mentioned about the top.jpg and bot.jpg that are usually found in templates like yours. Please go to Edit HTML, search for these pictures. Copy the URL into your browser, hit Enter, and you will know what I mean. These pictures have a fixed width. If you want to extend the width of your template, and yet have this background, you will have to create similar but wider pictures.

If you are prepared to do that for all the background pictures, adding another column shouldn't be difficult. The alternative is to look around the Net to see if anyone has a ready 3 column Scribe template that you can download. That might save you the hassle of doing up the background images.

Before you decide to change, you may also want to consider the eventual widths. The mathematics is simple - the width of the main body plus the 2 sidebars plus the spaces in between the columns equal the total width of your template. With that in mind, you will know how wide your background image ought to be.

IMMomsDaughter said...

Hi,

I dunno what template this is called but I'm using Douglas Bowman's no.897 template. I want to add a sidebar on the left. Will this code work? If not, can you please send me the code. I will appreciate if very much as I am not very good at techie stuff. Here's my email add biz4sahm@gmail.com

Thanks again.

bizwhiz said...

Hi IMMomsDaughter

Adding another column shouldn't be a problem but we are not sure your template will look nice unless the header images are also changed. Look at the images bg_desc_top.gif and bg_desc_bot.gif and you will know why.

Also, notice the curved corners on the inside of the main and right columns. With your new column, where would you like the curved corners to be? Visualization is important, and only after that can the codes be changed.

Perhaps you can scout the net to see if anybody has a ready 3 column 897 template for your use. At the least, you can see whether you like the new look before doing the change.

fribbles said...

Thanks for all your help and time that you've shared with wannabe bloggers like myself. I am curious, is there a way to make the center of the three column blog a lighter color than the background [and two side columns]? Thank you for your time!

*waves*


Best,

Amelia

bizwhiz said...

Hi Amelia

Yes, you can. Go to this part of the template and add in the color code.

#main-wrapper {
background:#XXXXXX;

The XXXXXX is the color code. You can refer to the article on Hexadecimal HTML Color Codes for the value. Please preview the change before saving the template.

Rapsodia Antillana said...

Hi Biz Wiz!

I have 2 blogs, and I tried your 3 column tips on my minima template blog with perfect results! I changed it to 3 columns in 40 minutes flat! That has to be a record. Now I want to change my other blog which uses a Scribe template to three columns. Any suggestions in fooling with the code. I studied the code on Scribe but don't dare make any changes without some pointers from you. Appreciate any help! Thank you!
http://thesilverpeoplechronicle.blogspot.com/

bizwhiz said...

Hi Rapsodia

We replied to another reader "Fabdo" who is also using Scribe template. Perhaps you want to have a look at what we said here. Adding another column to Minima is easy because there is no background image to think about. As for Scribe and other templates, you may have to do up new images for the background and corners and so on. Otherwise, the layout won't look nice.

IdeaNerd said...

Thank you soooooo much! I finally have 3 columns! U made it so easy, cuz i have tried doing what others have taught with no success! Thx!

Zack aka Ideanerd.com

muckdog said...

I've been working on changing my template from 2 columns to 3 columns. Currently, I use Rounders at

http://thelearningcurve.blogspot.com/

It's a bit frustrating mucking with the rounded corners and such, so I ditched rounders and went to a 3-column format here:

http://thelearningcurvetoo.blogspot.com/

I wanted to bring the left and right columns up to start at the top of the page. Easy enough with the left by using the position absolute feature, but doing that on the right column creates some overlapping issues when resizing the page.

How do I get that right column up?

Thanks in advance...

bizwhiz said...

Hi muckdog

From what I see on my browser, your both right and left sidebars are already aligned at the top. If you want to adjust them further up, you can reduce the top margin or padding under #leftbar_wrap or #rightbar_wrap.

bizwhiz said...

A number of readers had been asking about changing the Rounders Template to three columns. We have now covered that in a new article Three Columns Rounders Template.

I have also explained in the article why templates like Scribe and No. 897 would require more work in changing the background images to cater to the new layout.

fribbles said...

Thank you so much for all your help, I really appreciate your time. With the help you have, I am helping a friend of mine with her blog. Is there a way to add borders to the sidebar photos, similar to the border she has displayed on her eBay auction link?

http://enchantedhearts.blogspot.com/

I have tried to add the coding directly into the HTML/Javascript box without success, and am thinking it goes SOMEWHERE within the body of the HTML---but am not certain where. I would very much appreciate your help, and I would also like to send you one of my bears [regardless of this request].

My email address is me@ifribble.com, and thank you for the comment on my blog!

fribbles said...

Ah-HA!! I got it! Yay!!!

This is what it looks like usually:

a img {
border-width:0;


And I changed it to this:

a img {
border-width:15;


..it looks like it only goes to a border size of about 2 pixels though, I can't notice any change in pixel size.

bizwhiz said...

Hi Fribbles

You are correct. To increase the image border, you can simply insert the value in that tag.

We tried with this:-

a img {
border-width:15px;
}

And the border was really thick. :)

BlogmasterPg said...

Hi, Jim, How are you? Have you seen the new Ad-Sense image Advertings? They made some image ( someone likes little videos) and i thing we must do some templates that can implements this news Ads. What do you thing? In my www.canzoniitaliane.blogspot.com is very easy: the blogger template is born with this possibility, but I have 2-3 blogs like yours ( with 3 columns) and I'd like to customise its without download new blogger template and change. I think so you "new Blogger tips.." will be helps with some Ad-Sense video Ads ( very cilcked in my others blogs) Ok: Goodbye and to next time!

Arrogant Philosopher said...

Thanks for a very informative blog. I want to change my blog to 3 columns.
Which templates are compatible with doing that? I now have minima stretch lefty. I may keep it, but I've been thinking about changing it to another, maybe scribe.
Also, can I widen scribe overall?
Thanks.

bizwhiz said...

Hi Arrogant Philosopher

I suppose the steps here can be applied to your template.

As for scribe, you can widen it too. Just like the Rounders template, there are the background images to take care of. We might do up a guide on three column scribe templates in future.

Josella said...

Thanks so much for sharing this - it's the closest I've come to getting a three column layout to work, but I'm having a couple of problems I hope you can help with.

I can't find where in the code to insert:

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
width: 750px;

and maybe that's causing the problem - the main container and right (or original) sidebar are appearing beneath the newsidebar. I've tried fiddling with the overflow (by changing it to "auto") but it didn't make a difference.

I'm having a problem with my webhost right now, but you can see what I mean by visiting here:

http://tackorama.net/testblog.htm

Thanks again!

bizwhiz said...

Hi Josella

Is this an old template that you are using? The styles are defined under /* Content. These overlap with the ones you added. Maybe stick with these headings and change the widths?

Otherwise, like some did, consider converting to the new template and make the changes.

Cyber Istambay said...

Hi,

Thank you very much for this tip on 3 columns for minima, I can't believe I did it seamlessly without any problem. You are awesome but one thing I noticed is my blog seems to load slower now, any tips on how to get my blog load faster?

http://pedestrianobserver.blogspot.com/

bizwhiz said...

Hi Cyber Istambay

I don't think it has to do with the template, whether it is 2 or 3 columns. What happens usually is that with an additional column, people tend to put in more things into their sidebars. I wonder if this is the case.

The download times are longer if there are pictures, videos, third party codes, widgets, etc. in the page. If you find the download time unbearable, you may want to consider reducing some of these. When I saw your site, I personally thought the time taken was acceptable.

Cyber Istambay said...

Thanks Bizwhiz, I guess I am expecting too much from it, lol I just noticed that your blog does the same load as mine.

vvoi said...

Hi! Thanks for the great advice. I NEARLY got it right, but unfortunately I did mess up somewhere- as you can see, both my sidebars ended up to the right, while I wanted the normal sidebar-main story-sidebar look. I can't seem to find the source of that! Can you help me on that??

bizwhiz said...

Hi vvoi

You can follow the format stated in the above article where I said "The code will give you a newsidebar on the left, main post in the middle, and leave the current sidebar on the right."

Shift the red section on "div id='newsidebar-wrapper'" to the top of the "div id='main-wrapper'".

vvoi said...

i'm afraid i got that right... the order is correct. oh, bollocks, why can't it just work?... i'm pretty desperate, spent quite some time trying to find a way out, but i guess having any sort of knowledge would help.

bizwhiz said...

Hi vvoi

I am now taking a look at your template. I noticed that you had done some changes to the template on your own.

Perhaps you may want to be sure where you want to place the new sidebar containing the embedded flash widget. If it is to be on the left, it should read like this:-

#newsidebar-wrapper {
float: left;

#sidebar-wrapper {
float: right;

Currently, you have reversed it. You can change it and adjust the margin since you have also added a left margin. Please try it and let me know how it goes.

Anonymous said...

hi first off all u must know how to create a template.You have taken your template from some where else.You are teaching others.Your tutorials are not working on blogger.I tried your tutorials but they are not working.I think u should do some work on that.Have a gr8 day bye

Anonymous said...

I AM SO SORRY.I AMFEELING SO SHY.YOU HAVE DONE A GOOD JOB.SORRY FOR MY WORDS.I AM TAKING MY WORDS BACK.

ONCE AGIN I AM EXTREMLY SORRY.

bizwhiz said...

Hi Anonymous

No problem, we accept your apology. We are not perfect, and we believe that there will be parts of the guides that are not clear enough or could even be outdated. Should you continue to use any of the tips here, and be faced with any difficulty, feel free to let us know what exactly is not working well. Since many other users have found the articles to be useful, it could be that there is a particular area you are referring to which needs further clarification. If necessary, we will review them and amend the articles for the benefit of our readers.

about me said...

Thank you so much for the great info. I have been able to transform my blog and I love it! I have converted my blog to the three columns with the minima template, but when I tried to do the same changes with minima stretch, it didn't work. How can I put three columns in minima stretch?

Lavender said...

Thank You, Thank You, Thank You!!
Now Im off to 're-decorate' my blog, The Birds & The Beads
Cheers!

Ces said...

First thanks to you and thanks to Lavender who mentioned you. Thanks.

Manoj Sadasivan said...

your blog rocks. Changing to 3 column blogs was something I was searching all over. Keep up the good work. Thank you
http://manojsadasivan.blogspot.com/

Laura said...

Wow. I'm gonna have to tag this site to my del.icio.us and give this a thorough go-over, but I'm so excited to be able to expand my site using your tips. Thank you so much!

I will definitely, definitely be back to glean more wisdom. :)

Dr Sue said...

Hello, I have never played with code in my life before and was amazed at the ease with which I could basically use your code and advice. Thank you so much for sharing. My ONE problem is how to generate a better margin between the far right newsidebar on the following url and the main body. I admit I have spent 30min or more altering the variables by small margins and can't quite get it right. Any advice would be gratefully received:

http://insightvillage.blogspot.com/

bizwhiz said...

Hi Dr Sue

You have set your overall width as 750px, left sidebar as 195px, right sidebar as 110px and main post as 405px. This leaves 40px. Perhaps you may change the margin to this:-

#main-wrapper {
margin-left: 20px;

Dr Sue said...

bizwiz..Thanks for ultra prompt help. Ok, I went in (like a mission) and kept going down by increments of 2 until it is now on 0px. Seems fine but is there any way I can give a bigger separation between the main body and the right sidebar (or the newsidebar)? Or is that a matter of first increasing the primary width from 750 up? I tried various means earlier to increase that separation then realised as it kept going wrong I was partly learning orientation :)

I guess, in a way, if the text in the main body could be 'justified' that would help? But overall its the separation I'm looking for rather than the current look of them almost running in together.

Thanks so much. It's interesting to learn these things after all these years :)

Dr Sue said...

Hi again BizWiz..as we may be in different time zones I thought I would keep experimenting. Current I had width at 850px and will see if I can adjust the columns that way as I would actually like left and right columns to be about same width.

If you can take a look at your convenience that would be great. I will let you know if I crack the correct 'formula'. :)

Dr Sue said...

Hello..back again :) Well, I think I've almost cracked it. Is there a way to centre or put the writing and images on the newsidebar on right ON the right side of the column just to give the effect of more room there between that column and the main one?

Cheers.

bizwhiz said...

Hi Dr Sue

To make it easy for you, just a little recap.

Width of outer-wrapper = width of 2 sidebar-wrappers + width of main-wrapper + margins

Your outer is currently 800px. If you total the widths of your main-wrapper and sidebar-wrappers, you presently have 793px. Quite an odd number, and leaving almost no margin in between. Is this what you want?

You can of course increase the width to 850px, main at 430px, sidebars at 190px and that gives you a margin of 20px on each side. Add this margin-left: 20px; in the #main-wrapper{

If you look at our blog, we adjusted our margins and widths with this in mind. Work out the maths before changing the values.

Dr Sue said...

BizWiz.. Not knowing code, I look very literally. I knew what you said about the numbers needing to add up to the total, however, I can only see the main with a margin and assumed that margin only worked on one side..on the left for some reason. I now gather that margin applies to both sides. I will try again. Thanks for trying to help.

Dr Sue said...

BizWiz...Ok..(don't tear your hair out..please continue your patience).. I have done what you suggested but the right column (newsidebar) is still so close to the main one. This is where I would have thought a small piece of coding was needed in addition to main wrapper margin left..that one would also need to ask for margin right. You're the expert not me of course but my figures add up and I still have the issue of the two right columns too close together. That's why you saw I had odd figure combinations as I was attempting (obviously badly) to tweak.

I know I'm almost there so please bear with me.. :)

Dr Sue said...

I added a small code piece and it's helped a bit for right. Worth an experiment. Thanks.

bizwhiz said...

Hi Dr Sue

Just looked at it again. If you are pleased with the widths for your main body and sidebars, amend to this:-

#main-wrapper {
margin-right: 30px;

and delete margin-left. Let me know if you are happy with the outcome.

Dr Sue said...

Hi..thanks..looks good :) Obviously the newrightside is fractionally narrow because one of the url's isn't 'quite' showing but I'm not sure I want to ruin a good run I'm on now.
Thanks for your help.

Little Robin Hood said...

Hi, I have seen you have 95 comments. That have surely kept you busy. Sorry but could do you have a look at my blog at http://story4children.blogspot.com.
Followed your instruction, somewhat working, however, the sidebars do not align with main table. And the header bar disappeared. where did I do wrong?
thank you

bizwhiz said...

Hi Little Robin Hood

I see that you have followed our guide on Three column Rounders template. For the benefit of other readers, note that these comments are for that and not for Minima template. Amend this:-

#main-wrap1{
margin:15px 0 0 15px;

You have left a space between 15 and px.

As for header, did you add anything else to cause that? For example, there is a text-align: center; in the #header .description which doesn't seem to be in the original template.

Adam B. Cordover said...

I followed your instructions under "Three Columns Blogger Template," but decided I didn't like it. So when I reverted back to my old template, for some reason the "add an element" option on my sidebar and footer are gone. How do I get it back? Thank you.

-Adam
Cafe Cordover
adcor13@hotmail.com

Adam B. Cordover said...

Never Mind. "add a page element" suddenly appeared! Keep up the great blog.

-Adam

Little Robin Hood said...

Dear Bizwhiz:

You are absolute genius. See http://story4children.blogspot.com
It worked. For the header, I don't know what happened, but I am happy enough to leave as it is. Really want to buy you a lunch or something for all your kind helps.=) Thanks

Yours

bizwhiz said...

Hi Little Robin Hood

Glad that it worked. For the header, go to #header-wrapper and you can see that you have left out a " at the start of the URL. Also there should be no space between .gif and "

The complete code should therefore be:-
url("http://www.blogpulp.com/imagehost/images/1008314701.gif")

The extra space also appears in your footer image URLs. If you amend all of them, you should have your rounded header and footer.

Little Robin Hood said...

Dear Bizwhiz:

Following your detailed instruction, I made it. :=) Thank you, thank you. I also love your two other blogs, wonderful inspiration. Great jobs! Especially thank you for your kindness to help others to the end. God bless you

Sharon said...

I recently found your site as I was looking into how to change my blogger template to 3-column. Very easy instructions to a computer dummy (me). Anyway,today a lady emailed me to say she uses Firefox and that the middle of my blog is empty and my posts are in the left column. It looks normal on IE.
Can you tell me how to fix this? I would really appreciate it as I know a lot of people use Firefox and aren't able to read my posts.
Thank you so much in advance!

bizwhiz said...

Hi Sharon

Your template is fine. The problem is with the widget contents in the left sidebar. The left sidebar contents are ok up to the Code of Ethics. One of the widgets after that is causing the problem. Do you remember what you had recently inserted before this issue surfaced? Did you insert anything else into the template? A code provided by a third party?

You can install Firefox and try moving one widget at a time to the right sidebar. Preview the template to see if the main posts appear. Don't save. Once you know which widget is causing the problem, you can rectify the code.

Sharon said...

Thank you SO MUCH!! I moved a couple of widgets and now I can see all three columns in Firefox!

You are very much appreciated!

Punisher said...

Hi, i'm trying to add a third column to my blog. It uses the Scribe template. I could not do what you said in your post, can you help me?

PS, I have edited my template a bit http://rewindingmylife.blogspot.com

Another PS, im a newbie at HTML

Plz and Thx

M said...

Thank you so much for such a wonderful blog! I have become quite addicted to it!

I am really hoping you can help me fix something on my blog. I have a 3 column minima template with a patterned background. I would really like a gap between the main post column and the sidebar where the background pattern can show through.

So I would like three white columns on a patterned background rather than one big white square with all 3 columns inside it.

Hope that makes sense. Thanks in advance :) I am still getting the hang of all this blogging stuff.

http://ireallywantone.blogspot.com/

bizwhiz said...

Hi Punisher

Please don't use this guide for Scribe template because there are background images to take care of. We shall be doing an article solely on Scribe three column template as we see that a number of users have used Scribe templates.

bizwhiz said...

Hi M

First remove the background: #ffffff; in the #outer-wrapper {

Then add background: #ffffff; in these:-
#main-wrapper {
#sidebar-wrapper {
#newsidebar-wrapper {

M said...

Hi Bizwhiz,

Thank you so much! Your blog rocks!!

Mel

Shoutycrackers said...
This comment has been removed by the author.
bizwhiz said...

Hi Shoutycrackers

The usual causes are with the width and margin settings. If the sums do not add up, you may see a 'squeeze' and the sidebar may appear at the bottom of the page. Another possible reason is mistyped code spacing, quotation marks, semi-colon, closing tag, etc.

Why don't you try block copying the example we gave in the tables and replace the segments of your template with this code. Preview, don't save, and see if you see the three columns.

Little Robin Hood said...

Dear Bizwhiz:

Hope that you have a nice weekend. I have two other blogs, would do you please give me some professional ideas how to improve the overall looks? is there way to change them into three column?

Thank you and sorry to make you sooo busy.

Little Robin Hood said...

oops. my blogs are :
http://onlyamum.blogspot.com
http://full-time-mothers.blogspot.com

bizwhiz said...

Hi Little Robin Hood

As it is the layouts are neat and nice. Good blogs. You can customize some colors and fonts here and there. But to change the layout to three columns, perhaps only the Sand Dollar template is appropriate. The Harbor template background image seems more suited for one left sidebar and not an additional right sidebar.

In view of readers' requests, we are coming up with articles on transforming some of these templates into three column formats. We'll probably do one on Sand Dollar template too.

Dr Sue said...

Hi.. I'm back :) I made the three column format successfully with your assistance in the end. I want to put in the widget for who is seeing the blog. I have this code but I've tried putting it in a couple of places and totally blown it. I've removed and am poised. I'd like it in right sidebar at the bottom please. I put it in under that code but after the } and assume this was wrong and why I got nothing but a header font change!

This is the widget code:

Ah.. I now see I can't include code so I have removed it. Sorry.
Thank you.

bizwhiz said...

Hi Dr Sue

When you mentioned about the } I assume you had inserted the code directly into the template. Unless this is what the service provider instructs you to do, it is always good to minimize changes to the template.

Preferable to insert the code as a page element by going to Template -> Page Elements -> Add a Page Element and selecting HTML/JavaScript. In that way, if your script doesn't work, you can easily remove that page element.

Dr Sue said...

Ahh..thanks..it was a blogspot offering and it actually didn't tell you what to do. I had used a stats option and that did actually tell you where to place it in the template and that worked ok. On this the instructions were obviously missing. Thanks for the help.

j4ur14 said...

Hi!! First of all, this site is great. I have many of your "things" working on my blog.

Second. I read almost 98% of the comments looking for the solution of my problem and didn't find it... so I guess I'm gonna post what happend.

I did everything you said. I resized everything for matching. But when I see the results this is what happens:
1° footer apears in the second side bar wich is right at left of the first sidebar.
2° I changed the code so it says float left and then my profile photo moved to the left but the posts wrapper moved down and not to center.
3° after the profile moved to the left, the space it left behind was still looking as an empty column.

Well.. please excuse my poor english. U can mail me pleeease at jauria@gmail.com

j4ur14 said...

ey btw. I'll leave my blog as it looks for now. http://g4t1tu.blogspot.com

thx

bizwhiz said...

Hi j4ur14

You must have accidentally deleted the } at the end of this:-

#sidebar-wrapper {
width: 180px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: shown; /* fix for long non-text content breaking IE sidebar float */
}

After adding the } you can add a margin-left: 20px; or whatever margin under #main-wrapper. You should see the three columns.

j4ur14 said...

you're damn clever!!!! That truly was the problem!!!! I'll leave the link to this site for another 1.000 years :D

Stay safe and keep this good work.

regards, Pablo.

Cloak said...

PLEASE help me here. I have the two sidebars, but the problem is that each one only displays,like, half of whats in them (I have an image, and only half of it shows) what do i do?

http://www.vortexloop.blogspot.com

bizwhiz said...

Hi Cloak

What you can do is to enlarge the width settings. The images you already have in your blog may have a particular fixed size. If you have a smaller main post or sidebar width, only part of the image may show.

Should you find it a problem squeezing in a sidebar into your layout, you may want to stick to your current template. Alternatively, if they are images that can be resized, you can resize them and upload these images again.

Vanessa Alexander said...

Hello Biz Whiz,

I have been to this site almost every day. I've used many of the solutions from your site and it has helped so much to get me out of some jams as I've been making changes and learning to work with the new Blogger format.

Problem:

I have converted to 3 column Minima following the instructions you gave but I am not able to get past the sidebars being too narrow. It also seems that the post column is too far to the left. So I have left it as it is and went on to get some other things done. Could you take a look and tell me what I've done wrong when you get a moment.

Also I would like to do an article about you and what you do here soon. I can use info from your site as I "scour" or if its okay I can contact you. I use to explain to my son that he had to be able to make things plain to people who are not techies or geeks. I learned a lot from him but it was sometimes a little difficult. He had a lot of patience LOL.

Your site is exactly what I meant. You do an excellent job because you explain from the point of view of people who know nothing or little about all this.

I've placed a piece of code linking to your site but its only a button. So you are also in my links under knowledge base. Its not enough. You are a blessing.

The site is still under transition and may be for some time (smile). Thank you Biz Whiz.

Vanessa
http//52signals.blogspot.com

bizwhiz said...

Hi Vanessa Alexander

Thanks for your kind words. We are glad that our site has been useful to you. We are not techies nor experts in this area. Like you, we are learning too. Perhaps that is why our approach and writing style differ from the others.

As for your template, if you only want to increase the sidebar widths, you can change to this:-

#sidebar-wrapper {
width: 175px;

#newsidebar-wrapper {
width: 175px;

Mathematically, it will add up i.e., outer width(750px) - main width (350px) - margins (25px and 25px) = sidebars (175px and 175px)

Your footer is still at:-
#footer {
width:660px;

You can change it to 750px if you want.

Miles Away In France said...

I swear you name should be GOD!

I was playing with my template for hours, I tried various tutorials and none of them worked.
I followed yours and within about 15 minutes I had 3 columns.

I am truly grateful.
I am now going to have fun playing with colours and widgets.
Thank you so much.
Racheal

generalchaos138 said...

thank you, this has made my blog even cooler. i am in your debt

GC

madamspud169 said...

I'm hoping to add a new sidebar column to my dots template but have been unable to find one for this template. Can I use the instructions for a different template & if so which one?

bizwhiz said...

Hi madamspud169

We have yet to write one for Dots template. It involves changing of background images and this guide will not apply to Dots.

madamspud169 said...

ok, thanks
Is there one in the pipeline at all ?

bizwhiz said...

Hi madamspud169

If a new sidebar looks nice in the Dots template, we'll write a guide on a Three Columns Dots Template.

Anonymous said...

thank you for sharing your knowledge to us! God Bless! =)

Apokolypz said...

Hey I did this exact code exactly how you said 3 times, and everytime I do it, The posts end up on the left and the two sidebars show up on the right, when i want one of them on the right and one on the left, I don't know whats up, but please help, just leave me an e-mail, b_balla_keeler23@hotmail.com

bizwhiz said...

Hi Apokolypz

We covered 2 different places where you can place the code in the body of the template - one gives you a main post body in the center, and the other shifts the main post to the left.

For easy reference, we have inserted the headings "Blog Posts in the Center" and "Blog Posts on the Left".

Ruby said...

Hi there, first of all, fantastic tutorial, very easy to follow, but I am having some problems!

Instead of having one column on the left and one on the right I instead have both of them on the left

PLEASE HELP!!!!

rubii__x@hotmail.com

bizwhiz said...

Hi Ruby

You are using Minima Lefty where the sidebar is on the left. You can still follow this guide, but take note to change these in your template as well:-

#main-wrapper {
float: left;

#sidebar-wrapper {
float: right;

Your new sidebar will be on the left. We'll probably do one guide for Lefty and Stretch Minima templates.

Apokolypz said...

Yes, I did the one that makes the posts in the center, but it still goes to the left

bizwhiz said...

Hi Apokolypz

You could try creating a test blog and applying the change to the template to see if the main post is in the center. Let us know the URL of the test blog and we can take a look and let you know which part of the code needs amendment.

If you can see the three columns in the test blog but not in yours, perhaps bring the Cbox into a page element through Template -> Page Elements -> Add a Page Element. You have currently inserted it into your template with a fixed width of 160px. If your new sidebar column is less than that, this width should be reduced. Copy and paste the code into a HTML/Javascript page element. If it works fine, then delete the code from the template.

cyberpenguin said...

Thanks for the great info on setting up a 3 column minima template! This really helped me a lot! I'd also like to add a useful tip for those newbies out there who might notice that the placement of their header description text has changed. This is very likely due to the fact that you need to also adjust the maximum WIDTH of your header header description text.

This can very easily be fixed by going to the #header .description { area & changing the max-width setting. See below for an example:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:1024px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Hope this helps!
-C

suhas D said...

hi .. i converted my blog to three column minima ...gr8 help .. thnx a lot .

But there seems to be a problem . Where ever i pasted the newwrapper .
Both of the columns end up on the right side. and the main blog on the left. Can you help me with this ?

bizwhiz said...

Hi suhas D

Which blog is that? You have 3 blogs in your profile but none are Minima. Let us know and we can take a look.

Anonymous said...

Thank-you! Your page was the only resource where I found the answer! My Blogger pages looked fine in Firefox, but in IE, my right and bottom columns (I have three columns plus the bottom), disappeared! Since everything looked fine in the individual posts, I took your advice and changed the homepage to display only five individual posts (instead of the previous 10)...problem was solved...so I am guessing it was a problem in one of the individual posts maybe?

witeg said...

Thank you!

floreksa said...

Your instructions are great! I'm sure I'm missing something stupid, but I my right column is stuck at the bottom of the page. I've got the outer wrapper at 800 main wrapper at 450 and both sidebars at 150. I can't figure out what's causing it to drop.

http://www.floreksa.blogspot.com

Thanks!

bizwhiz said...

Hi floreksa

You can follow what we wrote in our article and add the following:-

#main-wrapper {
margin-left: 25px;
float: left;

Preview your template and you should see the three columns.

floreksa said...

PERFECT!

Thank you so much. Amazing blog. Learning so much more reading your pages just today then I have the past 2 yrs of blogging.

Telling It Like It Is said...

Hiya Bizwhiz! I love your site! I'm going to change to a 3-column per your instructions this afternoon, but in the meantime...my big question is: With my current template as is, when I try to add more page elements (say..a blogroll or auction ads or something somewhat long) when I save it and refresh my page, what I just added doesn't show up at all, but it shows a line break as if something is there. Is there some sort of limit of how many elements I can put in my sidebar? What am I doing wrong? I see many minima template sites with lots and lots of ads etc on the sidebar extending way down on their page, so why can't I get it work like that? I gotta fix this problem before I do the 3 columns.

bizwhiz said...

Hi Telling It Like It Is

There shouldn't be a limit in the number of widgets you can insert in the sidebar. Often, if you see an empty field when viewing the page, it is due to an incorrect code that you have inserted. To verify that this is the case, add some text widgets instead. If you see them, it answers your question and confirms that you can indeed add more widgets in the sidebar.

Brad said...

Awesome post!

The only problem with my blog is that when i changed the wrapper part on top of the main-wrapper, my blog posts are still on the left and the 2 newsbars are on the right..
Anyhelp?

brad

http://daily-rambler.blogspot.com/

Thanks again!

L. Noelle said...

Hi there. Thank you so much for a fantastic, very helpful site! I've learned so much from your very descriptive, helpful tutorials.

That being said, I have the 3 column minima template on all of my blogs and have never had a problem until today. I added a page element, html code with an uploaded jpg link, and refreshed my page. Immediately, my whole right side column disappeared! I went back in to edit the page elements, assuming they disappeared, but all of my page elements were there, they just stopped showing up on the page. Then I scrolled all the way down, and all of my page elements were at the bottom of my page.

I've been working on the site for around 4hours, reading and trying to edit the html, to no avail. I just don't see what happened!

All of my html looks the same as it does on my other blogs, when compared side by side.

Can you help me? This is my most important blog, and I need it to be up and running! Thank you so much. All of the measurements in the html look alright.

Forest Parks said...

Thanks very much,

I've been wanting a 3rd column for ages and now I have it.

I've also linked this post in my last post.

bizwhiz said...

Hi Brad

That is because both your #sidebar-wrapper and #newsidebar-wrapper float to the right. Have the newsidebar float:left and it should be ok.

bizwhiz said...

Hi L. Noelle

I see that you did not use our guide here to convert your blog to three columns. If you have downloaded your template from somewhere else, revisit that site and they may have the solutions for you.

In the meantime, see if the image is indeed causing you the problem. Remove it from the layout and preview the blog. If the image is causing you the problem, try resizing it to something much smaller than the width of the sidebar by specifying a width="" in the img src code.

L. Noelle said...

Hi there, thanks for responding so quickly. First off, I forgot to tell you which blog.

www.healthiestlife.blogspot.com

Secondly, I did immediately remove the image, and the html code, cleared my cache, my cookies, restarted my computer, took all of my page elements off to start over, but it still isn't working.

L. Noelle said...

I figured it out. I had entered these new forms in my main posts, that were not sized properly, so they were pushing everything on the right column, down. Thanks for your help.

Jali said...

Thank so much for sharing. I have created the 3rd column with guide in your blog. Very easy and helpful.

I hope to learn more from your blog. I linked to your blog to make me easy to access your blog.

Thank you.

Hoe said...

Thanks for everything..

MrsYFA said...

Can anyone help me expand my header across the entire top of my blog at yawdfromabroad.blogspot.com. I've tried but it just keeps moving the header to the right and not stretching it??? Thanks in advance.

bizwhiz said...

Hi MrsYFA

Since you have uploaded a background image into your header, it will follow the image size. If you want it wider, resize the picture to the exact size you want and upload this resized picture into the Header.

MrsYFA said...

BizWhiz,
THANK YOU SO MUCH for responding at all and for doing it so quickly! I did just what you said and went back and resized my logo in Photoshop and it worked! I really appreciate your help, I've contacted a number of blogger tip sites and you are the first to actually help me. Thanks again, I sincerely appreciate your time and effort.

Sharon said...

I love your website! It has helped me so much!

One thing I can't figure out is how to change the font size on my sidebars in the Minima 3-column template. I'd like them to be smaller.

Hope you can help me!

bizwhiz said...

Hi Sharon

You may take a look at this Change Font Size and Font Styles in Templates article.

Rechelle said...

Thanks so much for the help. I feel so empowered now! I can mess with HTML! I put a link up from my site. Thanks again!

DANNY said...

This is great! Thanks

The Queen B said...

I really enjoy your site - the layout is wonderful and easy to navigate, and information is very helpful and written in a manner that is easy to understand. I have subscribed because I like it so much!

On to my dilemma...I have tried your directions for Minima, however my template is Minima Lefty Stretch, and the code looks different - mine has % signs and no width listed. I kinda figured it out, but then when I inserted the code to change the Page Elements template, it went all caflooey. The code you show to do that step is different than the code on my template, so maybe I'm putting it in the wrong place. I also couldn't get the header to stretch out over all 3 columns (this was before I tried to change the Page Elements Template portion..)

I've read through all the questions and comments you have so patiently answered, and I still couldn't get it to work (although I came close after reading your answer to Vanessa Alexander). I didn't save any of the work I did because, even though I saved my original, I didn't want the site to spend any time looking crazy (just beginning to build my subs!).

Perhaps it would be easier if I tell you what I'm trying to accomplish:
3 columns in Minima Lefty -

L column I like at 175, (I was able to do that)

then a nice space before middle posts (it kept bumping too close to the L column)

The middle post column needs to be fairly large to accommodate pictures since I have a photoblog (**also any suggestions on how to make my pictures bigger in this section? not sure where to alter this in the code and I sometimes upload/download from Picasa...)

a narrow right column (just wide enough to list links).

I've tried several times, and I think what's throwing me off is the difference in the template language. Also, if I make my outer wrapper 800px, would it get cut off on certain computers? I really don't mind the template so much now, I just want a smaller Left, a bigger Middle, and to be able to use the space to the right.

I appreciate any help you can give me. Your site is really so helpful, and I plan on coming back many more times to try other things (like a picture in header!!)

Thank you for your time!
Kerri the Queen B
www.visualpeace.blogspot.com

bizwhiz said...

Hi The Queen B

Thanks for your detailed message. You are right, this article is for Minima templates but not the Minima Stretch templates. We will try to find time to do up more three column guides and include the Stretch template.

Lynn Hemeon Photos said...

Is there a way to remove the side bar in the archived pages but leave it on the main page? I am using the new blogger.

bizwhiz said...

Hi Lynn Hemeon Photos

Don't think it can be done. The template applies to all pages.

total-e-bound said...

Hi, please could you help me. I followed all of your instructions above which created the third column, bit the column on the right now begins below the first post created. Any suggestions on how I can get it to sit at the top right of the page instead of half way down? Many thanks.

bizwhiz said...

Hi total-e-bound

The usual cause is typo error like typing "float:right" instead of "float:left". Also, people miss out semi-colons or put the semi-colons at the wrong places.

Re-check the code against what we have stated in our guide if you face such a problem again.

Bon Vivant said...

wow thank you so much! I was on a bunch of other sites before this one trying to figure out how to add the third column, but none were as helpful as yours! You made it so simple and easy! A million thanks.

Lori said...

Thanks for the improvements to the 2-column blog formats.

One question: I don't understand how to "change it permanently" to yui-t2 "under tag."

I can manage to then delete the widget, though.

Might you offer some guidance?

Jade Uzuki said...

Thankyouthankyouthankyou!!!! My blog looks so pretty now! I suck at html, so thanks for spelling everything out. I like having three columns instead of two, because it looks more symmetrical that way; I'm wierd like that.

Great idea for a blog! Keep at it.

Paris said...

hi!
it is safe for old blogger themed blog. not the new blogger one???

festiva said...

I need further advice.
I follow your instructions exactly as you have laid out. But the 3 columns do not materialise. My site still remains the same as before. I don't notice any changes at all. Please review my site source code & comment.

Click Here to check My Blog

Thanking you now & advance.
Regards

clairec23 said...

OMG thank you!!!!!!

I've been going insane trying to do this. I found another blog that gave instructions but it went very, very wrong! Your blog has been a big help. I had to link to your page, thanks again, I'm very grateful!

bizwhiz said...

Hi Lori

What is a "yui-t2"? Which of our articles are you referring to?

bizwhiz said...

Hi Paris

If you are asking whether it applies to the old or new Blogger template, whatever we write in this blog applies to the new Blogger templates.

bizwhiz said...

Hi festiva

If you can't see the three columns, double check that you have inserted or amended the template correctly. Often the problem lies in typo errors in the float alignments, margins, semi colons, braces and so on.

Antonia said...

Well, I did exactly as shown, and landed up with the main post on the left and two sidebars to the right. I figured I must have screwed up soemwhere, so copied the entire section where yous say "It should look like this" and got the same. I feel like a complete dweeb. I just can't see what I did wrong. I was using Minima, not Minima Lefty. Please help!

Jess said...

Oh my gosh, it worked! Thank you, thank you!

Kyle and Frances said...

HELP! K I followed the instructions but still my blog is all weird. I have three columns but... the right sidebar starts at the bottom of all my posts... I'm really lost, and are in dire need of some help. here's the url: http://kyleandfrances.blogspot.com

I will send you the html if you want. please help.... I'm so lost :( fnegbert@gmail.com

bizwhiz said...

Hi Antonio

If you want us to look at what you have copied and pasted into your template, let us know the Blog URL.

bizwhiz said...

Hi Kyle and Frances

Whatever you have inserted into the template looks different from what we have stated in our guide. Your adding of margins in the outer-wrapper and changing the float:left to float:center, and so on caused all your misalignment issues.

Why don't you stick to what we advised in our tutorial. You can then increase the widths. After that, adjust the margins incrementally if you'd like and always preview the template before you save the settings.

Kyle and Frances said...

thank you thank you thank you!

Lila said...

Oh! great idea.I have changed my blogger template.Thank you

Jennifer said...

Thank you so much! I just upgraded my Minima template to 3 columns and your directions were invaluable. Check it out: grizzarkhov.blogspot.com

beckie said...

I tried to add the third column, and I got it but I can't add any page elements to it.

I also can't figure out how to center everything in the main wrapper. its all lopsided to the left.

Any help would be much appreciated

bizwhiz said...

Hi beckie

Our advise is no different from what we have told other users - double-check the code you have modified to ensure that there are no typo errors.

For example, you have typed this:-

#main-wrapper {
margin-left: 150px;

when it should be this:-

#main-wrapper {
margin-left: 25px;

Have a look and correct the errors. Preview the template and you should see everything aligned.

beckie said...

Thanks, I actually found the error. Your blog is so helpful! Thanks so much.

H@cKeЯ said...

hii....

thanx for the useful info.... i tried the html code in my blog using ur code which u have given.....but when i previwed it....it waz looking a bit weird....as if the left column was too less width...n also right....
cn u plzzz help me.....in wat's d problem.....
here's my blog url
http://windowstipstricks.blogspot.com

aloi said...

i'd like to make my template 3 columns but i cant seem to find the "wrappers" in the html.

i am using the "kiss" theme. see: readnobels.blogspot.com

if you can help me out, i'd really appreciate it!

bizwhiz said...

Hi H@cKeЯ

I don't understand your problem or why you are posting your comments here. You have converted to a three column template using our guide at Three Columns Rounders 2 Template. Your columns look evenly spaced.

bizwhiz said...

Hi aloi

Our template customization tutorials are for people who are using the Blogger templates. Through the guides, they can modify their templates to three columns, add images, colors, etc.

Since you are not using a Blogger template, you may want to go to the site where you downloaded the template from and post your queries there. The creator of the template should be able to advise you.

Tarkan said...

Hi. Thanks for the information. I've been searching for this for quite a long time.

What I have found in my blog after your instructions is apparently not what I was expecting.

The newsidebar is located on the right (although I placed the ...div id='newsidebar-wrapper... ABOVE the main wrapper code. And actually the two sidebars are placed as one on the top and the other at the bottom (not like two separate bars) and there is a bigger gap between the main wrapper and the bars.

did I do something wrong?

here is my blog: http://qaan.blogspot.com/

Thanks!

bizwhiz said...

Hi Tarkan

That is because you did not follow the guide. In our example:-

#newsidebar-wrapper {
float: left;

But in your case, you put it as:-

#newsidebar-wrapper {
float: right;

Also, you increased the widths of the sidebars without increasing the overall width of the outer-wrapper.

If you want the sidebar widths to be 175px, then 175px + 175px + 400px (main) + 25px (margin) + 25px (margin) = 800px.

Your outer-wrapper width should be 800px. My suggestion is that you stick to the guide, get your three columns up, then adjust the width settings after that.

Stef said...

Thanks for the tip! That worked great!

John Westenhaver said...

Thank you so much! Your blog has helped me get started more than any other I've looked at so far. I'd love to know what you think of my work at Energy Watcher. I started with the Minima template but basically there's so little of that template left now. I'm still tinkering with it, though. I am currently experimenting with adding my own blogger variables to provide more complete control over colors and fonts. Do you know if there are other variable types than "font" and "color"?

Tyllonet said...

Thanks! You tips very useful..thanks a lot..