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”
Anonymous
December 04, 2007Well, thanks for your post. I'll have to try this and will give you then some feedback.
Didik Wicaksono
December 04, 2007Hey 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
December 11, 2007Hi,
Thank you so much,can you show us how to make the sidebar in frame or rounded.
Unknown
December 17, 2007Thanks for this man! Your instructions are so clear...
Jaxter
December 22, 2007hey thanks
question: what about my widgets? they will gone or what?
Anonymous
December 23, 2007Hey 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
January 01, 2008Agrigatou Gozaimasu! Thank you! Cám ơn
WildnFit
January 30, 2008Wow, thanks for this tips an so glad to find your site. I will sure try this tip.
Thanks
Colin
March 18, 2008Very 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
March 18, 2008Thanks Colin for letting me know about the tutorial images ive sorted it now
Superjanne
April 16, 2008hello 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
SuperJanne
April 20, 2008Hello!
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
Anonymous
April 29, 2008Hi 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, 2008My 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, 2008It 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.
Patrick J Patten
October 26, 2008how do you take the far right column and split that into two columns?
Imdad
December 17, 2008Very 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
December 17, 2008@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
www.russiaexport.org
December 28, 2008Thanks A LOT! It worked greatly! Testing it and going to use soon on my main blog.
Lawny
December 28, 2008@www.russiaexport.org
good luck
USArchos
February 08, 2009I 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
February 08, 2009@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
February 28, 2009http://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
February 28, 2009@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
Hoarders Extraordinaire
March 18, 2009I'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
March 19, 2009@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
April 28, 2009I just did this with my blog and it worked beautifully. Thanks for the great info!
LORNA
May 04, 2009Thank 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, 2009thank you ...
Anonymous
June 04, 2009HI,
Thank You.I've tried it and i did get 4 column blogger template.
Good Job
Ankit
June 18, 2009Thanks you sir..
Redcap
August 31, 2009Hello,Thanks for the guideline :)
I still face problems after COPY the way taught..
Lawny
September 01, 2009@Globalrank
what problem are you having ?
Redcap
September 02, 2009Hi 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)
Lawny
September 04, 2009@Globalrank
the tutorial doesn't include editing the widgets you may of edited the wrong code
French Novelty
September 14, 2009hello... 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
Lawny
September 15, 2009@French Novelty
sounds like you have deleted one of the variable declaration's at the top of the template try restoring it
Unknown
September 21, 2009I 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!
Lawny
September 24, 2009@Liberty
what error messages are you getting ?
Unknown
September 24, 2009@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.)
Lawny
September 25, 2009@Liberty
Glad you managed to solve it
T
November 01, 2009I 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!
Lawny
November 02, 2009@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
T
November 02, 2009Thanks 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.
Lawny
November 02, 2009@Tosha
looks good glad you was able to do it yourself
-
January 23, 2010Great 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.