Friday, June 02, 2006

Blogger template tutorial: 3 column template

UPDATE 6 April 2006: This post is for blogs using the old classic Blogger template. For those using New Blogger templates, refer to
New Blogger 3 column templates modified by Ramani
New Blogger 3 column template modified by Charlemagne Stavanger of Blogcrowds
Dots 3 column New Blogger template with Header modified by Charlemagne Stavanger of Blogcrowds
New Blogger 3 column templates by Isnaini
New Blogger 3 column templates by Thur
Ramani's New Blogger 3 column fixed width Neo template




Many bloggers using large screen have complained of the wasted white space left on either sides of the blog contents. Many have also indicated their desire for a third column. Thur has made a 3 column clone of the Blogger standard Minima template, and if you are looking for a nice 3 column template for your blog, you can download it from Thur's 3 column Minima clone (close new window/tab to get back to this page). If you want to see an example of a blog using his 3 column template, surf over to Digital Camera - Choosing and caring for your digital camera (close new window/tab to return to this page). There are a few things to take note of:

  • The blog will look very nice when viewed with a large screen. However, to see how it will affect those with 800x600 resolution, try typing (or pasting) this into the address bar and press ENTER: javascript:top.resizeTo(800,600). It will resize the window to 800x600. You will notice relatively wide sidebars on either sides and the main content squeezed into a narrow column in the middle.

  • There will be a large gap between the title of the first post and the body of the first post. This can be rectified by going to SETTINGS > FORMATING and setting the ENABLE FLOAT ALIGNMENT to NO. This should solve the problem. However, suppressing the markup may result in layout problems when using left or right alignment for images."


The first setback can be overcome by reducing the width of the sidebars. To see an example of this where the sidebar has been reduced from 220px to 160px, look at Television Network. Try typing (or pasting) javascript:top.resizeTo(800,600) into the address bar again to resize the window to 800x600. Notice that this time the center main column is not squeezed into a narrow column.

To modify the template to make the blog look like this, look for this block of codes in the style sheet (solution provided by Thur):


/* Content
----------------------------------------------- */
#content {
margin: 10px 20px;
padding: 10px;
text-align:left;
}
#main {
padding: 10px;
margin: 0px 240px 10px;
}
#sidebar-r {
float: right;
margin: 0px 0px 20px 5px;
}
#sidebar-l {
float: left;
margin: 0px 5px 20px 0px;
}
#sidebar-r, #sidebar-l {
width: 220px;
padding: 0px;

Change the figures in red to the following:

/* Content
----------------------------------------------- */
#content {
margin: 10px 20px;
padding: 10px;
text-align:left;
}
#main {
padding: 0px;
margin: 0px 180px 10px;
}
#sidebar-r {
float: right;
margin: 0px 0px 20px 5px;
}
#sidebar-l {
float: left;
margin: 0px 5px 20px 0px;
}
#sidebar-r, #sidebar-l {
width: 160px;
padding: 0px;
}



PsycHo Free Template Generator

You may also use the PsycHo free template generator to generator your own 3 column template the way you want it. You may view an example of a blog using a 3 column template generated by the PsychHo template generator: The Television Guide.

Firdamatic


Firmatic can also generate either a 2 column or a 3 column template for Blogger. With Firmatic, you have a choice of putting a graphic into the Header together with a title. You will have to choose the header font (serif/sans-serif), font color, etc.

UPDATE: Ramani has done a nice hack for a 3 column template for Blogger Beta. Have a look at Blogger Beta - 3 column template

Books from Amazon

The Rational Guide to Google Blogger (Technical accuracy is assured by Biz Stone, Former Senior Specialist on the Google Blogger Team)

Publishing a Blog with Blogger: Visual QuickProject Guide

NEWER POST    OLDER POST

36 comments:

  1. Hi, great site and I've linked you twice in this post ...about half way down the post you'll see the links BUT you will already see my problem...on the 'links to this post' or 'read the rest' the list of links from my sidebar is on top. On the main page of the blog it is all as it should be but when follwing the links to read it all half the side bar is on top...not all, the profile and the clock etc stay put...any ideas for a fix - I've done the float enlinement 'no' from Blogger help etc but no change.

    ReplyDelete
  2. Everything seems OK. I checked with IE, Firefox and Opera.

    ReplyDelete
  3. thank you so much. I've tried many times and this time thanks to you i think i will manage to have 3 colums at last!!!

    ReplyDelete
  4. Hey Peter,

    Thanks for your site, I've read it through a couple times now.

    I'm trying to switch over to Thur's 3 column Minima and have run into the problems other people mentioned in his comments. I've changed the Float to 'No' and re-published. All three columns look good in Firefox, but in Explorer, the middle column, with the body gets pushed into a long, narrow column to the right of my right sidebar. (I've re-sized the sidebars the way you recommend, as well.) Did you figure out how to fix that?

    From the Archives

    Thanks for any help you can offer...

    Megan

    ReplyDelete
  5. You can ask this at Blogger Forum. Thur actively participate there.

    ReplyDelete
  6. Thanks for your link to PsycHo. I would be glad to have your comments about it at all.

    --Aideen [horm.org]

    ReplyDelete
  7. Hi Aideen,

    Thanks for commenting. To tell you the truth, I have used PsycHo only once to set up one blog, and than't it. I use mostly the standard Blogger Minima template, Thur's 3 column template (some plus modification) and Remani's 3 column Blogger Beta template. I am afraid I am not able to comment much except that if you take the trouble to learn all its feature, you can get a custom template to suit your choice.

    ReplyDelete
  8. Hi Peter
    Thanks for stopping by at my Kevin the Collie blog, and for all your help. I wrote a post reviewing your blogs, I wonder if you can see why my new template is not working in Internet Explorer? the second and third columns are showing below the first.

    Cheers, John

    ReplyDelete
  9. Hi Kevin,

    Thanks for the review and the links.

    Regarding the template, something seem to be wrong with the template as in FireFox, the right sidebar is displaced to the right (there is a gap between the main column and the right sidebar) and in IE, both the main column and the right sidebar is at the bottom of the post. If you intend to keep this post, why don't you try posting this question to the Google Help Group.

    Otherwise, why don't you switch to other New Blogger templates. Plenty for you to choose from. See
    New Blogger (formerly beta) template: 3 column. (Good if your blog is still receiving a significant no. of visitors with 800x600 resolution)
    More New Blogger (formerly beta) templates modified by Stavanger
    New Blogger (formerly beta) templates for posting large photos
    New Blogger (formerly beta) 3 column templates modified by Stavanger

    Peter aka Enviroman
    Enviroman Says

    ReplyDelete
  10. Hey Man...great blog. I have a question regarding the 3 column template. For some reason my sidebars and post content seem to be running together slightly in Firefox. Ive tried adjusting the padding but it still runs and some content only partially shows....any suggestions?
    http://palmettoequipment.blogspot.com
    Thanks for the great tips...

    ReplyDelete
  11. Hi Palmetto equipment and supply,

    First, let me state that I am not an IT person and is not an expert in templated.

    With that said, why don't you backup your current template, make 2 copies if you wish to make sure.

    Currently your template, main column and sidebars have the following widths"

    width:860px;
    margin:0 auto 10px;
    border:1px solid #b3daff;
    }

    #outer-wrapper {
    width: 860px;

    #main-wrapper {
    width: 475px;

    #right-sidebar-wrapper {
    width: 180px;

    #left-sidebar-wrapper {
    width: 170px;

    Why don't you try changing it to

    width:885px;
    margin:0 auto 10px;
    border:1px solid #b3daff;
    }

    #outer-wrapper {
    width: 885px;

    #main-wrapper {
    width: 475px;

    #right-sidebar-wrapper {
    width: 180px;

    #left-sidebar-wrapper {
    width: 180px;

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  12. I have a 2 columns blog with the navigation one on the left, how can I switch to a 3 columns layout?

    ReplyDelete
  13. Hi Hedi,

    This post was made a long time ago, and I posted an update right at the top of the post. Did you read that?

    Also, are you using old classic template or New Blogger template? To find out, refer to Old classic template or New Blogger template?.

    Also, if your problem is how to change template, perhaps this post can help you: Changing template.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  14. Thanks for the fast answer, indeed I want a new template maybe but without loosing all the changes I made to the current one. I'm using New Blogger...

    ReplyDelete
  15. Hi Hedi,

    Perhaps this post may be of some help: New Blogger tutorial: Adding a second sidebar.

    You haven't answered the question about whether you are using the old classic template or the New Blogger template, as my answer may be different in different circumstances.

    Anyway, backing up the template first, upload a new template, then use the old template to make the task of getting back the customization is not that difficult (old classic template)

    For New Blogger template, copying whatever are in the page elements, saving it to help in reconstructing the customization after uploading a new templat will help.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  16. Hi Peter,

    Great work there. I've used the "Rounders New Blogger 3 column fixed width template" on my blog: www.access-point.nl. The only problem is that on the page layout, the columns are verticly beneath each other. In IE7 there are no problems and it looks normal, but if someone looks at it in IE6, you'll see that same vertical layout. Maybe you can see what the issue is here. All the help is welcome for this dummie ;-). Thanks in advance.

    ReplyDelete
  17. Hi Jereon,

    Where did you get the template from? From New Blogger 3 column templates modified by Charlemagne Stavanger? If so, I have an example blog using that template at Kids and Teens Articles and it do not have that problem. Could you have put something too wide for the main column or the sidebar?

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  18. Hi Peter,

    Thanks for the link. I've cross-checked mine with the one you gave me and all the headers and wrapper sizes are the same. Thanks for the help anyway, just hope that all users are switching to IE7 soon ;-).

    Jeroen

    ReplyDelete
  19. I downloaded a three-column template and wanted the outside columns slightly narrower. I surfed onto your site and this did the trick. Thanks!

    ReplyDelete
  20. hey this is clint again i was wondering maybe if you can explain how to covert a url into a single word in a paragraph let me know my email is

    clintpee@gmail.com

    ReplyDelete
  21. Hi brad3adman,

    Refer to How to make a clickable link. I think I have called the part that will be displayed on the web as "Description" or the standard term "anchor text".

    Still not clear? Comment in that post.

    It is not my policy to response to comments via email but by commenting on commentator's blog.

    Peter (Blog*Star)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  22. I like the idea of a three column blog, and I've set one up. But, what I'd really like to know, is how to be able to post articles in more than one column? ie, having 3 main columns, all with the individual ability to be posted in. Thanks for all your help, I've certainly used a lot of your advice as I'm not really familiar with CSS coding!

    ReplyDelete
  23. Hi Renee,

    I doubt you can do it, for then even if you succeed, will these main columns (posts) be identical for they are created by the same script. I believe it is very possible to have more than 2 column - 3, 4, etc, but 2 column, perhaps, but you will probably end up with what I described above.

    But take care, I am not yet an xml template expert, probably a long way from there.

    Peter Blog*Star
    Generating Revenue from your Website

    ReplyDelete
  24. Thanks so much for answering my question!! How come they'd all be the same, is there not a way to create a new field?

    ReplyDelete
  25. Hi Renee,

    I had wanted to answer your question in a post as it will be difficult to answer in the comment. I did check a New Blogger template, and think I may have an answer, but I do not consider myself a xml template expert, so not 100% sure of myself and don't want to publish post that may be inaccurate.

    Let me just venture this conjecture. New Blogger (and the old classic blogger) uses scripts to tell how browsers display blogs, and I believe the scripts that display the posts need to be duplicated if another column were to be made for posts (even if that is possible which I suspect it is). I suspect the script will cause the same posts to be displayed in both column.

    However, if you want to be sure, do post your question to the Google Blogger Help group where there are other Blog*Stars (and even non-Blog*Stars) who are quite familiar with xml templates. I do hope if you have better information, you give me some feedback as I am ever eager to learn new stuff.


    Peter Blog*Star
    Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks" slotted for conversion to custom domain

    ReplyDelete
  26. will do, Peter! Thanks for your help and I'll keep playing around with it.

    and BTW, yes you did post in one of my blog posts, just on a different one!)

    ReplyDelete
  27. Hi all, how about this one?

    LFEM

    ReplyDelete
  28. Hello Peter

    I have been blogging for a while now, and have been using a 3 column template that I downloaded from Pannasmontata. It works fine in IE, but looks terribly messed up in Firefox. I have tried out so many things but nothing has worked out as yet. I am using the Classic blogger.

    My blog is available at http://moviezmazaa.blogspot.com

    I would be eternally grateful if you could take a look at it and offer me a suggestion as to what must have gone wrong!

    thx!
    MM.

    ReplyDelete
  29. It is normal that a web page may look different in different browser as different browser interprete codes in different ways. How different depends on the coder's skill and the effort put in to make it appear nice in all browser. This question should be directed to the maker of the template. Or you can use a different template if you are not satisfied.

    ReplyDelete
  30. hi please help me check why my main post in the middle is way too close to my left side bar...can I move the left side bar to the left so I can use the space and the right side bar to further right? I see those space are wasted in my site. thanks.

    ReplyDelete
  31. hi i have two sites. http://senseoflaw.blogspot.com
    http://senseofnews.blogspot.com
    could you please tell me if anything is wrong with my site

    ReplyDelete
  32. Could u please do me a favor...
    I have a blog http://freshfunnysms.blogspot.com/
    Which template is suit...?

    ReplyDelete
  33. Choice of template is a very personal method and it depend on your preference - graphic heavy or plain like mine, objectives - want more sidebar for ads or navigation or less, etc.

    ReplyDelete
  34. thanks to the information,
    because it is very helpful especially in making and messing work on bloggers who I have today

    ReplyDelete
  35. some really good tips! Thanks for sharing!

    ReplyDelete
  36. Hi Peter,
    I am an ardent reader of your blog. I want 3 column minima template of Douglas Bowman (stpodesign.com) without any modification. Your old classic templates at http://blogger-classic-template-store.blogspot.com/ are not working. Please give me that template. I like that very much for its cleanness and simplicity. Please do not offer any modified templates of Stavanger, Ramani etc.
    Thanks and Regards.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics