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

46 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

Anonymous

June 19, 2008

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.

Anonymous

June 20, 2008

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...

Anonymous

May 09, 2009

thank you ...

Anonymous

June 04, 2009

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

Thanks you sir..

Hello,Thanks for the guideline :)
I still face problems after COPY the way taught..

@Globalrank
what problem are you having ?

Hi Lawny,
It written like this
"Widgets are to be deleted"and
"The new widget id "BlogAchieve1" is invalid for type: Blog"

May i what should i do next?Please guide me,Thanks:)
(iblogger-z.blogspot.com)

@Globalrank
the tutorial doesn't include editing the widgets you may of edited the wrong code

hello... i have tried many times to save this...

everytime i try save it after all the edits it does not let me and I get this WRONG ERROR CODE:

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

CAN YOU HELP ME??!!!!!!!

What should I do to fix this???

Thank you

@French Novelty
sounds like you have deleted one of the variable declaration's at the top of the template try restoring it

I followed your instructions step by step, but Blogger's giving me messages that says certain elements aren't closed. I've managed to fix some of them, but I can't find one--and I've been running it through the find feature on Notepad++. The original template is working fine, but the modified isn't. Help!

@Liberty
what error messages are you getting ?

@Lawny,

Actually, after retrying the procedures about 3 or 4 different times, and thanks to use of Notepad++, I managed to get it to work, and now my blog looks beautiful! :) Thanks!

(The messages I was getting were that elements: head, div, div id, and others didn't have a corresponding close mark. Apparently, the template I chose was just complex enough I either wasn't going far enough or going too far when selecting the chunks of elements I needed to insert/modify.)

@Liberty
Glad you managed to solve it

I currently have a 3 column blog. I really want a 4 column blog- I can't figure out how to convert. Can you take a look for me(if you get a chance)?

http://www.savingsmakescents.com/

I love your tutorials- I have already used 2 successfully- thanks for that!

@Tosha
since you are using a different template from the ones described in my tutorials i cannot help you unless you want to hire me

Thanks Lawny. I was finally able to adapt it after studying your instructions for several hours.

Again, thank you so much for this website, your tutorials are the easiest to implement that I have found so far.

@Tosha
looks good glad you was able to do it yourself

Great Tutorial!!!
TNKS, and greetins from an argentinian new blogger

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2019 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger