Tips, tricks, tweaks, and thoughts on web design, Web 2.0, CSS, net search, writing, photography, blogging, and more, from journalist Pam Blackstone, publisher of the popular WebLens Search PortalSign up for a feed and get posts automatically.

Subscribe with ...

Translate This Post

Burn a Feed

Ping the World

Monday, April 23, 2007

Success! In a previous post, I noted that the New Blogger supports my three-column template in "classic view," but rejects it in "widgets view." I am happy to report that I have solved the problem. After much experimentation, I now have a working three column version that you can open and edit in either HTML view or in "widgets" view.

It was much more than just a bit of badly formed XML. The code that the new Blogger uses for its "widgets view" is a radical departure from the XML that the old Blogger used. New Blogger uses variables, inserts several strange new tags into your code, and stores information differently. All of this is in support of a new user-friendly interface that enables you to add objects (Blogger calls them widgets) and change your blog's template without having to know a speck of code. The code structure underlying this, however, is finicky and much less tolerant of syntax errors than Blogger's previous incarnation of XML.

To get the 3-column template working properly in widgets mode, I basically had to rebuild it from scratch, from Douglas Bowman's new widgets-friendly 2-column Minima design.

Two Template Choices

As a result of this, there are now two versions of the three-column template.

Classic: If you are using the Old Blogger (or if you are on New Blogger but don't anticipate needing to significantly modify the template), use the original 3-column version. Note that you cannot open this version in Widgets view. This means you cannot add newsreels, video, a label list, or any of Blogger's other new page elements. You can modify the template, but you will need some familiarity with HTML.

Widgets: If you are on New Blogger and want the ability to easily customize the fonts, colours, or layout of the template's elements, and prefer to use a point-and-click interface, use the new Widgets version. You can make look and feel changes through an interactive point-and-click interface or by editing the HTML. This version also supports new Blogger features such as newsreels and video, and lets you take full advantage of Blogger's new support for category labels.

Changing Template Fonts & Colours

To modify the Widget template's current fonts and/or colours, open your Blogger dashboard, then click Layout / Template > Fonts & Colors. Choose the element you wish to modify from the list at left, then select the new font and/or colour you want for that element. Click Save Changes and view your blog.

Modifying Page Elements

I have designed the new widgets version to look as similar to the original as possible. It contains placeholders for your profile, blog archive, labels, popular posts, blogroll, and more. However, because of the way that new Blogger now handles information, some page elements will not appear in preview mode until you enter details for them, and you won't see the details in your HTML code at all.

To modify an existing element, click Template > Page Elements. Select the element you wish to modify, then click its Edit link and add the necessary details. You can change its title and/or default configuration any way you like. Click Save Changes when you're done.

Removing Page Elements

To remove an element, click its Edit link, then click Remove Page Element.

Adding New Page Elements

You can add new elements to either the left or right sidebar. To add an element to a sidebar, choose the sidebar you want to modify, then click its Add a Page Element option. You'll see a list of fourteen types of elements. Choose the one you want, then click Add to Blog. Blogger will prompt you to complete the title and/or other details. You can move elements around or change their stack order by dragging them.

Be aware that certain types of elements, such as link lists or HTML/Javascripts, can be added multiple times. Others, such as your Blog Archive, will generate an XML error if added more than once.

If you wish to change the widths, margins, padding, or border styles of the three columns, you will need to edit the HTML.

I hope you find these templates useful. Remember, before you make major changes, be sure to back up your current template.

46 comments:

Anonymous
said...

hello and thank you for the free DL of your 3 column template.I'm having some probs with Html,I want to put a background pic into my blog but can't find or put in..body { background:$bgcolor; padding:0px 0px; color:$textcolor; font:xx-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; and when I do try & put the url in it just gos to the bottom of the template?can you help?http://makethetea-lazy.blogspot.com/this is what ive done so far.My Email is makethetea@homecall.co.uk

I copied the code and pasted it into the new blogger and recieved an error 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 document type declaration for root element type "html" must end with '>'.

Hi Aaron. Be sure to use the new widgets template, not the classic one.

Also, be sure you have copied ALL the code. If you're viewing it in IE, you need to view the source code or save the text file and open in Notepad since just viewing it onscreen leaves out key elements.

Hi Anonymous. I'm not sure what you mean when you say you can't find the body {} style. Where are you looking? Which template are you using: classic or widget? Blogger has made things a whole lot more complicated, unfortunately :-(

Hi Pam I'm using the 3 columns template you shared with us. I'm hving problems with it since yesterday. Sidebar content appears in the main column. As you realize I'm a new blogger and I don't have the least idea how to use all these design elements. It must be sth very simple but still I can't find the solution. my Email is apalabrada@gmail.comThanks

I used your template, well not exactly... I used your layout and kept my original design and it works great. I am a fairly new blogger myself learning as I go but I do not understand why everyone else is having a problem.

Thanks a lot.

I would also like to see how to place a three column, two rows widget feature at the bottom of the page whenever you get a chance.

hello and thanks SO much for your widget-friendly suggestion. i'm a newbie, so can you quickly tell me how to widen the columns via the HTML. i've tried a few times but it comes out looking funny. thanks!

I have two questions...I'm not overly worried because I started a blog some time ago just to mess with the code so as to do no permanent harm to my blog, but in the process of loading this one I got a warning that I was deleting feed 1 and feed 2.

What is that? Will I miss those two guys?

Also, is it possible to make the center column a tad wider so an inserted youtube video doesn't overlap with the sidebar?

P.S. If you just go straight to "template" from your Dashboard, and try to change the HTML, the new code doesn't show up. Don't know why. It just doesn't. You have to go the long way around through "customize" etc.

I have tried your three collumn template. I am not sure what I am doing incorrectly. I have created a "test blog". I go to the edit HTML and delete the current template, cut and paste your version from the notepad to which I have saved it. I keep getting an error message. It says the form is not good. I've tried it several times. I am checking the widget box as well. Is there something obvious that I am or am not doing? If you have time to help me, then I would appreciate it. My e-mail is tishblack@gmail.com

This is awesome, thanks so much for sharing it! :)The only problem I had was I lost all my page elements.Anyway this is great! I've been scouring the web looking for a great 3 column template that actually WORKS and this is IT!Have a great day! :)

How do you suggest I add the extra sidebar without deleting my profile I have now? I can't seem to figure out how to add the sidebar to my original template, and I can't seem to use the new template and make it like my blog.

I can't say how thankful I am for creating this blog and your post about three column templates. I know zilch about htmls, and I have been looking for 3 column blogger templates for quite some time now. I was honestly thinking of switching to wordpress already, but thanks to you, I'm staying put.

I AM HAVING PROBLEMS WITH THE CODING. PLEASE HELP. I KEEP GETTING THIS 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 document type declaration for root element type "html" must end with '>'.

Thank Goodness! I've attempted to work with over 15 other 3-column templates and yours is the ONLY one that actually works! THANK YOU PAM (sorry to scream....I'm just so happy!). If you're still around would you mind giving instructions on how to make a custom header? Thanks so much.

First of all, thank you thank you thank you for your design! I've been looking for a simple 3-column template FOREVER!

I have one question, if you have the time. Everything is working great, but for the life of me, I can't figure out how to make my header remain centered. Seems like the design/html will move the body of the page to always be centered no matter the size of the browser. My header, however, will stay to the right. sort of.

YOU ARE A G_O_D_SEND! I spent a day trying to do this. Then I found out that I kept getting an error in Blogger because I had to clear my cookies first...(anyone having probs with these templates after pasting, clear your cookies then log in and try it again). It works!

So I came back to your page because I remembered the template was easy and did not have a ton of junk attached to it. I explored a bit more and found your widgets template...YEAH! Thanks a ton!

WebLens Tools

About Me

Professional writer, photographer, speaker, and educator, Pam Blackstone is published in a variety of print and electronic media. Her net search site, WebLens.org, is popular with casual surfers and serious researchers alike. Pam's professional site is at Shutterscribe and her digital art is at Fractallicious.