Add a Third Column to Blog. ~ The Blog Doctor.

Add a Third Column to Blog.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The increasing resolution on Monitors worldwide has led to a greater demand for utilizing the total real estate available on the computer screen. Many bloggers do not like the empty white space on either sides and wish to add a third column.......

Many bloggers are reporting that 6% to 9% of their viewers are on 800 x 600 monitors. The latest stats. from here show that in July 2006 there were 17% users on 800 by 600 res. They would hence like to add a third column or one more sidebar to their template. Here I have done it for the Harbor template.


The first thing to do is to increase the width of the blog using measures I have outlined in How to change width of Blog. This is a picture of the important divisions of the original Harbor Template. Click on image to enlarge it.

First backup the template as shown in How to Change Template. Then add this code in the CSS after the <b:skin><![CDATA[ tags after increasing the width to 1024px as shown :

#outer-wrapper {
max-width:890px; /*<----INCREASE THIS to 1024px */ padding: 0 30px 50px; width:100%; width/* */:/**/auto; width: /**/auto; } Save Template and see the increase in width below :


The size and placing of the new columns will have to be specified in the CSS first. The new sidebar is defined by

#rightsidebar-wrapper {
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 */
#rightsidebar {
padding-top: 100px; /* reduced from 170px of leftsidebar */

Notice that the right sidebar wrapper has been floated right. Now we need to create one big column to include both the post and the left sidebar columns. After creating it we will give it a float left property. So it will float left and contain the left sidebar floating left within it and the posts column floating right within it. For this add this code and we will call it 'twocol'.

#twocol {
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 */

Since the right sidebar wrapper is 32% we have sized this at 67%. Save Template.


We have defined the sizes and the positions of the columns in the CSS. Now we have to add them in the body of the template. Scroll down till you come to this line :

<div id='main-wrapper'>

and add the following code just above this line.

<div id='rightsidebar-wrapper'>
<div id="rightsidebar">
<div id="twocol">

Notice that the right sidebar wrapper along with its sidebar has been added before the main wrapper and the twocol division has been opened but not closed. To close it add this code


just before the footer wrapper code starts here :

<div id='footer-wrapper'>

Thus the twocol includes both the main wrapper which is floated right inside it and the left sidebar which is floated left. It is closed before the footer wrapper so as not to include it. Save Template.


We have added the third column but it is empty. To populate it with widgets or Page Elements add these lines :

<b:section class='sidebar' id='rightsidebar' preferred='yes'>

at the position marked by xxxxxxxxxxxxxx below :

<div id='rightsidebar'>

Save Template. We have now added the Add Page Element link in the new right sidebar column. Click on Page Element subtab under Template tab and then click on Add Page Element link in Right Sidebar to add a PageElement in the right sidebar. See picture below

I have added a text Page element in the right sidebar so as to outline it.

Technorati Tags:, , , ,


Willis said...

I like the idea of a third column. My question is this. Can I also determine the width of each sidebar. Or are the sidebars a fixed width?

vin said...

Take a look at :

How to change width of blog

Tracey said...

Okay, so I figured out how to get the third colum on and also the widget, but i can't trannsfer widgets from my other sidebar into my new sidebar. Any suggestions?

vin said...

Use Drag and drop on the Page Elements tab to move them. If not possible try refreshing cache. If still not possible switch to Edit Html tab and cut the widget code line from the other sidebar and paste under the section for your new sidebar.

Ikkerg said...

I liked the idea of a third column, so I applied your step by step instructions to my blogger layout template (the "Denim") and I got my third column. The problem starts when I try to add page elements to that third column: I keep receiving an error message and I don't get any preview of my page until I remove the added element. What can I do?

vin said...

What is exact error message you get?
For detailed help use my email link in the left column.

MadCircle said...

Hi Vin,

I got my 3rd column up and running but my problem is that the template colour has now changed. I'm using Doug Bowman's simple minima black but after I edited everything and got the third column up, my background colour is now white.

I checked the template and everything seems to be in order still e.g... (I think it's here that the colours are defined anyway)

Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000"
Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc" test blog is

Got any ideas?

vin said...

Mad Circle,
In your test blog it is here :

body {

To change the color change ffffcc in above line. Also see :
CSS Tips and Tricks

Anonymous said...

I tried to copy the html for Minima from an old one I hadn't touched in a year or so, but when I paste it into the template for a new page, it tells me :
"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 content of elements must consist of well-formed character data or markup."

At the same time, the old one still works just fine, although I haven't tried making any changes or addind widgets, etc.

If I clear out all the coding in the sidebar, do you think it will let me do it then, and add the new widgets to replace all that stuff? That was part of what I wanted to keep, but I would be willing to give it a try if it would work.

vin said...

Susan C,
Do not paste old Html templates in the new layouts as they are incompatible as shown be your error message. What is your blog url? Use my email address in the left column.

Miriam Dictionary said...

greetings sir, i have learned a lot from your site, and share your link to those friends who have questions re blogging. i did make a third column, but can't align it on top

as u can see, the page element on the right is not in the proper place.. thanks in advance...

vin said...


Reduce padding-top here from 100px :

#rightsidebar {
padding-top: 100px; /* reduced from 170px of leftsidebar */

Miriam Dictionary said...

thank u so much! now i got it right!

P said...

Hi,I followed your steps and I think everything worked, but once in page elements I'm having a hard time moving the column where all my posts are to the middle column. Any suggestions?

Elizabeth said...

I am trying to install a new sidebar on my blog, but my new sidebar is on the same side as my original one (both on the right side). how to I change this so my new sidebar is on the left side?

my blog is at

vin said...

grubby scholar,
What is your blog url? Use my email address in left column for detailed help.

vin said...

Seems like you have sorted it out. I see two sidebars on either side of the posts column now.

Elizabeth said...


I did figure it out! Thankyou anyways! My next question is how I can have a bit more space between my left sidebar and my actual posts. On the right side there seems to be some space, but I am not sure how to make it like that on the left.

vin said...


Put this line :


in below code :

#rightsidebar-wrapper {

Use my email address in left column for more detailed help.

Madeline said...

Vin, just want to say that you rule. I have been intimidated to learn the new template and you made it so easy!

Anonymous said...

wow. in 20 minutes I added a column to the left side of my blog (tweaking some of the wording which is directed to creating a right sidebar) and now the whole page looks a lot more polished.

thanks for making it so simple!

z from

Aznewmom said...

Hi Vin and thanks for a great site.
I have followed your directions for the 3 column, and although my blogs are now wider, there are not three actual columns.
I'm guessing that because I began the process w/a sidebar already on the right, this may be the problem.

How can I get the actual 3 columns to show up? I'd like a wider column on the right, and a smaller, narrow column on the left w/posts in the center.

TIA for any help you can provide.

vin said...


What is your blog url? Use my email address in middle column for detailed help.

keSSen said...

hi! I tried this one and it perfectly worked in firefox. . Problem is, it doesn't work in IE. Please help. . .


vin said...


What is your blog url? My email address is in middle column for detailed help.

g said...

Hey Vin!

Awesome site you have!

After what seemed like an eternity, I was able to figure things out (I must be a bit thick).

Anywho, I learned a lot from this site, thanks to you!!!

I rave about your site to friends 'cause like I said, it's just awesome.

Thanks again and major kudos! :D

Cayman said...

Hi Vin,

I would like to send you BIG THANKS for your help and excellent tips on your site! Thank you! In 10 mins I have corrected my template and it works like a charm.


PS: My favourite movie is "The Godfather" as well :-)

TheMoedzila said...

THank for all the so useful...even a newbie could do it...thanks so much

Anonymous said...

Very cool post, exactly what I have been wanting to do! I can't wait to implement this on my blog. Thanks for sharing the info.

JRB said...

This looks very promising, but I have to scroll back & forth because your page is wider than my monitor. Is it difficult to make the page 100% of the window width, and the columns fixed or a % of the window width?

Peter L. Smith, Esq. said...

YOU ARE A GOD. I am the most non-techie person on the planet and I was able to follow your instructions and get that friggin' third column up perfectly. No hitches!!!!!

Thanks a trillion!!!

Minor question: my third column starts somewhat lower than my first two columns. Did I do something wrong?


AA said...

hi vin, im trying to add a third column but i have the same problem as elizabeth in the comments section (my blog is to the right) and i've been trying for hours to fix it but i'm new to this and lost...she fixed it herself but i could use some help! thank you!

BassFishingDem said...

Peter Smith,

To cut out that extra space, drop the padding-top number from 100px to 10 or 0px.


Thanks for all this. I had to decipher and modify some of this. I'm just glad I have experience working with frames and tables. Otherwise I might have a headache right now.

Astrid Arca,

If I read your post right, do as instructed above with the padding-right code (and maybe change it from 10 to 20) and also do your math and make sure rightsidebar-wrapper, main-wrapper, and any padding in between add up to the width you have in twocol.

Newbie blogger!! said...

Thanks for all your help.. this is an awesome blog. I used ur method for the right sidebar and it worked on internet explorer alright. But it doesnt work on firefox. Please help. my blog is

thanks in advance

vin said...


Reduce the width of your sidebars. See :

Newbie blogger!! said...


Thanks for your reply but it is Still not working... working fine on internet explorer but alters greatly on firefox.
Please visit the blog in firefox:

Also Is there anything else I can include in the blog??

I appreciate ur help.

Thanks and Regards,

Unknown said...

Hey I almost got it, but there's something I'm missing. I'm not able to add the text box. Also how can i keep the post content in the middle and the columns(bars) on both sides?

Please, take a look here:

vin said...


I can see your posts in the middle. Looks like you got it corrected! :-)

Angie's Recipes said...

hallo Vin

Thx for all this wonderful page. I have learnt a lot....

I have done with adding 3rd column after carefully reading through your tutorial....well...came across a few of minor problems, however, I got them right soon. Now I have still one small problem and I need your help again.
I have got 3 columns right on the page, but on the template, the newly added column and the main column are in their right places, just the original rightside column under the middle one. I have tried the trick padding-top: 100px; /* reduced from 170px of leftsidebar */ and it didn't come out right...

vin said...


What is your blog url? You can email me for any queries : drbhatns at gmail dot com.

Anonymous said...

Thank you very much for the tips on how to add a third column. I was wondering if you knew what we needed to do make the one column a different color than the others. For instance, I wanted to make my new left column a white or gray color, while the rest of my blog can remain another color. What code should I add to my template? Thank you!

vin said...


See how to change color of the columns here :

Wibs said...

I've tried to add a third column following this article to a blog; needless to say, I've failed miserably. I have no experience in code at all, and I don't know how to customize the code in the article to my personal page. I'm using the Minima Dark template; preferably, the width of the entire page should be kept the same, but with a third column to take up extra space.

vin said...


The easiest way is to load a three column template. There are many on the web, just Google for them.

Here is one :

sugar rush said...

i have some trouble with my blog here. i have implement all your steps to expand the blog and load the 3 columns but it didnt work. my blog background colour dissapeaar and the page elements are to the middle column. Any suggestions? thanks a lot

my blog url:

vin said...

Sugar rush,

The easiest way would be to load a three column template :

Anonymous said...

I got the 3 columns down, but I don't know how to place a gap between my left and main column (working from blogger layout 897). Any suggestions?

Clay said...

Well, I just figured out the spacing/margins problem, but now I want my main and sidebar to remain stationary (like the original 897 template). Right now, the right bar moves to the bottom if I slightly resize the browser window. I don't necessarily want my content to be "fluid" either. Any suggestions?

vin said...


If you have content - like a picture - which is wider than the columns width the template will distort at lesser resolutions :

SB Wine Advocate said...

Hi Vin, I tried this and got the third column. Unfortunately my left column just became a third header instead. so I lost my left column. I'm using the Minima Lefty Stretch with an added header thanks to you.

any Ideas how you add a third column with this template.

I reloaded my old template for my readers.

vin said...

SB Wine Advocate,

The easiest way to add a third column is to load a three column template :

Fluid width Three Column Template

Then customize it to look like your old blog template.

Valley said...

Thanks Vin That third column will open up a whole new world in the blogosphere.


Renée said...

I have just started a second blog and am using the "fluid 3 column" template. I would like to be able to use each column as blog postable, as opposed to using the "Page Elements" or widgets. How can I do this?

vin said...


You cannot put blog posts in each column as it is only one widget and cannot be divided.

DJ said...

I would like a sidebar on the left, the blog in the middle, and another sidebar on the right. How can I modify the Fluid Width Three Column Blog Template to accomplish this?

Thanks for all the wonderful information.

vin said...


You will have to define a twocol column as shown in the post above.

Then in the Fluid width template include the #sidebar-wrapperL and the #main-wrapper inside it.

Then float the sidebar left and the main wrapper right.

Jess said...

this is me:

Minko chan said...

Hi Vin,
I have a problem with the 3 col template (I have been at this for the past 3 nights). I think I got all the 3 columns up, but I cannot move content to the middle section. In addition, I would like my About Me (the page elements etc) on the 3rd-right column. I only wanted a photo on the 1st-left column. Can you give me some advice? I am not HTML trained sadly. Thanks a lot! My address is ""

vin said...

Minko Chan,

Try the easy method : Load a three column blog template and then customize the appearance to your liking :

Fluid Width Three Column Template

Minko chan said...

Hi Vin,
thanks for your advice. however my posts went to the left most and the sidebar becomes the 2nd and the 3rd column. Any help you could give me so that it becomes sidebar-posts-sidebar? thanks! *will further drill into the power of HTML*

vin said...

Minko Chan,

Can you email me for detailed help? The address is in the middle column.

Nate said...

Once again Vin, your blog has been an immense help. With a tiny bit of tweaking (padding) I now have 3 panels :) Thanks so much!

I've added this post to my StumbleUpon favs. I can't believe it wasn't at SU already!

Nate said...

Also Vin,
I'm wondering how I can move and stretch my posts and move the third panel to the right. It seems that increasing the main-wrapper size removes my left panel.
Thanks again!

vin said...


Thanks for the Stumble. Always create a test blog to install a major hack or template change. Then when it works you can reproduce it in your main blog.

Backup template before making any changes and after saving them.

Easiest method to make three columns is to load a three column template and then customize it :

Fluid Width Three Col. Template

Rounders Three Col. Template

Had a look at your blog but you had removed the modifications.

Unknown said...

hi I'm using a Thisaway Template I'm HAving hard time to increase & add 3rd column ..please help me...

pLS GIVE MY YOUR EMAIL ADD coz i cant access it thru this page... i want to send you my CODES so you can help me to edit it

this is my email ad: pls reply to this --

this is my blog:

Sonic Avenger said...

Hi Vin,
I want to add a 3rd column to my blog, and am trying to follow your instructions on how to do this.
Problem is, I can't find any references to the 'Outer Wrapper' (or indeed any wrapper) in my template code.
The template I'm using is a modified version of the 'K2 Black' template and is probably a little under 2 years old.
Is this possibly an HTML vs XML format issue or similar?
Any help would be most appreciated.

Vin said...

Sonic Avenger,

You have a Classic Template. The columns are named differently because it is also a custom made one.

Try adding temporary borders to your columns to 'see' them :

Tips to Customize Template

Anonymous said...

Many thanks Vin, much appreciated.

Anonymous said...

Hi again Vin,
Concerning adding a 3rd cloumn: As you pointed out, my blog is derived from a Classic template. I followed your advice and added temporary borders, which definitely help. However, there is considerable difference in the terms used (code wise) in the Classic template to the ones you use in your instructions.
Could you give instructions on how to add a third column in the Classic template?
Gotta say, your site is the best resource on the WWW.
Many thanks.

Vin said...

Sonic Avenger,

Will make a post on it soon.

Anonymous said...

Thanks in advance Vin.

AJ said...

Hi! added a 3d coloumn as per your instructions but somehow lost the ability to drag and drop widgets on the layout.
Any advise on this?
My blog -

Vin said...


What error message are you getting when you try to drag and drop the widgets? Where are you trying to drag them?

Anonymous said...

Hey, i've recently applied the third cloumn to my blog, and i have to praise you for excellent work og guidance. Everything works perfect so far, however i was hoping you could tell me if there is a way to right-align the sidebar title... thats all im missing to make my 3-column complete

Vin said...


Look for code in the CSS for the sidebar titles. Something like :

.sidebar .widget h2{
text-align: right;

Add above code if not present.

Anonymous said...

what i meant was to only make the rightsidebar-title right aligned but the leftsidebar-title i would like to stay left-aligned... sorry hope im not causing to much problems

Vin said...


For that you should have different classes for both your sidebars defined in the CSS. Then you can use :

.sidebarLeft .widget h2{
text-align: left;

.sidebarRight .widget h2{
text-align: right;

Depending on what are the actual sidebar names in the template.

Anonymous said...

Ah it ... your dedication is very much appreciated ..thnx!

epan36 said...

Thax for your blogging tip.
i've download your 3 column template, and try different tricks you have displayed, please take a look of this:
my question here is which padding or margin should i change so that I can shorten the distance between blog archive label and the edge of the sidebar on the right side.
also if there's way to change the name of blog instead recreate another one, i.e change

thanx again for your informative advice.

Vin said...


Look for :



.sidbar h2

in the CSS part of the template. If you change blog address you have to resubmit again to all search engines.

JakeC said...

Hi Vin,
This idea is something I've been thinking of for a little while, so it's great to have something to work with rather than thrashing about blindly with the code. One small question before I commit myself, though: Is it possible, instead of using pixels, to define the blog width in percent to deal with window resizing? I know you've created a very nice fluid three-column template, but I think I know just about enough HTML not to worry about changing my entire blog set-up. Any thoughts?
Thanks for the great tip.

Vin said...


There are some advantages to fluid templates like they adopt to every resolution. If you want to have background images in template go for the fixed (pixels) width.

All depends on how many resolution type monitors your blog is being viewed. This figure you can get through Google Analytics.

Your content also matters. Large pictures/links can drop the sidebar in fixed width templates.

twoseventy said...

I have had the 3 column rounders up and running for awhile now and was wondering if there was a way to add more of the page element boxes in the columns. I do not want to be stuck to the two element on each side. Things start to look cramped adding multiple elements in one box. Any help would be great.

Vin said...

Kelly & Josh,

Just click on 'Add Page Element' link at the top of each column to add more page elements :

How to Add Widgets to your Blog.

twoseventy said...

Hi Vin,
I think what josh meant to say is, how do you add more SIDEBAR BOXES so instead of just two boxes on each side of the blog with several page elements in each, there is 1 sidebar box for EACH page element. We haven't been able to find anything on the web explaining how to do this for a 3 column rounders 3 template.


Vin said...

Kelly and Josh,

The Rounders Template has two boxes on each side of the blog. If you want you can delete the code for one of them so that only one box appears on each side.

If you want spaced out multiple elements in one box that can be done by adding 'padding' or margin lines for the widgets.

If you add more page elements in one box they expand downwards and each page element has the same height which does not decrease if you add more. Adding more does not cramp up as the blog can expand lengthwise as much as you want.

Try adding more and if it looks cramped send me the link so I will take a look.

twoseventy said...

I don't want to delete a side box...I want to add more so that each widget/page element has a separate box.

Vin said...

Kelly & Josh,

You need to completely restyle the sidebar to show as stacked boxes of widgets. You can email me directly for more details at :

drbhatns at gmail dot com

mabillionaire said...

where would you put that coding at?

Vin said...


Can you give more details of what your problem is? So we can help you better.

Igor Omerbegovic said...

Hi Vin,
I made it all work perfectly fine, however the right sidebar is too wide. Now i did reduce it in size but than it is way off to the right, and i need to be aligned closer to the main post area. If you could get me a pointer as to how to set the margins i'd really appriciate it.
url is:
thanks man

Igor Omerbegovic said...

heh sorry for double posting, but i forgot to ask how do put the blue text background behind the new side bar, this one seems to be directly on the dotted/main background,
thanks again!

Vin said...

Igor "Haesuse" Omerbegovic,

In this code :

#rightsidebar-wrapper {
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 */

Try adding this line :


Preview and save. For the background add this line :

background:url("") 150px -50px;

Preview and save template.

Igor Omerbegovic said...

thank you sir, that worked perfectly fine. and since i am already here i was wondering if you have a post explaining how to add a gallery to the blog, or even a thumbnail preview/mini gallery to the blog!
i couldnt find any in the search, so i would really appriciate some help. thanks in advance again, vin!

Vin said...

Igor "Haesuse" Omerbegovic,

Have a look at Thumbnail albums for Blogger.

Emanuele said...

Great Post Vin! I was able to build a third column in a different template (no. 897 to be precise) than the one you have used as an example (without any sort of technical knowledge whatsoever). Thanks a million!

TheSmellyArmpit said...

HI! This is great information but unfortunately I am not great at html. Could you help? I tried adding the above code but then my blog had just one column and it listed my posts firsts and then my side stuff. Anyway pointers?

Vin said...

Daddy and Mommy Magee,

Hi! Try adding a Third column in Three simple steps.

It is simpler.

Kuangji said...

Hi, thanks for sharing the tips of adding a third column in a blog. However, I'm having a little problem following the steps. I got stuck at the "Implementing the columns in the body" section.

The problem is mainly that upon adding the html codes you provided, the blog orientation is "spoilt". The original rightside bar i had was pushed to the bottom of all my posts. Also, the posts were located to the leftmost side. Can I actually put them in the middle? Thanks.

Vin said...


Perhaps Three Column Template in Three Steps. will help you better.

Anonymous said...

Firstly, thanks for your third column post, it's a great idea.

Unfortunately I'm having one small problem I was hoping maybe you can solve. Upon implementing the thid column code, my background image for the page disappears completely (however the part where I installed the image for the corner page area works just fine). I tried using your "Three Column Template in Three Steps" and the same thing happened. I used the code you provided elsewhere in your site to display the image... background-image: url(LINK);
background-repeat: repeat;

I'm using blogger's denim template (non-stretch version).

I would appreciate it greatly if you can solve this one for me as it's been giving me a big headache. I promise to tip as well :)

Vin said...


What is the blog address? Where is this background image?

Anonymous said...

Hi Vin,

Thanks for your response.

The image is just a very small thumbnail (light brown square image) you can see it on my site. It only comes out in the top header and not on the rest of the page. (It worked just fine before adding the 3rd column code).

I pasted my template's html on the site itseelf, my test site is:

Thanks again for any help

Vin said...


Is it the orange image? Have you added it to the body code in the CSS?

Anonymous said...
i own a 3rd column but i can'y put anything there!
is it because i choosed this particular template?

i do not want anything else (template)

thankz for all the tips

your student ...

Vin said...


I will need to see your template. You can send it by email. The address is in the middle column.

Pushhyarag2000 said...

I could do everything except getting my left side bar to the left of posts column. So, I reverted to saved template & stopped at increasing the blog width. When I try the next steps to define & implement on the template, it fails.
Can you help this out for my

Vin said...


Try this faster method of putting up Three Columns in Three Steps.

Pushhyarag2000 said...

Hi Vin,

I finally got the sidebarL-posts-sidebarR layout right at right, following your help.

One nasty issue stays to annoy me: there are black, triangular edges at the corners of Header Image (re sized now), posts column & right side bar. How to get rid of them? View my site. Do you have to look at the template as well?


Vin said...


Those are the images which make the rounded corners. You have to resize them to the new width.

See how I did it in making the three column Rounders template.

ifra said...

hi! with ure help, i managed to get the three columns. Thankyou! =)

now, the trouble is that i would like my posts column to be a bit wider, and the third column to be smaller. like my default sidebar. please help, because my new sidebar is VERRY wide =S and my posts column got smaller.

my blog is:

Vin said...


Have a look at How to change width of blog?

GrahamCEO said...

Hey Vin,

I am concerned because my blog is adding everything properly, except the new column for whatever reason is above the middle posts and sidebar.

I changed the formatting so that posts and whatnot would be in the middle and sidebars on either side of it...if that makes a difference.

Vin said...


Add a third column in three simple steps.

kakashihatake2 said...

How To Add A Third Column In The Template Below

Vin said...

Anime Lover,

For specialized templates it is better to ask the designer for permission as copyright issues may be involved.

The basic principles remain the same :

1. Increase overall blog width by same amount as the new column width.

2. Define the new column in the CSS.

3. Add the column code in the <body> part of the template.

4. Resize graphics (if any) to match the new width. Upload them to a freehost and replace their links in the CSS with new links.

ms. teacakes said...

Ok. so I did everything that was explained and I now have my third column and my widgets there as well.

The only issue i have is that my third column starts a bit lower than my left column.

I noticed this when I was moving widgets on my "page element" page. Now, on my blog the left hand column starts normal, then the center is my posts, and the right hand column starts 3-4 inches below the top of the page.

What do I do to fix that, so my left and right columns are at the same height?

Vin said...


What is the blog address?

ms. teacakes said...

thank you v. much!

Anonymous said...

hi..i have a blog with some posts already on it.i use a minima template.i would like to add a third column without this affecting my posts and gadgets that are already here!! how to do that..i tried to use the three steps method but each time i add a gadget it displays it in a yellow background though mine is black!! what is the problem!! help me please my blog is

Vin said...


See How to Customize Templates for instructions to remove background color of a column.

Anonymous said...

I'm using the Harbour template, and would like to add the 3rd column, but this is way beyond my capiblities. Can you not just post the whole code so I can just copy it and be done with it?

Vin said...


That would surely take the fun out of it! :-)

Howdy said...

I just wanted to thank you so much for this amazing site. You have saved me hours of confusion and work.
Thanks for sharing your knowledge!

H said...

Hello Vin, what an amazing post!

But I also had the same problem as Caroline... my new right column is lower than the rest. I followed your instructions, but did it on a Minima Lefty Stretch... Anyway u can think of to correct that?

Thank you so much!

Vin said...


Decrease this padding in the template :

#rightsidebar {
padding-top: 100px; /* reduced from 170px of leftsidebar */

H said...

Vin, thank you so much!! Will definitely suggest your blog to all!

God Bless!

Insider-Insights said...

Hi thanks for this tip..but can you check my center column seemed to be too close to my left column hope you could help... thanks.

Vin said...


Give temporary borders to your columns so you can easily adjust margin for each column in the CSS.

~Lori Roop said...

Can I copy and paste your codes in my template?

Vin said...

~Lori (loree2000 SCS),

Which codes?

Basanta said...

Vin, I am a fan of your blog. I changed my two columns minima blog into three columns with help from this blog. It is working well.
Now the main column in in the middle. How can I shift into left?

Vin said...


First add a Float:left parameter to posts column in the CSS.

Then in the <body> part of the code put the code for the posts column at the beginning.

Basanta said...

Thank you Vin. I will try.

Busted Mind said...

thanks for this nice info! appreciated a lot

sirish kumar said...

Thanks for the post. I got it but the 3rd column is coming at the top of post two times & it is fixed. Please look at my blog and Help Me.

Thanks in advance.

Betty Manousos said...

Hi Vin,

I have a Blogger Minima Stretch Template with one Main Column where I write my posts, and one sidebar on the right. (of the main column.)
I've been trying so hard to create another sidebar on the left of the Main Column for a long, long time, but I've always messed up.

I really need your help.
Would you please write all the steps of doing so, and help me out.
thank you so much for your time.


w-singh said...

found more about insert column to blogger on the net..

this is well described.


spanish for kids said...

Wow, nice post,there are many person searching about that now they will find enough resources by your post.Thank you for sharing to us.Please one more post about that.. Kids will catch on to the language almost as quickly as they catch on with other things.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.