How to make a 4 column blogger template

In this tutorial we will be making a 4 column blogger template based on a two column originally designed by Douglas Bowman so i recommend you create a new blog for this tutorial using the following template



Now we have our template we need to find the header-wrapper CSS code and change the width from 660px to 100% or 990px like ive done below



Now we have that done we need to look for the outer-wrapper code and change the width from 660px to 990px and the padding from 10px to 0 like ive done in the following screenshot



Now find the main-wrapper and change it from 410px to 450px unless you want your main post body to stay 410px wide also ive added a margin of 20px



Now im going to rename the sidebar-wrapper to left-column and change the width to 170px and the float to left because it is going to be a left column although you dont have to rename it but it helps see screenshot below



Now we have that done we need to change the XHTML code for the column so find the following XHTML code and change the name from sidebar-wrapper to left-column also move it above the main-wrapper see screenshot below (click the image for a larger view)



Now that is done we add the CSS code for our new columns so copy the following CSS code



#rightsidebar-left {
margin:0 0 0 10px;
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


#rightsidebar-right {
width: 120px;
float: right;
word-wrap: break-word;
overflow: hidden;
}



and paste it just below the left-column CSS code like ive done below



Now copy the following XHTML code




<div id='rightsidebar-left'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>


<div id='rightsidebar-right'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</div>



and paste it just after the main-wrapper like ive done below



Save your template if you followed this tutorial right your page elements should look like mine below 4 columns althought if you preview the template you will not see them until you put widgets in them i hope you enjoyed this tutorial. Click Here to see my final results


31 Responses to “How to make a 4 column blogger template”

wilbau said...

Well, thanks for your post. I'll have to try this and will give you then some feedback.

Didik Wicaksono said...

Hey nice tips! I'm going to use it if I want to make other blog :) I'll give you a credit and let you know about it :)

Anonymous said...

Hi,
Thank you so much,can you show us how to make the sidebar in frame or rounded.

Jaz said...

Thanks for this man! Your instructions are so clear...

Jaxter said...

hey thanks
question: what about my widgets? they will gone or what?

Anonymous said...

Hey there I am a newbie blogger, I am having so much trouble with trying to create this.

Any way you can just add a link and we can all just download a template

much appreciate it :) Wendy

Eagle8x said...

Agrigatou Gozaimasu! Thank you! Cám ơn

Dblog said...

Wow, thanks for this tips an so glad to find your site. I will sure try this tip.
Thanks

Colin said...

Very pleased I found this. I have been looking for a workable 4 column for ages. The photo of "from this to this" xhtml is unreadable.

Lawny said...

Thanks Colin for letting me know about the tutorial images ive sorted it now

Superjanne said...

hello from Norway!

i give this up! is it possible you could mail me this done so i can cut and paste it?

Jane

www.superjanne.com

Janne said...

Hello!

i cant semms to get this right! if its possible you can mail med the 4 column ? please ! i have try this so many times, i have 3 column no i did, but this 4 was to difficult! :(

please mail me!

LOVE Jane

www.superjanne.com

Viperion said...

Hi there.

First of all let me congratulate you for this hands-on tutorial. It is BY FAR the most interactive I've ever found.

I'm currently using a template I downloaded somewhere (I don't remember where did I DL it :S) and it obviously doesn't have the same code patterns as the ones you're explaining, but I tried to fix the same elements you explain here.

For example. My template already has its only sidebar located to the left, so I skipped that step (I don't know if I'm making myself clear).

The thing is: when I finished following the steps I found out I had messed my blog up BADLY so I just used my backup .xml file and restored it back to normal.

My question is:

Could I e-mail you my template's html code and then could you specify WHERE should I use the steps of this tutorial, or if I should use some other stuff or something?

I just want it to have at least one more sidebar to the right and use the unused space it has at the very left as for making room at the right side.

If I can't make it a 4-column one a 3-column one would be just fine.

my blog's url is: viperion.blogspot.com (so you can see what I want to do).

My e-mail is: viperion444@gmail.com

I'll wait for your reply. If you decide you have a bit of time to help me with this thingy I'll be extremely grateful :)

Thanks for all.

Viperion

John said...

My problem is that I do not know where to paste some items because I do not see the same wording in my minima template. My minima template does not say anywhere left hand column.

John said...

It must be that the wording on the minima template has changed in a few minor ways, because I have tried over and over to follow your instructions to no avail. The wording and symbols on my original minima template are not exactly like those in your pictures.

But I learned a lot in trying and appreciate very much your efforts.

One problem with so many 3 and 4 column templates, as I see it, is that the resulting column(s) are not wide enough.

Handride said...

how do you take the far right column and split that into two columns?

Imdad said...

Very informative, thanks a lot.

I need a whit background with four or five columns only....is it possible to make it?

like this one...http://www.it-echo.com/

plz assist me to make or plz send me the code like that......great of you and thanks

Imdad

Lawny said...

@lmdad
What do you mean four or five columns only ? do you mean without the main post section ? it is possible to create any kind of layout on blogger

Thanks A LOT! It worked greatly! Testing it and going to use soon on my main blog.

Lawny said...

@www.russiaexport.org
good luck

USArchos said...

I have followed this how-to exactly and my blog is putting the left column sidebar below the header and across all 4-columns. I have looked at your example template source code to mine and cannot find a problem. Any ideas? Mine was based on the minima black. http://www.usarchos.com

Lawny said...

@USArchos
after i looked in your code i noticed you have spelt the #left-column wrong in the css look for

#left-columnm {
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

change it to

#left-column {
width: 200px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

also the other code you have like

#page-top {
width: 1200
min-height: 385px;
background: url("http://www.blogger.usarchos.com/images/page_top.jpg") no-repeat;
}

the width rule should have a semicolon at the end like

#page-top {
width: 1200;
min-height: 385px;
background: url("http://www.blogger.usarchos.com/images/page_top.jpg") no-repeat;
}

pmma2003 said...

http://ptcguidefordummies.blogspot.com/

hello I can't seem to figure out why the post element on my blog keeps going into the left side bar..could you please help me out..

Lawny said...

@pmma2003
Hi i looked at your blog and it looks like you have the post widget in the left column thats why it is showing there

Marta said...

I'd like to convert this to two posting columns on the left with a sidebar on the right...I can't find that in a 3 column and thought maybe this could be converted to that, but I'm not sure how to do it...

2 equal width columns on the left and then a right sidebar

any ideas?
http://martasmeanderings.blogspot.com

Lawny said...

@Marta
you could convert it yes but it would be easier to create one from scratch however it would include writing another tutorial showing you how to create one which i can't promise you

AJ said...

I just did this with my blog and it worked beautifully. Thanks for the great info!

LORNA said...

Thank You. I've tried it and although I am not an expert, I did get 4 column blogger template now. Please check my blogspot > http://lornagarden.blogspot.com titled My Garden. (Ihave two blogs)...I'm still learning...

Anonymous said...

thank you ...

Anonymous said...

HI,
Thank You.I've tried it and i did get 4 column blogger template.
Good Job

Ankit said...

Thanks you sir..