Three Column Template in Three Steps. ~ The Blog Doctor.
Loading...

Three Column Template in Three Steps.

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

Three column templates are popular because they make more use of the screen real estate. Adding another column to your blog enables you to add more widgets or advertisements to your blog.


In this post I will show you how to transform your blog into a three column blog in three simple steps. Have a look at the before and after screenshots below :


--->
BEFOREAFTER


To demonstrate this I have taken the Minima Dark Template of Blogger. I have shown the columns using colors to demonstrate them better...........


FIRST : INCREASE BLOG WIDTH


The first step is to increase the width of the blog. To do this follow these steps :


1. Login at Blogger.com.


2. The Blogger Dashboard page opens on successful login.


3. Click the Layout link under your blog title.


4. The Page Elements subtab of Layout tab will open.


5. Click the Edit Html subtab of Layout tab.


6. The Template Code box page will open. Scroll down in the box to this code :

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


Increase '660px' in the width line in the above code to '880px' and save template. We have increased the width of the outer-wrapper so that it will accommodate a third column. Since we want the second sidebar to have the same dimensions we have increased the width by the same width - 220px - as that of the original sidebar. This is how it looks now :


The outer-wrapper is the red column containing the main posts column (blue) and the yellow original sidebar. Space has now been created to add a third column.


SECOND : ADD THE CSS CODE.


Now that we have created space for the third column we need to define it in the template. This is done by adding code to the CSS part of the template. We want the new column to be exactly like the original sidebar on the right. We want it to be on the left og the posts column. So we add this code between <b:skin><![CDATA[ and ]]></b:skin> tags in the template :

#sidebar-wrapperL {
width: 220px;
float: $startSide;
background:#ffff00;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


This is the same code as the original sidebar. To differentiate it we have added a 'L' after 'sidebar-wrapper'. It has the same width. Since we want it to be on the left of the posts column we have changed the float property to be '$startside'.


Since Blogger has enabled support for bidirectional languages the float:left and float:right have been replaced by $startSide and $endSide respectively.


Save template.




THIRD : ADD CODE IN THE PAGE BODY.


Lastly we need to add the code for the new sidebar in the <body> part of the template. Since it has to be the left of the posts column this code will come before it. Scroll down and paste this code :

<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>


immediately above this line in the template :

<div id='main-wrapper'>

I have added two Html widgets to the code as examples. Preview and save template. You can change the background color of the columns if you want to. This is the final result :




Enjoy!!

You can also make a Three column Classic Template.

157 comments:

tomat said...

Hi, Vin. I've been using a three column template since several months, following similar instructions from your blog and others, but since a pair of weeks I've begun to have problems with the layout page to modify the design of the blog: there is no horizontal bar and I cannot access the third column widgets in the right. It happens only with FF but it works ok from IE.

¿Is there any other thing we should change to make the layout page works?

Thanks. Javier

Vin said...

Tomat,

Have a look at :

Fix the Page Elements Layout Editor.

tomat said...

Thanks, Vin. I hadn't seen that other post.

Alex Lee said...

Hi, I find that the left column and the main content are too close.

Is it because the main column also floats from $startSide?
How do I solve this problem?

Vin said...

Alex Lee,

Add the margin line to the code for the main column like this :

#main-wrapper {
width: 410px;
float: $startSide;
margin-left:15px;
...

logo design said...

Hi Vin,

I liked the three column template post. I'm not good in handling blogger beta templates but would like to learn. Thanks for the useful post.

Ronn

Thanos said...

Hey Vin, i followed your instructions to add a third column but in the end, the third column was not added and i just had a space between the original sidebar and the main-wrapper...can u tell me where exactly i should paste the CSS code?
Thnx!!

Vin said...

Thanos,

Put temporary borders on your columns to visualize them better.

Jenaisle said...

Wow, I am dumb but I was able to follow, thanks for the step by step procedure. Visit my blog too at http:www.clinchemtrivia.blogspot.com

Jenaisle said...

I followed the procedure for the three column template but I can't post on the middle column and a text appears at the top most portion which is supposed to be in the html layout. If you would be kind enough to visit my site so you can see what is wrong.
http://www.clinchempicturemia.blogspot.com
I thank you for doing this for free as I don't have budget for this.

Vin said...

Jenaisle,

Delete this text :

#sidebar-wrapperL {
width: 220px;
float: $startSide;
background:#ffff00;
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 */
}

after this tag in Template Code box :

]]></b:skin>

Fixated said...

Help! I changed my template to 3 columm but when I edit my layout the left side is yellow instead of the original black...
what am i doing wrong

Jenaisle said...

Thanks, the text was gone , but how can I post in the middle column? It seems they all go to the left column no matter how much space I add.

Vin said...

Fixated,

Try Clearing the Cache.

Vin said...

Jenaisle,

Easiest method is to load a three column template and then customize it.

Mikolka said...

Hello!
Thank you very much for your step by step hint. It is so handy!
As for Fixated, I think his/her problem is that he/she did not remove the 00 in the second step, after the 3 f (background line).
Thank you again

Ana said...

Hello,

First, thank you for your blog, its amazing!

Second, I feel like an idiot, lol. I can't figure out where exactly the code for the left column goes. You say to put it

" between b:skin CDATA and b:skin tags in the template"

But...where between those tags does it go. Above what, below what. There are a lot of things in between those two tags (in my template, anyway).
Help!!

Thanks,
Ana

Vin said...

Ana,

Paste the CSS code shown in the second step immediately above this tag :

]]></b:skin>

in the Template Code box.

~sjts said...

Hi Vin,

This is my third attempt to leave a comment/question. Here goes...I followed the instructions on the three step column and it worked great. No other sites or information was as easy to follow or did not come up with error messages.

However, in the example you have your columns go green, blue, yellow which is exactly how I want mine to go. But, it turned out blue, green, yellow. And the green and yellow columns are too close together. How do I fix these two problems, at least, they are problems to me. If you want to see what I am referring to I am a somethingjusttostart.blogspot.com

Vin said...

~sjts,

If you mean your sidebars are too close to each other put a padding-left line here :

#sidebar-wrapper {
padding-left:10px;
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 */
}

Increase width of outer-wrapper by same amount - 10px.

~sjts said...

Thank you for the help, but you did not address the first part of my question regarding moving the columns around. I used color examples based on your example.

But, basically I want my post section (column one), swapped with the profile column (column two). Just like in your example.

Vin said...

~sjts,

In the <body> sectin of the template put the code for the profile column before the code for the posts column. It will work provided both have a float:$startside or float:left property.

~sjts said...

Thanks again Vin. I did what you said and changed both to float:'left property'. The profile column is now able to move where I want it, but the Blogs are now below the profile section. What next.

Vin said...

~sjts,

I see this code in your page source :

#sidebar-wrapperL {
padding-left:10px;
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 */
}

Use Firefox browser!

Threeundertwo said...

Oooh! I'm old, and a complete idiot but I was able to figure this out! Thanks for the clear explanation.

ruffdeezy said...

I just added the third column successfully, but not when google indexes my pages, it shows the text in the left column on not the text from posts. How do i fix this?

Vin said...

Ruffdeezy,

What is the blog address?
Where did you see the text in the left column being indexed by Google?

ruffdeezy said...

Hey,
my blog address is
http://www.iphoneuser.ca

it indexes the text from the left column now where i have my labels
http://www.google.ca/search?hl=en&q=site%3Awww.iphoneuser.ca&meta=

one other thing, on the page layout editor, i have the blog posts box in the middle, but it creates a second blog posts box in the bottom of the right column, even though it doesn't show that on the actual page.

thanks for your help.

Vin said...

Ruffdeezy,

The search robots start indexing from the top of the page. Since the left column usually comes first in the code it is indexed first. That is why my posts column is the leftmost column.

To see exactly which of your posts is indexed add blog to Google Webmaster Tools.

Can you give the link to a screenshot since we cannot see your Layout editor.

Staci said...

i followed all the steps, did everything the way you said and i get the error

Invalid variable declaration in page skin: Variable is used but not defined. Input: startSide


what does this mean?

Vin said...

Staci,

Look for '$startSide' in your Template Code box and replace it with 'left'.

Eudaemonius said...

Hey Vin,

I have used your tips and most of it has worked out great for adding the thirs column. I am very exicted! I have been rackingm y brain trying to figure out what is wrong with my column 2 and 3 where they seem to be over lapping. Can you take a peek at bluemarblebounty.blogspot.com and give me a clue as to how to not have them over lapping? Would really appreciate it. I think it is most likely pretty simple. Thanks Eudaemonius

Vin said...

Eudaemonius,

Add some dummy text to Html widgets in your left column so you can see it. Also add temporary borders to columns to see exactly where they start and end.

To separate the columns add a margin-right line like this :

#main-wrapper {
width: 410px;
margin-right:10px;
...
}

Remember to increase width of outer-wrapper by same amount as extra margin.

Ally0005 said...

I've tried all afternoon ( which I really don't have that much time to mess with this) trying to get the third side bar on my blog.
i finally created a new blog in case I messed up.
I never could get the thrid side bar on my blog but when i went to my new blog and did what you said it worked.
So what is up with my old bolg, do you think is a classic blog. I have layout on there.

Vin said...

ally0005,

What is your blog address?

Beautiful Events said...

I did follow the instructions to add the 3rd column and also borders to define it but is still not working. Can you plsss take look at the source code

www.beautifulevents.blogspot.com

Thanks

Vin said...

Beautiful events,

You have pasted the sidebar-wrapperL code immediately above :

body {
background:#447288;
border:#ff0000 15px solid;
margin:0;
....
}

That is the CSS part of the template. It should go inside the <body> at the appropriate place.

See Step 3 in the above post.

Nichole Jolene said...

Thanks SO MUCH! secrets revealed. I can finally have space to type instead of empty space on both sides of my columns. SWEET! Keep up your helpful work~

Bhargav said...

hi....i did as u said ....i was succesful but the right column and left column came side by side....i want the post section to come into middle....can u help me plzzz....
my address is "www.iare-ece.blogspot.com"

Vin said...

Bhargav,

I can see the posts section. It is in the middle. Try clearing the cache.

Bhargav said...

hey vin,thanx for replying me so early...i hhave some silly doubts dont mind!!!
1)when i post something i dont want to get the whole post in the same page...i want it to be cut shorted and want to have a small link down to "read more"...how can i do that?
2)i got the menu bar in my blog...its good....but i want to post in that certain label....how shud i do it?cant i post them directly?or if i have to post first in the main blog..can i hide that posts?
3)and i also want to enlarge my page...i want my sidebar to be increased...i am not much acquainted to HTML but if u give any code i can do that.....

plzz try to give the reply!!
thank you!!!

Vin said...

Bhargav,

Have a look at
Expandable Post Summaries.

Have a look at
Everything About Labels.

To not show posts on Main Page backdate them. See
How to Change Post Order?

Have a look at
How to Change width of blog?

Bhargav said...

hey vin,thank you once again....i tried the form builder...for registration....i want to have a neat and complete procedure....can i have my blog as a website...i.e., "sign in" and "register"....i tired that but i was confusing,.,,,can u provide some easy procedure.....???

Vin said...

Bhargav,

Have a look at Moving from subdomain to your own domain in Blogger.

Αρκούρης said...

thanx a lot! Even tho i'm totally clueless when it comes to HTML languages and all, i think i've done it beautifully thanx to you! You're a genie :)

Bhargav said...

HEY VIN,check my blog....
www.iare-ece.blogspot.com
what should i do if i want to increase the width of left column and decrease the width of the right column...not touching the width of the middle posts column...orelse...please give some measurements such that my blog looks good and not congested....even i want borders between each column....how can i do that...please give a direct html code...

Vin said...

Bhargav,

Have a look at How to Change width of Blog? and

How to Customize the Blogger Template?

Purple and Paisley said...

vin, help! i added a 3rd column and it worked but my left sidebar is butted up against my main body...my right sidebar is fine - there is space in between it and my main body...can you help me? thanks in advance...

Purple and Paisley said...

omg, i'm an idiot...i went and read thru the comments and someone else had this problem and you told her how to solve it and it worked for me, too...sorry about that...

one other question - can i put boxes around my sidebars and mainbody so i can have a decorated background that will not show through them? i bet if i hunt through you site, i'll find this answer as well, huh? sorry...

Vin said...

Purple and Paisley,

You can use the Rounders Three Column Template Mod.

Purple and Paisley said...

vin - thank you for getting back to me...i know you are busy...i'm afraid to try the rounder template because i have everything almost the way i want it...is there a way to add a vertical line on both sides of the main body to seperate it from the sidebars? can you look at my blog...www.purpleandpaisley.blogspot.com thank you so much

Angie said...

hallo Vin,
After I clicked to view TOC, 3 columns stay at the same height, but the TOC got wild, you know...so much longer than the outterwrapper itself....
Is there a way I can fix it?
Thx!
Angie

Vin said...

Angie,

What is the blog address?

Jennifer said...

Awesome! Thank you! This worked like a charm.

Cush said...

Hi

My outer wrapper is already 745 can i still make 3 columns or not really?

THanks for your help

Vin said...

Cush,

Sure, you can! You can also increase blog width.

If necessary you can try a Fluid width Three Column Template which resizes according to monitor resolution/width.

takis49 said...

Hi vin!! I v tried to follow all your instructions,+ i read your answers to the comments to try to solve my prob but i can't get it done,, my template is not an original template from blogger so i can't find all the same codes which you described!! Could you please have a look at my blog webpetition.blogspot.com and let me know if there is a way for me to solve that matter!!

Cheers!!

Vin said...

Takis49,

Your template is not correct. I can see template code at the top of your blog page.

Suggest you load a blogger template turn it into three columns and then modify it to look like the template you want.

Sandy-Kun said...

Hi Vin...
I've the same Problem with TOMAT...

The new sidebar was go down to the bottom and it get slower when we use Opera browser and IE... How can it be fixed??How can that happen??

Help me please....

Vin said...

Sandy-Kun,

Have a look at Why my sidebar keeps falling down?

Sandy-Kun said...

But It seemed that the problem is not that...

It just Opera and IE that unable to view my page perfectly...And it slowed down.. Very slow...

Vin said...

Sandy-Kun,

There are many graphics in your blog which may be slowing down the blog. See How to Speed up Blog Loading?

adubtheengineer said...

Hey Vin! :-]

I tried your code and it seems that my blogger is putting a page element on top, of the blog posts, can you please take a look at my blog at DoubleAStudios.com, I cant seem to get that left sidebar to appear on the left of the blog posts instead of how it is now on top of the blog posts, so I can drop gadgets in it.

Thanks in advance!!

A.Dub

Vin said...

adubtheengineer,

On top of your posts is the menubar.

Pavithra Kodical said...

Hi Vin...thank you for responding to my question.It worked!

adubtheengineer said...

Hey Everything worked out nicely after I learned how to adjust the margins, thanks alot Vin! I had one question though, My blog post were appearing lower than usual, and It seems that when the share (gray) box of a post begins only where the end of the sidebar begins, How can I fix this so I can add more widgets to the sidebar. With the first post not exceding where the end of the sidebar left off. Thanks in advance Vin!

A.Dub

Vin said...

adubtheengineer,

The grey box is your post footer. It is there in every post. It is not related to sidebar.

adubtheengineer said...

Then Y does it begin lower then the sidebar, it is like they are connected..

Vin said...

adubtheengineer,

Which browser (and version) are you using?

adubtheengineer said...

FireFox 3

Vin said...

adubtheengineer,

I am using Firefox 3 and I can't see the problem.

Can you provide the link of a screenshot picture with red arrows pointing to the problem?

adubtheengineer said...

Hi I'm having trouble with the screen shot, but if you go to my blog and click a "topic" you can see more how the footer of the post is dragged to start beginning pairelle of the end of the left sidebar. If u still need a screen shot how can I get it to you I have no paint or photoshop on this pc.

Vin said...

adubtheengineer,

The posts column will extend depending upon the length of your post.

I looked at your "Get Free Loan Quotes..." post and the post footer is much lower down than the end of the left sidebar.

Lisa from Blush said...

Hi Vin,
you are such a great resource! Thanks so much! I used my test blog to add a third column and it worked like a charm. However, when I attempted to add the third column to my primary blog (www.blushevents.blogspot.com), first of all I got an error saying I couldn't use the "smartside" (is that right?) I scrolled through the Q+A and learned I had to insert "left" instead. Done. Then, when I tried to paste the next code I get this error "More than one widget was found with id: HTML7. Widget IDs should be unique." Please help! What am I doing wrong? Thanks so much, Lisa

Vin said...

Lisa from Blush,

In the Unexpanded Widgets Template Code box look for id of widgets. For example :

<b:widget id='HTML7'....

There will be two lines containing 'HTML7'. In one line change it to 'HTML70' and save template.

Lisa from Blush said...

Hi Vin,
worked like a charm. Thanks again!

pfge said...

I followed your instructions to make left sidebar. I got one problem. I want to set all background color as #666666, but the left sidebar showed white color below the Adsense. I tried to clear the cache. It didn't work.

Could you help me to have a look at my blogsite "http://pfge-pfge.blogspot.com/"? Thanks.

Vin said...

pfge,

Customize the code for the Adsense widget after login to your account at Adsense site. Then paste adsense code in a Html gadget.

Mary said...

My new third column appears at the top of my blog, just under the header. I've redone your process three times, step-by-step and don't know what else to try. If you look at my blog, the two empty widgets you added will not show up, of course, but you will see the space where the post column has moved to the left. Anything I put in the empty widgets show up at the top. What do I need to do to move this new column over to the left where it belongs? Thank you for your help!

Vin said...

Mary,

Can you send me the template? The email address is in middle column.

oyen said...

Hey! Can you teach us how to create a common header for the two side bars?

Vin said...

Oyen,

Please give more details. Perhaps the link of a page where you saw this will help.

Living for life said...

Hi Vin

i managed to set up the three columns on my blog and added a post yesterday and moved stuff around in the page elements. When I clicked preview in the page elemenets everything was there including my post form the 16th Ocotber.

However i have opened my blog this morning it and it is still the old template displaying and no new post from the 16th October.

However I logged back in and when into the elements page and clicked preview and could see the three column tempalte with the post from the 16th.

What am I doing wrong?
Thanks

Vin said...

Living for life,

Try clearing browser cache.

managersblog said...

I finally got the third column but for some reason everything in the new column is yellow?? I tried refreshing the cache like you told someone else but it didn't work. Do you have any other suggestions?

Vin said...

managersblog,

I am not seeing a third column at all right now! Maybe you removed it?

sieggy said...

hello, vin!

greetings from the philippines! question, i want to have a 2 column blog wherein the main blog is much wider than the sidebar (for links, profile, etc.) how do i insert it to my html template? here is my blog: www.russieg102508.blogspot.com

i can send you my template, if u want. i tried everything but nothing seems to work out.

Vin said...

sieggy,

One easy method is to go to Layout---->Pick New Template and choose a Stretch template and save.

SysterLilli said...

Hi Vin,
I must say that I love you, your tutorials and tips! ;)
I have managed to add two columns so now I have a four column blogg (in Swedish). One column is just for the design. I will give you cred when I´m done, be so sure.
Thank you so very much! :)
Now I will continue to fix the layout so it will be as I like it to be. And I surley will return to you for help. :)
Once again thank you!

Marta said...

Thanks for the easy instructions! I was about to give up when I found your blog.

Candy said...

Hi Vin,

First off, thank you! This worked wonderfully. I've been fiddling around and everything looks great, but the only problem I have is that the pictures I put on my right sidebar come out smaller than the ones I put on the right, despite the fact that I've set their widths to the same size and the pictures are resizing to the same width as well. Do you have any idea what's up and how to fix it?

My blog:

http://candysbadjapanese.blogspot.com/

Vin said...

Candy,

At the moment I do not see any pictures in your blog!

DirtDigger (Tessa) said...

Vin,

I guess I'm keeping you busy, huh?

Recently, using code from another site (before finding yours!) I made my 3 column template wider, and put the post section on the far left. It looks right on my wide screen laptop, my 19" screen, and a smaller 15" screen in both FF and IE. On my friends widescreen 19" screen it didn't look right. The middle sidebar column went under the far right sidebar column, in IE.

Can I make it fluid? should i backtrack and remove the other code and use yours? or?

I also have a problem with the page element screen and scrollbars- i read your post on that, but can't use it because i didn't use your directions making my template wider in the first place.

suggestions?

Tessa

Vin said...

DirtDigger (Tessa),

The most frequent reason for one sidebar dropping is that the total width (outer-wrapper) is less than the sum of all the column widths padding and margins!

The second most frequent reason is that a div tag is not closed.

If you want a three column Fluid template click here.

Srinivas Raman said...

hi vin,
i followed ur trik to add third column its working
but the problem is the column bground is in yellow color n my template is in black color
Even i tried clearing cache step
plz help me

Vin said...

Srinivas Raman,

Change this :

background:#ffff00;

TO :

background:#ffffff;

Christina said...

Hi Vin, I don't remember how I surfed into your wonderful website but I remember thinking what an amazing service you provide! I've finally found a template that has everything I want which includes 2 sidebars - one on each side. I read through each comment to find a solution to my problem but didn't see one.

If it's not too much trouble, I would greatly appreciate it if you could instruct me on how I can move the left sidebar to the right so that both sidebars are on the right. My blog address: http://smellsstrongerthanusual.blogspot.com

Thank you, Vin!

Linda said...

He Vin,

I followed your instructions, but the second sidebar wont's go the left (same problem like Thanos I think, only a big space between the right sidebar and the postingarea).
When I put in the HTM code for the second sidebar and I give it a different color or a border, this doesn't show either.

I put:

#sidebar-wrapperL {
width: 220px;
float: $startSide;
background:#ffff00;
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 */
}

under the existing sidebar-wrapper.

Help?!

Vin said...

Christina,

Since it is a Custom template request the template designer.

Basically in the <body> section the code for the posts section should come first and then the code for the sidebars. Also the columns should be floated to the left.

Experiment with this template on a test blog before working on the main blog.

Vin said...

Linda,

Experiment on a test blog first. What is your test blog address?

Linda said...

Hey Vin,

Thanks, but I already got it !!

Name: Mr Mohammed S Rashid said...

Hi Vin,

I am unable to change the colour on the new column that i have made. Any suggestions on how to get round this problem.

http://walesophthalmology.blogspot.com

thanks in advance

M Rashid

Vin said...

Name: Mr Mohammed S Rashid,

Have a look at How to Customize the Blogger Template?

MainaT said...

Hi Vin,

Tx for your help.
I followed your instructions but found that the new column is on the right of my "posts" section instead of the left as I wanted it to be.
Please help:
www.mjengakenga.blogspot.com

Vin said...

MainaT,

I am getting this message when I go to that address :

"Sorry, the blog you were looking for does not exist. However, the name mjengakenga is available to register! "

MainaT said...

Sorry vin- spellcheck

www.mjengakenya.blogspot.com

Thanks

Vin said...

MainaT,

It is better if the posts column is to the left as it is the first to be crawled by the search engines.

beautifulcurare said...

Vin,

Thanks so much for this post! I'm new to blogging and I am, slowly but surely, trying to get my blog to look the way I see it in my mind. Thanks to you, I now have a left side bar. I was trying to figure out how to do this and then I found this post. Your blog is a great reference guide! Thanks again!

-Tiffany

Edris said...

Vin,
My post area is too large and my 3rd column starts underneath it. Can you help me. http://www.creativesewl.blogspot.com

Vin said...

Edris,

Have a look at Why the sidebar keeps falling down?

lil songbird mama said...

I thought the explaination was very simple....however, the 2nd part of this code said to put code in between b:skin!CDATA and b:skin

I do not have the 2nd part

could you please advise?
Thanks!

Vin said...

lil songbird mama,

Do a CTRL+F (Edit----->Find) from browser menu.

lil songbird mama said...

ok...totally found it...
next prob....1st part of code is at beg of html.....2nd part is at bottom
Where in between am I supposed to add this code? I've tried several different places.....??
Thanks for your help!

Vin said...

lil songbird mama,

You can add the CSS part of the code anywhere between the two skin tags.

lil songbird mama said...

Hey Vin,

the following is an error message I seem to keep getting...

Please correct the error below, and submit your template again.

Invalid variable declaration in page skin:
Variable is used but not defined. Input: startSide

I've tried entering left for startside....nothing seems to work??
TIA

Vin said...

lil songbird mama,

Delete this line in template :

<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" value="left">

and also replace all 'startSide' in template code box with 'left'.

rae said...

Thank you for this post. It was immensely helpful.

Margie said...

Hi, I'm having problems with the three column template. Please tell me what I'm doing wrong.

My blog is:
http://ourjourneybacktocolorado.blogspot.com/

Thanks for your help!

Vin said...

Margie,

Do it on a test blog first. When you have all the steps correct repeat on Main blog.

Melisa said...

Your site is very helpful. I used the your instructions for Three Column Template in 3 steps. I am having a problem with my left column (the new one) is very close to my blog posts. Is there a way to fix this? I seem to only have the problem on the new column. Thanks again

Vin said...

Melisa,

Give temporary borders to your columns to see their limits exactly. Then increase the padding or margin numbers in the CSS part of the template.

Increase the width of the outer wrapper by same amount to fit the increase in padding or margin.

Meaghan said...

This is absolutely amazing-- I can't thank you enough! You made this so easy. Even learning the most basic codes and how to use them makes me extremely happy. Thank you for allowing me to expand my creativity.

I'll definitely reference you.

Marie said...

i haven't been able to do it completly, it didn't work out for me, at some point my right column went down under my main column. I would have loved to do it though:(

Marie (i precise i'm not a native english speaker, that could be the problem yet i understand english pretty well usually :)

Vin said...

Marie,

Do it on a test blog first. Then when you are successful simply download the template and upload it to your main blog.

the lp's said...

I recently added a third column to my blog. I have created another blog for practice purpose and again created a third column. But I just realized my first set of instructions were not from your site. Both methods worked, but I find your site is easiest to understand. I am going to try and overwrite the current instructions in my keeper blog with yours. I have yet another question, but I need to get this done first.

Will and Natalie Giddens said...

Vin,
I know you've answered this question a few times, but I canNOT get it to work. Here's the error message I'm receiving:

Invalid variable declaration in page skin: Variable is used but not defined. Input: startSide

The problem? All of my "floats" in the Outer Wrapper already say $startSide;

What is wrong?

Vin said...

Will and Natalie Giddens,

Replace '$startSide' with 'left'.

Will and Natalie Giddens said...

Vin,
I did that and now this is the error message I receive:

Invalid variable declaration in page skin: Variable is used but not defined. Input: leftSide

Vin said...

Will and Natalie Giddens,

Look in your template for the line having 'leftSide' and delete it.

Cami said...

OMG! It actually worked!
Im so happy! Thnks so much u are a great person =)

Leyda said...

Can we modify the templates (directly in HTML as described here) that Blogger has and still have Layout page elements?

Vin said...

Leyda,

Above instructions are for Layout Templates.

The Keeper Of Odd Knowledge (KOOK) said...

Your site is a wealth of info.

I have tried messing with virtually anything that I could think of, but I cannot get this three column thing to work. Left column is good, middle column is good. Right Column drops below posts and footer gadget area. I have moved things around, deleted pictures, narrowed all three columns to less than the value of the total width, and nothing.
Your assistance would be great.

Vin said...

The Keeper Of Odd Knowledge (KOOK),

Do it in a test blog first. Give your columns temporary borders so that you can see them.

vibi said...

I can't believe I finally succeeded at something I had been trying to do for over a year now! I'm amazed, thanks Vin!

Oops, yeah... I have a wee prob though, there is no space beetween my new left sidebar and my main text space. Easy to fix???

Vin said...

Vibi,

Add temporary borders to the columns and then play around with the padding numbers for the columns.

Ida said...

Hi Vin,

I've followed all yr instruction but can't get it right.Whenever i want to save the changes, this will appeared:
Invalid variable declaration in page skin:Variable is used but not define.Input:startside.

pls help.

my blog are http://solovelycollection.blogspot.com

Vin said...

Ida,

When you get that error message do a Ctrl+F in the template code box and look for 'Input:startside' and delete it.

Melissa said...

Thank you so much! I spent all day revamping my blog. I never could have done it without your simple instructions.

Two questions:

First, is there anyways to make the columns (especially the one on the right) further away from my main column? Right now I feel like the writing almost looks like it runs into each other.

Second, any suggestions for free programs that make great headers!?

http://www.duolynoted.com/

Vin said...

Melissa,

You have to experiment with the margin and/or padding settings in the CSS code.

You can make a header in any free image editing program like GIMP, Paint, Irfanview etc. Just Google for them.

e-swastya said...

Hey ,
Added exactly how you said the three coloumns but i have a problem the yellow colour stays on my left column how to change that
http://e-swastya.blogspot.com

Vin said...

e-swastya,

Change this in the code :

background:#ffff00;

TO :

background:#ffffff;

Lynne said...

I've tried for three hours now to change my blog to three columns. I've succeeded in making the margins bigger to add room for a third column, but when I view it in Layout, the Add a Gadget is under the header. Please advise, and thanks in advance!!

www.lynnesletters.com

Lynne said...

By the way, I would love it if you could show me how to move the new column to the left of my main posts, so that I have a sidebar on each side of the main column. Help? :)

www.lynnesletters.com

Vin said...

Lynne,

Do this on a test blog first :

First change the sidebar code to float:left.

Secondly in the <body> part of the code add the code for the sidebar BEFORE the code for the POSTS COLUMN.

Krista Joy said...

Vin,

Thanks for your directions for adding a third column! I used them to successfully add a third column. However, I have a few problems. First of all, all three columns only fill about 2/3 of the space. How can I make it wider so it fills the whole screen? Also, there is not space between my first two columns and I'd like the two to be separated at least a little. I'd really appreciate your help. Thanks!!

If you need to have a look, my blog is: http://kristajoyonline.blogspot.com/

Vin said...

Krista Joy,

Check out How to Increase blog width?Increase the left-margin or left-padding of the columns to separate them. Practice on a test blog first. Give borders to columns so you can see them clearly.

Greg Polla / A.M. Kisly said...

Thanks for all the info. Your instructions are clear and easy to follow, but I'm getting an error message after the paste in of step three.
Error message:
More than one section was found with id: sidebar2. Section IDs should be unique.
What do I do to correct this?
A.M. Kisly
cocoabelle@frontier.com

Vin said...

Greg Polla / A.M. Kisly,

Look for :

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

and in it change '2' to '3'.

Deddy Irawan said...

Completely Right. You have great skill.
Thanks.
Nice to meet you :)

Anonymous said...

I tried to add a right side column for the Scribe template, but the code was a little different than in your 3 step desription. Is there a different approach to use for this template, or am I just missing something?

Vin said...

Anonymous,

Exactly what code did you change and to what?

Brad Theodore said...

Vin,

I'm trying to adjust the color of the left side bar to match the color of the right side bar.It's obvious that
I don't know what I'm doing please help.

Doyouburntoast.blogspot.com

Big Wheelhouse said...

I'm a complete novice at all this, and you've already been an incredible wealth of info - your tips for expandable posts are fantastic - so thanks, retroactively, for that.
The three columns show up great on my page elements, but on my test blog (junkyardblues.blogspot.com) the postings graph continues to show up far-left column, with empty space in the middle. I went through your steps a few times, and still no joy (also tried clearing cache and was bamboozled by the Fluid width three-column template).
Any help in getting for getting my postings to display center column would be appreciated.
Thanks,

N said...

Hello,
THIS WAS EXTREAMLY HELPFUL :)
except Im using the minima and the new left side bar is not the same as the right side bar, for example the dotted line below the added gadget is connected to the main post not like the right side bar where the dotted line is just below the added gadeget w/o connecting to the main post

My gadget is a picture and its is to the far left not in the middle of the sife bar also unline the right bar

Help!!!

Sheila said...

Thanks so much for all the good info you have on this site. I happily have added a third column to my blog. Thanks to you and those who added comments. It all helped.

Business logo design said...

That's what i was looking for. I will definitely share it with others.Thanks and keep up the good work!

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

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,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.