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

Monday, April 23, 2007

3 Column Widgets Compliant Blogger Template!

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

Aaron said...

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


What do I do? Thanks.

Pam said...

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.

Pam said...

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 :-(

Ashley Plath said...

Thanks for this, but I can't get it to work. I'm using the widgets template, I've copied all the code and then I get this:

"Widgets are about to be deleted
Please confirm that the following widgets should be deleted. All the widgets' configuration data will be lost. *HTML4 * Image2"

When I confirm deletion I get this error message:

"bX-6awz4o"

Any suggestions? Thanks!

Pam said...

Hi Ashley. I'm sorry. I'm afraid I have no idea what that error means. I've never seen it before. Suggest you ask in the Blogger Help Groups.

Apalabrada said...

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

Pastor Yamil Luciano said...

Hi,

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.

Thanks.

P said...

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!

Anand said...

Hi Pam,

i have been trying to upload the 3 column template but always got an error message. Thanks for your code, i have successfully uploaded the template.

Your blogs are very informative and accurate.

Cheers.

Hanley Family said...

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

Thanks!

author said...

Hi Pam - Thanks for doing this. I've copied and pasted the new widgets Minima layout into the template (using Notepad). But when I go to view the blog, there's nothing there. Just nothing. Blank page.

Weirdly, the code shows in the HTML edit page. And I don't get an error msg - in fact, Blogger tells me my changes were successful.

Am I doing something wrong here? What do I do to fix this. HELP!!!
Collette

P.S. And durnit - why doesn't Blogger just design a %$#@ 3-column layout!!!???

author said...

I fixed it. Here's how this worked:
(This was a new blog, and I had made 3 "dummy" posts while I was trying to figure this out.

1- Pick a template at random and save it.

2 - Go to "customize template"

3 - Then "edit HTML".

4 - Check the widgets box.

5 - Cut and paste Pam's 3-column HTML template code from Notepad into Blogger. Click "save"

You'll get an error msg telling you that they're going to delete widgits for archived posts2 and profile2. Click "ok"

6 - You should now be able to view your new 3-column layout in "preview". And you should have archive and profile.

I have no idea what the msg was talking about. But this seemed to work.

Thanks again for the code, Pam.

author said...

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.

Amanda Conger said...

WOW! Thank you so much! I was pointed here by someone else and I adore this. It's exactly what I have been looking for! : )

Crazy Working Mom said...

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

Thanks!

Unknown said...

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! :)

Anonymous said...

Okay, is their a way to add a widget above the title header? Thanks a lot.

seanpritzkau said...

Hi. Thanks for the help.

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.

DubLiMan said...

It works beautifully. You just have to remember that none of the widgets get copied. You have to copy them separately to a test site and then copy them back.

Anonymous said...

Great job, Pam! It's the first 3-column template I've found that actually works on the new blogger without parse errors. I can code but why do it, since you already did? Thanks Pam.

Christine said...

Thanks! This worked great and I had no trouble customizing the CSS and implementing the template. Your comments are easy to follow, but then again I am a web dev for a living. Keep up the good work!

Leslie Ann said...

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.

Cynthia said...

Really this is a lifesaver! I am so happy with my new 3 column...You are the best!

Bandera Negra said...

I am trying to implement your 3 column design which works wonderfully. you are a genius!

however, i was trying to adapt your design based on minima to the same minima black. I can change the color eschema of all elements, except the title.

what am i doing wrong?

and I can't thank you enough, because yours is the only 3 column design that I have been able to implement in the new blogger, with my totally limited knowledge of html and xml

Before includen the design in my principal page, I am experimenting with your 3 column template at

http://schawarsepruf.blogspot.com/

thanks again,

Nirav Thaker said...

Thanks for the template!

Anonymous said...

amazing. i am thrilled with my layout because of your help.

Jill said...

Hey, Pam, thanks for the template! It's easy to read the code and I should be able to customize it OK. However, how can I center my banner if it's in an include file?

Judea said...

thank you thank you thank you! I have been looking for something like this for two years!

Anonymous said...

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

GODWELL said...

Pam, this template worked perfect. Aside from losing (and then re-applying) the video and text links, I was back in business.

Only problem I have is centering hte header. I know this easy for many, but I am still pretty new to blogging and css.

any help will be appreciated.

Rene Perez said...

You are the bestest! Thank you sooo much! I have been fighting that horrible error code that tells me that the code is not well formed <---- whatever. Finally I figured out that I have to click File/Save and save your template taht way instead of copying and pasting. Then I click Customize/Edit HTML/click widget's box and then UPLOAD my saved file. I had been copying and pasting.. I hope that if I'm not the only one that my comment will help. It's my luck that I am the only one..but anyway! LOL Thank you so much! I'm off to customize now!

Alexa Johnson said...

Yah! It worked! Thanks Pam and Colette for the code and instructions.

Kathy said...

It worked! Good Gravy I had been having a heck of a time! I appreciate this code so much!

Nature Manipulated said...

Thanks So much. I was able to make my blog three columns.

OMEGAMAN said...

My image header doesn't seem to be centered in firefox but it looks fine in internet explorer. Any way to change that?

http://amberst.blogspot.com

Unknown said...

Hi. I finally managed to get the three columns, but how do I get rid of the extra "dead space" on the left and make the right column a little bigger?

http://moonmystic-buriedinbeads.blogspot.com/

Anonymous said...

Thank you! This is just great.

Cris Cunningham said...

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.

Anonymiss said...

I finally have 3 columns. Thanks so much :-)

Mama Bee said...

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.

Any ideas? Thanks so much!
mom_to_bee@yahoo.com

Unknown said...

Thanks!!! :) Very clear instructions! I managed to do mine up - thanks so much!

Redesign Diva said...

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!

B said...

everything works great except when I add a photo to the sidebar, it appears VERY Small...can this be fixed?

brandy_foshe@yahoo.com

lynette said...

love it! it worked like a charm! is there anyway to delete the extra dotted line under a link list?

see what i mean here:

beckstromfamily.blogspot.com

said...

Thank you very much for great job.
I like it and i use it. Thank you.