Spread the Word

Site Feed



Powered by FeedBlitz

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Thursday, February 09, 2006

Build a Three-Column Blogger Template!

Update: need a widget-friendly version of this template for New Blogger? See this post.

Some time back, in writing about the many template hacks this blog has undergone, I promised to share how Random Bytes morphed into three columns from the original two-column Minima design created by Doug Bowman. The volume of queries on this topic in my stats tells me that a lot of other Blogger users want this flexibility.

Fortunately, it isn't hard. Switching the default two-column layout to three requires a few modifications to your template. Here's how to proceed:


  1. First, back up your current template, just in case anything goes wrong. I usually just copy it to a Notepad file on my desktop. (Open the Template tab, click inside the template area, press Control+A to select the entire document, and Control+C to copy; then switch to Notepad, press Control+V to paste the document, and Save.)
  2. Go back to your Blogger template and scroll to the embedded stylesheet at the top. Add a new style to format the left-hand column. Mine looks like this:
    #SidebarLeft {
    position:relative;
    width: 20%;
    padding-right:.5%;
    float:left;
    margin-left:.5%;
    clear: none;
    text-align: left;
    }
  3. Locate the HTML part of the document. To create a left-hand column, as in this blog, open the SidebarLeft div (type <div id="SidebarLeft">) immediately after the <div id="content"> tag. Put a closing </div> before the Main div. This partitions off the left 20% of the screen for a sidebar — now you can put any content you like between this pair of divs. In this blog, I have placed the Archives on the left, along with categories, popular posts, and RSS feed icons. (Note: If you are using another template, the style names may differ, but the same principles apply.)
  4. Return to the top of the template and tweak the other main content styles to accommodate the new design element. You'll need to make the central text area narrower and set its left and right margins to auto. You may also need to reduce the width of the existing right-hand column. Experiment with width, padding, and borders of the styles until you have a design that works. Here are the settings I used for this blog:
    #content {
    width:78%;
    margin-top:15px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding:0;
    text-align:left;
    }
    #main {
    width:53.5%;
    float:left;
    padding-left:1.5%;
    padding-right:1%;
    border-left:1px dashed #ccc;
    border-right:1px dashed #ccc;
    }
    #sidebar {
    width:19.5%;
    float:right;
    margin-right:.5%;
    padding-left:.5%;
    }
  5. Optional: There may be other styles based on the original Sidebar style that format elements within a column. In Doug Bowman's Minima template, for example, the #Sidebar style is specified with three contextual selectors (ul, li, and p). These control the formatting of bullets and paragraphs in the sidebars. If you want similar formatting for the other side of the screen, locate and clone these styles under the #SidebarLeft designation, as follows:

    #SidebarLeft ul {
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    border-bottom:1px dashed #ccc;
    list-style:none;
    }
    #SidebarLeft li {
    margin:0;
    padding:0 0 .25em 15px;
    text-indent:-15px;
    line-height:1.5em;
    }
    #SidebarLeft p {
    color:#666;
    line-height:1.5em;
    }

  6. Save your template changes and preview your blog. If you're satisfied, re-publish and share your handiwork with the world!

I have provided the complete template here, in case you have problems making the changes described above. Just open the link, view the source code, and save to your desktop or copy and paste into your Blogger template, after deleting the existing code. (Warning: doing this will undo any customization you have done, so you may want to backup first.)

Hope this works for you. If you find these solutions helpful, please consider linking to Random Bytes and sign up for our feed to be sure to receive new articles promptly.

96 comments:

slyght said...

i have NO idea about HTML. i'm working in a remote part of india and bought a book to mess withthe code i had for minima. after much rookie trial-and-error, troubleshooting and checking source code on other sites, i got an idea of how to do exactly this, only i did it in pixels, rather than percent. i'm guessing percent would be better as it adjusts to others screen size. i'll have to go back and fix that soon. this is a great site and i appreciate the tips. thanks.

zac
http://slyght.blogspot.com

Pam said...

Thanks for the feedback. You're bang on about pixels vs. percent. There's quite a debate raging about fixed (px) vs. fluid (%, em) design. I prefer the latter because it provides a better experience for the user (IMHO). Content flows to fit available space. Fonts scale, etc.

Some designers prefer the precision of fixed design, which lets you maintain control of line lengths, font size, and proximity of page elements. The problem here is that you're forced to commit to a specific screen resolution, which not all users share. This results in either horizontal scrolling or large areas of wasted white space.

Wally Banners said...

Pam You have smile that melts my black heart!:)

Cathie said...

wow, thank you for this. i've been trying to put a third column on my site for awhile.

cheers.

Ron said...

Thank you for this helpful info. Im new to CSS and Ive been trying to do a three column template for over a day now with no luck. Until I saw your blog this morning and bam! there she was, simple beauty. Id also like to ask permission to put a link of your site on my blog via my "Blog Friends" list at

http://paperkraft.blogspot.com

Once again, thank you and have a warm day.

Pam said...

Hi Ron. Glad I could help. A link to Random Bytes would be much appreciated, as would credit for the 3-column layout.

(BTW, if others are going to use the template I provide here, it would help us both stand out if you make small changes (i.e. fonts, borders, backgrounds, etc.), so our blogs look less alike.

Thanks for your interest :-)
Pam

Anonymous said...

Hi Pam.
Why is the right column displayed uncorrectly (too "deep") in Internet explorer? In Opera or Firefox is all right.

Ron said...

Thank you for the advice, Im slowly inching towards a new look on my site.
I hope you have a lovely and wonderful day.



Happy Valentine's Day,
Ron

Anonymous said...

My problem is now solved.

This blog is very useful, Pam.
Thank you.

SportsBiz said...

Pam,
Your template seems to work great and I'm very thankful as I've been trying to recast my blog into a three column for some time. I've been working on a changeover using yours as a base and I've run into a couple of mysterious problems. For one thing, the blog title has disappeared, although the subhead is still there. For another, no buttons will appear although all the code appears intact. I'm at a loss at how to fix either problem.

Pam said...

Hey Mark,
I'm sorry you're having trouble. Without seeing what you've done (your blog right now is 2 columns), it's hard to say what's wrong. I know the template is working fine for other people.

The only thing I can think of is that you've accidentally moved a comment tag, which could make things seem to disappear. Did you tweak the original template yourself, as per the steps in this post? Try downloading mine from here.

Anyone else have any ideas?

Pam

Pam said...

Glad it's working for you, Darren, and thanks for the link.

Re Blogger categories, this is a thorny issue. I have tried a number of solutions and am using Labelr to get the categories you see here now. It has some nice features, but also some drawbacks (i.e. you can't link to a category).

Best thing to do is follow my post history on this topic back to the start, and see what works best for you.

Good luck,
Pam

Bharat Suneja said...

Hi Pam,

I spent a lot of time picking up another 3-column implimentation of Minima and merging the tags I like from the original Minima into it, but after a good part of the day was spent on it, the result was close to what I wanted, but not quite.

I would have had to spend another few hours on a Friday night or through the weekend to make it look even closer to what I wanted, but knowing well enough it'll never look as great as the original Minima template on Blogger.

Luckily I came across your blog after doing another few Google searches and found this template, and it works very well!! I was able to make minor modifications to it and also added Categories, et al.

You have a great blog - full of many useful tips & tricks to do many of the things I want to get done this weekend!

Thanks for maintaining this blog - you rock!

Cheers!
Bharat Suneja

Pam said...

Hey Bharat. Glad I could help. Your blog looks great!
Pam

Vincent said...

Hi, first of all, thanks a lot for the 3 column template !
One question though. The left column is 'stuck' to the middle column unlike the right column.
So now the bottom-line is connecting to the middle frame
Do you know how to fix this?

Pam said...

Hi Vince,
I'm not sure I understand the problem. Your blog looks fine to me, in both IE and Firefox.
If you're referring to the uneven padding on the left- and right-hand sidebars, just experiment a bit with the padding and/or margin settings for those styles.

Anonymous said...

hey, i used your template! it rocked out loud! but i have one question...under some of the things in my sidebars (like the links and archives...basically all of the original stuff) I have the border, and I would like to have the border under every different item in my sidebar...i noticed you do, but i can't seem to figure it out. can you please fill me in! thanks!

Pam said...

Hey Katie. Thanks for the great feedback. Glad it works for you. To place a separator between the sidebar sections, I just added a 1 px dotted line to the style for the UL tag, which Blogger uses for the sidebar contents. All you need to do is open your template, find the section you want to have an underline for, and add opening and closing UL tags. The line should appear when you save your changes and re-publish. Let me know if you have a problem.

Anonymous said...

Pam! You are a life saver! thank you so much! Thanks to you my blog is at it's best!

Pam said...

No problema :-)

giordano bruno said...

thanks for this 3col template
I wonder about the unused real-estate on the Left of the Left sidebar.
How to shrink that?
I need all the space, because I often put big images in the Main, which bleed UNDER the Right sidebar, so I want to move L & M leftwards a bit.

Craftybernie said...

Thank you so much about providing this clear concise explanation about how to make a 3 column template. It has been really useful. I still have to change some things around on my blog and will post it to my live blog soon, but I wanted to say thanks in the meantime. Your help is much appreciated!

Pam said...

Giordano, the easiest way to take advantage of the white space on either side of the screen is to increase the default width of the main container div in the template, then re-allocate the extra space among the left, center, and right-hand columns as desired.

You'll need to increase the header and footer widths as well, to retain the layout balance.

Pam said...

Thanks for your kind words Craftybernie.

Muselab said...

Sweet article, just what I needed. Thanks!

Bill Cammack said...

Thanks for posting this, Pam. :D

I'm sure you saved me HOURS of trial & error.

Cheers!

Pam said...

Bill and John:

No problem. Glad I could help :-)

Anonymous said...

Thanks for the info. I have tried multiple times, with no success, do a 3 column blog and now I did it with ease. I can't seem to get my posts to show at the top of the page (between my two new sidebars) though. If you could look at it (http://standingagainst.blogspot.com) or have any tips to resolve this it would be very much appreciated.

grandmaster shogun papafern said...

hi, i tried to find the words in my template but i cant find them. i guess its different because we have different template styles. can u please help me out if u can. i have thisaway rose. my blog is big-pinkin.blogspot.com and my email is big.pinkin@gmail.com . thank so much

point 23 said...

Miss Blackstone,

I've been trying to add a third column to my blog for some time now and have been unable to do it. I was wondering if perhaps you could help. I erased any changes I made regarding the three-column format because 1) I was frustrated out of my mind and 2) my handiwork would probably only slow down the process.

I was wondering if the code doesn't work because I use a different template than Minima? (I use Rounders 2.)

Any help or direction you could provide would be a Godsend. Thank you in advance and hopefully I hear from you soon.

My blog is: http://www.point23.blogspot.com/ and my e-mail is deuce23trey@hotmail.com

Thanks again!

Pam said...

Keith, your problem is probably due to IE's faulty implementation of CSS. I suspect that your middle column is too wide, when borders and padding are added. I blogged about this issue recently. See my post here for some possible fixes.

Pam said...

Big Pinkin, afraid I can't offer much help. These instructions are for the Minima template, which I use for this blog. You'd have to look for equivalent tags and styles in your template. Suggest you save a backup copy first, then just experiment until you discover which styles/tags correspond to those I talk about here. Alternatively, you could try googling on "three columns" plus the name of your template. Sorry not to be more help.

Charlie said...

Pam, this was extremely helpful and surprisingly simple. Thanks so much for posting it.

Pam said...

No problem Charlie. Glad to help.

poncrinator said...

Thanks for the three-column instructions. They have worked fine and I'm extremely pleased with the result. For your reference, here it is:
http://colchester1.blogspot.com

Chris said...

I can't seem to get the three column code to work for me. It messed up the formatting of my page. I'd like to get a third column on the far right hand side to place my AdSense skyscraper ad into. Can you please take a look at my blog and let me know what you recommend?
http://chrisjacobson.blogspot.com

Pam said...

Glad it worked for you, Poncrinator. I like what you did with the layout :-)

Pam said...

Chris, sorry the tweak doesn't work too well, though I'm not surprised. This hack is based on the Minima template. You are using another Blogger template, so you'd have to make major alterations. The best thing I can suggest is look for a three-column layout specific to your template, or try modifying mine. You would need to adjust column widths, margins, and/or padding. Try some of the strategies suggested in this post.

Anonymous said...

Thanks so much for this. I have wanted a third column for a while, but didn't know how. I do have a problem, though. I just copy and pasted the template over the old minima to see what it could look like in a new blog I'm creating, and my header/blog title was no where to be found. Do you know why this might have happened. I would give you the link, but I didnt want to save the changes, yet.

Pam said...

Glad to help!

Pam said...

Robyn, sorry you're having trouble. Without seeing the new blog, it's hard to say what could be happening. Maybe try copying and pasting the relevant header bit of code back from your old template to the new one?

AEW said...

I found this all very useful. I had to do alot of tweaking with the width of the content and sidebars but I eventually got it to work.

Tembihname said...

thank u soo much its very helpful.

have a good day pam :)

Bruno said...

thx so much for this explanation :)
i'll try this on my blog.

Dimes said...

Wow, thanks for this! I'll be dinkering with it for awhile, but you've provided a really good start. Thank you so much :-)

Mobly said...

You're my hero-er heroine. FYI, if you haven't hear about Grazr yet, you should check it out. It lets you neatly organize RSS, or OPML feeds. I made my bloglines feed subscriptions public. After that I went to the public page to view them(in this case www.bloglines.com/public/iienglish)then copied the link location for 'export subscriptions' and used that when I made my Grazr widget. Now, whenever I update my bloglines subscriptions or make any changes, it gets updated live in my widget(on my own blogger blog). It's really great. you can see my example at http://emergencytrap.blogspot.com
thanks again for the 3 column help. I love it!

Pam said...

Glad to help, folks!

Pam said...

Thanks for the feedback, IIE, and the tip about Grazr. I'll check it out!

Pam said...

Hi biogastoliquids. The problem you're describing has to do with IE's notorious wrong implementation of the CSS box model. There are some workarounds for it in this post.

Hope this helps.

Pastor Mark Brand said...

Thanks for posting this step-by-step explanation, Pam. I just upgraded one of my blogs (http://hillcrestchurch.blogspot.com) to three-columns, thanks to your help and posted a link to your site.

Anonymous said...

Okay - I'm a Blogging newbie. I am using Blogger. I tried to cut and paste the html I saw in the sourcecode for your three column template ( http://www.weblens.org/3-col.txt ) and when I paste it into my blog I get the following error:

We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

I'm so embarrassed as I'm sure it's a really simple thing I'm screwing up but your help would be appreciated.

I just subscribed to your Blog - it's very well done. I started my career as a journalist and eventually became a web designer. Now I'm trying to create Blogs to keep up with the 21st century (gotta love "Who Moved My Cheese"

thanks

Pam said...

Thanks for the kind feedback, Mark, and for the link :-)

Pam said...

Hi Nancy,

You don't provide the address of your blog, and without seeing your code, I'm guessing. But it sounds to me like you have pasted the code into the wrong place in your template, or somehow broken the XML/HTML/CSS that's contained in the original template.

The error message you cite makes me suspect that you may have pasted my code into the middle of a tag or style, or accidentally deleted opening or closing XML characters in the process of pasting (such as a < or $).

Also, this template is intended for Blogger blogs. If you are using some other tool, like WordPress, my template won't work.

Best approach is just to try again. Always back up your template first, before experimenting. Sorry not to be of more help.

Anonymous said...

Hi Pam - It is a Blogger Blog www.bocaratonblog.com thanks!

Pam said...

Hi Nancy,

The template normally works just fine. I know of no reason you'd be having this problem, other than the possibilities I described above. The only thing I can suggest is that you try again. Make sure you copy all the code (maybe last time you missed some), and be sure to back up your old template first, before replacing it with the three-column one.

Let me know how it turns out.

Anonymous said...

I erased EVERYTHING that was in my template and replaced it top to bottom with your code - still the message: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup

I'm a little (okay a lot!) frustrated!

Pam said...

Nancy,
Are you using the new Blogger or the old Blogger? I'm honestly stumped as to why this is happening, unless there's some problem with the new Blogger. I haven't tried it yet there, though I plan to switch some time soon.

Anonymous said...

The new Blogger
;-(

Anonymous said...

Anyone - any help at all out there! ?

Anonymous said...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

Pam said...

Nancy and Jessica,
I'm sorry the template doesn't work with the new Blogger, and I have no idea why it's screwing up.

I will be creating a new version for the new Blogger, but won't get to this for at least a week, as I am swamped with work right now.

If you're in a real hurry, I suggest you try Googling 3-column templates, adding the phrase "new Blogger". Maybe someone else has already done it.

Good luck.

Anonymous said...

Very nice..i've been looking for 3-column template, then i found this...its really cool..
Im going to make a bit modification before putting it to my blog.

http://tweak-everything.blogspot.com

Anonymous said...

Finally! I wanted to add a third column for ages and with your help I finally succeeded!!!! Thanks!

E'l Roy said...

Great site and tutorials, Pam! I just found your blog a couple days ago, looking for 3-column Blogger templates, and I've spent the last few hours trying to give it my own look.

I pretty pleased with what I've done so far (I have zero experience with CSS and not much more with HTML), but one thing has me stumped. Everything looks fine when I view it offline, but in Blogger, my stat counter and banner at the bottom of the page were missing; and on the right-sidebar, a couple items were missing there, too.

For now, I've moved the stat counter and "I power Blogger" button to the left-sidebar, and on the right-sidebar, I moved the Google Reader widget higher up, above a couple other items, where it became visible again.

If it's just a matter of playing around with padding and margin values, then I'm sure I'll hit upon it eventually. If you can offer me any pointers, though, I'd be much obliged!

Thanks!

Pam said...

To anonymous and Louana,
You're very welcome :-)

Anonymous said...

That was aasome

Noah Wieder said...

I have spent 2 full days trying to learn how to edit my templates. I have minimal CSS knowledge and average HTML knowledge and with your help I finally understand Blogger templates a little better and was able to successfully add my left side bar. Thank you so much. Great Fractals by the way too :) If you want to see what I've done I'm at blog.bestpeoplesearch.com

Anonymous said...

Thanx for the tutorial Pam. I want to put my third column on the right, next to the second one. How can I do this?

Charles Springer said...

You made the transition to three columns so easy. Thanks for sharing.

One challenge, however, is that my header drifts from one side to the other depending on various computers. Is there some way to keep it centered?

Anonymous said...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The markup in the document preceding the root element must be well-formed.

I copy/pasted into the Blogger template as you stated and the above error mess came up. What do I do as I love the 3 column layout?

sramsh said...

thanks man for the info.. I never thought my search could end this easy ...

http://mytechfindings.blogspot.com

Anonymous said...

Hi Pam,

I used your template on a friend's site and was getting weird extra space after each widget. Her blog is http://craftyconservative.blogspot.com/

I managed to fix the problem on my test site, now my profile text is butting up against the divider line.

http://kundhicreative.blogspot.com/

Any thoughts on how to fix my problem? I thought it might have something to do with the profile styles, but when I added bottom margins, nothing changed. I'd appreciate your insight.

Thanks, Julie

NKM said...

really nice page. Finally I found something interesting.
Thanks for the post!

http://ajabgajab.blogspot.com

blog, pipi at bingi said...

nice nice!
will these work on these blogs?
http://cityworkandjobsearch.blogspot.com
http://blogpipiatbingi.blogspot.com
http://adeek99.blogspot.com

Anonymous said...

Thank you so much! I've added a link to random bytes on my blog.

Anonymous said...

thx much man, i've been looking for a three column blog layout for a while

Anonymous said...

great post
http://tech.rcanblog.com
http://rcanblog.com

Anonymous said...

thanks for the great tips and explanations. With limited knowledge I have managed to create the following site with your help mattress monster

Tone Yvonne said...
This comment has been removed by the author.
Terry Stynes said...

I don't want to rain on your parade but I tried the paste into the template html area and it got rejected.
I really want a 3 column template so I'll have to keep on searching....thanks for the try though - much appreciated.

Diane Lefrandt said...

Help! I keep getting rejected by blogger.
I cut and pasted the entire template for the 3-column. This is their response:

We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup."


Like I said...I just copied and pasted your template. What did I do wrong?

Thanks for your help!

D'Lish

Terry Stynes said...

D'Lish...I had the same response.
Frustrating isn't it?

Diane Lefrandt said...

Crazy thing is it worked on a "test blog" and when I applied it to my main blog....it didn't work!

I have tried about 5 different tutorials and continue to get the same problem.

Amit said...

hey..

i was using blogger and my blog address is http://programming-zone.blogspot.com/

i was trying it to make 3 columns.. it look fine in firefox but in IE right side coloum goes down.. i used higher resolution that is 1027 * 728 it works but in 800 * 600 it shows the problem that i discussed..

kindly help as i was it to look fine in lowest resolutions also...

regards

Coool

Anonymous said...

Hi Pam

Thanks very much for all the help.

Rev. Devan Jesse Byrne said...

I do not know what my problem is, but I can not seem to get it to work right. could you help me, i have an idea please email me if you could. My page is at http://IamACIM.Com/

Thank You!

Bluebirdy said...

Is there any way to make a 3 column blog out of other plans than MINIMA? THANKS TONS if you have a simple method to do this. If you don't, do you know of a website with a choice of 3 column blogs? I'm not having much luck finding more than just minima ones.
Bluebirdy

Rachel said...

Thanks! I just used this and it is exactly what I've been looking for. I am also having trouble getting my header centered again. It is a little off. I use Firefox. Any updates on this?

Unknown said...

Great...Thaks for the information. that very useful for me..Visit http://aruhadi.blogspot.com

Byrons Mobile Bike Repair Los Angeles 91356 said...

If this tutorial is using the Minima template couldn't you just offer the .xml template code so we could simply upload to our blogger account?

NOBODY on the internet offers a working three column Minima Blogger .xml template. I would gladly pay a premium for this $$$ and would love to do business with you :)

Thanks, Byronious

Pam said...

Actually, if you'd read the entire post, Byronious, there's a link to the complete XML template near the bottom.

Ice Pony Girl said...

Hi...I stumbled onto your blog while trying to find a 3 column template to use with my blog.

I like your layout, but would want different colors, etc, HOW do I do that?

Here's a link to my blog
http://iceponytrekking.blogspot.com/

I want to stay with the same color scheme, just want the 3 columns.

THANKS!
Raven

Unused Account said...

I could kiss you.

I changed the widths of the columns to be a fixed pixel width rather than a percentage.
It works perfectly!

THANK YOU!!!

Amanda said...

Hi Pam

First, thank you :)

I noticed that some were having the same problem I was with the template getting rejected by blogger. I put the template into Dreamweaver and the code errors it's showing are (I'm assuming) because of xml pickiness. The first two I was able to resolve

There were some problems with the ItemPage tags and the ItemPage tags. I think I have those fixed, but I'm having trouble getting this one to work because I'm not completely sure what it's function is:
< a class="comment-link" href="<$BlogItemCommentCreate$>" ><$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments< /a >

Amanda said...

Just a follow up. I have been playing with this in DW for a while and am about to give up. I'm not sure what it is that blogger is rejecting. I've been through the entire code and unless it's not recognizing one of the tags you have created I am not sure what the problem is

Anonymous said...
This comment has been removed by a blog administrator.