
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”
Well, thanks for your post. I'll have to try this and will give you then some feedback.
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 :)
Hi,
Thank you so much,can you show us how to make the sidebar in frame or rounded.
Thanks for this man! Your instructions are so clear...
hey thanks
question: what about my widgets? they will gone or what?
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
Agrigatou Gozaimasu! Thank you! Cám ơn
Wow, thanks for this tips an so glad to find your site. I will sure try this tip.
Thanks
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.
Thanks Colin for letting me know about the tutorial images ive sorted it now
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
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
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
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.
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.
how do you take the far right column and split that into two columns?
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
@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.
@www.russiaexport.org
good luck
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
@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;
}
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..
@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
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
@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
I just did this with my blog and it worked beautifully. Thanks for the great info!
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...
thank you ...
HI,
Thank You.I've tried it and i did get 4 column blogger template.
Good Job
Thanks you sir..
Leave a response