Thursday, August 31, 2006

Deconstructing Blogger Beta HTML Template Editing

I've been trying out Blogger Beta with a test blog at Today, Blogger turned on the ability to edit the raw templates. It's a new and wonderful world of strange tags and interesting operators.

For my own benefit, and perhaps the benifit of a few others, here's a deconstruction of my new Beta template.

[Update 09/01 around 2:30pm] This page has been (1) slashdotted and (2) innundated with comments that it is too hard to read. I have posted a large font version at for those who are having trouble reading this. You'll have to return here to post, though. Also, please link to this post directly, not to the large font version. That one might be moving around a bit.

Latest update: 9/5/2006

This post is very, very long, so I've hidden it behind a cloak of invisibility (may not work on all browsers). Click here to reveal the gory details.


Unknown said...

Awesome dissection Scott! Will help us all going forward.

Anonymous said...

On <![CDATA[: That's simply making it so that they don't have to replace every instance of < with the &lt; entity, since there are <Variable> XML-style declarations within the block. CDATA just tells XML not to parse the data within the block until it reaches the closing ]]>, when it resumes normal XML processing.

You can <![CDATA[]]> anywhere outside a tag in an XML document.

Anonymous said...

search engine robots are text only browsers making it text only readable for their sake is pretty key?

Anonymous said...

Skip links is an accessablility feature. It helps text browsers (including some browsers on mobile devices like cellphones) but more importantly it helps people browsing the site via screen reader. You may not care about these people, but for the blogger team, it's a simple change that will improve access to millions of pages.

Anonymous said...

I really wanted to read this, but I can't because your font size is way too small. Increasing text size in FF just mushes your too narrow page design into incomprehensibility.

JM said...

Good dissection. I still haven't had the time to look into things, so this is a great starting point for me as I write about these things for the far less technical audience.

Anonymous said...

The WC3 provides instruction on how to wrap javascript functions to avoid misinterpretation by the XML processor. Review section: 4.8 Script and Style elements

The solution is simple, it only requires the script be wrapped within a cdata marked section.

< script..
... unescaped script content ...
../script >

Anonymous said...

I'm posting to inform you that terrorists have hacked your blog and deliberately messed up the whole layout in an apparent attempt to discredit you.

Scott said...

Whoa. I head out to lunch and the comments explode. Well, explode in a realtive sense, as I ususally get approximately zero. And everyone with the same vaguely Greek-sounding name. Who knew that "Anonymous" was so popular with parents.

* Font size: Sorry, there's just not enough room to print all of this in a larger size. I may migrate it somewhere else in a week or so, and hopefully you'll be able to read it there. Other options include copying and pasting the text or browsing through the actual code.
* Text only browsers: I give! I'll update the comment and bow to the now obvious wonders of the text-only browser.
* The various schoolings on coding: Thank you very much. I stopped coding with HTML before style sheets came into vogue, so some of the subtleties of XML are lost on me. I'll update the page with your insights as I get a chance.
* Terrorists: I would rather fight them here in the blogs of cyberspace than in our streets and schools. Or something like that.

Anonymous said...

This is way too hard to read

Scott said...


Here's a large font version for those with small monitors.

Please don't link to it directly, as it may move around a bit.


Avatar X said...

that terrorist joke was hilarious... another was something i recived by mail:

"is there a human readable version of it?"


Anonymous said...

The site would be a lot better if it wasnt hardcoded into a 6 inch column in the center of the screen with just as much realestage on each side going unused. What size is it? 6 point text?!

Scott said...

Yes, yes. I get it. Layout stinks. Poor coding skills. Yadda, yadda.

Thanks for stopping by.

Anonymous said...

Dude, even that 'large font' page had really small fonts that burned my eyes trying to read it.

Please use bigger fonts there, and here in this blog as well...

It's also pretty hard to read this small font on my brail text only browser.

Anonymous said...

One use of text-only browsers not mentioned above -- a lot of blind users surf the net with text only browsers -- the text is read aloud to them or translated into dots on a braille terminal. The Web standards are amazingly flexible to provide all sorts of access, and its wonderful that Blogger has taken the time to preserve that accessibility.

Anonymous said...

How did you do the Latest Comments on your test blog?

Stavanger said...

Do you have any idea what language the <b:if> <b:widget> is in? Doesnt look like javascript or html


Scott said...

Re: The latest comments field on the test blog.

Blogger Beta lets you include a feed widget. Blogger Beta also automatically creates a feed out of your posts, all comments, and per-post comments.

All you do is put the URL for your comments feed into a Beta widget, and voila. A pretty nice little feature.

This post on Freshblog has more details.

Unknown said...

Thanks so much for taking the time to write about this. I already use Blogger and have my own customized templates and I've been worried about how much/little I will be able to edit the css/html in the new version.

FYI: Two small typos (1) intereting (2) harrasment

The Wandering Author said...

Since you seem to understand this code, any suggestions on where I can find info on how to fix my Blogger template. I can't get Technorati to update my blog; I tried validating it, and got a ton of errors. I managed to fix the ones I put in myself ;<) and I don't think the errors generated by the 2,996 Project graphic in my sidebar will be great enough to choke Technorati, but there are over 50 errors due to the original Blogger template, and I can't figure out how to fix a single one.

So it would be a nice service to your readers to include a link for help on this, if you know where that can be found.

BTW, since I see you can be bought; I'm trying a bribe. I put a link to your blog in my sidebar. Ok, ok, I was going to do that anyway...

Scott said...

Happy Wanderer,

Alas, you give me more cedit than is due. I have not ever used Technorati's services and I am but a mere hacker (in the original sense of the word, not in the Black Hat sense of the word).

I poked around your Blog (very nice tribute, by the way), and it looks like a standard Blogger template. I have heard, however, that Google isn't always all that nice about following the rules. My guess is that your problems are ones that aren't easily solved, and are related to Google/Blogger's disdain for standards.

However, I suggest posting something on the Blogger Help Google Group. Perhpas someone crafier than I (again in the original sense of the word) could provide more assistance.

杨波 said...

You've done respectful great work!I'll try to step on to the deconstruction work!
I use Chinese,and I find what you posted valueable,so I want to translate some of your work,would that be OK?

Scott said...

Dear (name consisting of characters that I cannot reproduce),

Thank you for the comments and compliments. Please feel free to translate into Chinese. I can speak a bit of Japanese, but Chinese is beyond my skills.

I would appreciate a link back once the text is translated, but it's not required.

Anonymous said...

I have a simple question, but I don't know how to do it...

I am wondering how to change my labels. Most of my label's are Upper Case with the first letter. A couple of them somehow ended up lower case. Is there any way to change my existing labels?

Thanks for your helpful look at the new blogger beta!

Scott said...


Actually, I noticed the same thing happening recently.

First, Blogger Beta automatically made all of my new labels lower case - and thought that the lower case versions were different labels from the upper case versions. I eventually made them all lower case (and removed the duplicates) by re-publishing each post individually.

Now, Blogger Beta is randomly deciding which labels are upper case and which ones are lower case.

And recently, Blogger Beta is randomly reverting to older versions of my template. Fortunately, I've backed up a few old copies so I could restore them. I'd bet most other bloggers haven't.

So, the long answer is that I'd leave the labels as they are for now. Blogger's obviously doing some work under the hood that's affecting the label case. I'd wait for things to settle before going through and trying to re-label everything with the right case.

The short answer is I have no idea how to fix your problem.

I prefer the long answer.

Singpolyma said...

For a more complete deconstruction that show what certain new codes and constructs do and explains some syntax, see Johan Sundstrom's post

BrideOfPorkins said...

Wow. I just wandered in looking for a way to do that collapsable archive thing.

Anyone know if the beta features going to be avaiable to people with ordinary blogs, or am I going to have to start over?

Anonymous said...

No worries. Just about everything that you can do with your current blog you'll be able to do with the Beta system. And some things you'll be able to do better and easier.

And you could always just stay with the classic template. There's certainly no reason to start over.

Anonymous said...

so my question is how do yu add external code? I have tried to add the code for blog (red)

and it gives me errors everytime. Any ideas?

Scott said...


I've added external code for (e.g.) Google ads and it works. If you can't get a widget to work, I'd suggest going into html template editing and putting in the code directly.

Give more information on the type of errors and I may be able to give a more detailed response.

Good luck,

Jae Baeli said...

In my dubious adventures in tweaking blogger codes, i discovered an answer to your statement:
"Then, at the bottom are some "Tweaks for layout editor preview." Setting some padding and margins, but I couldn't tell you why or what for."

These are the settings that control how your layout looks when you're viewing Page Elements...unfortunately, there's not a lot of detail about this, and if you modify your template in any way, such as adding another sidebar, the layout gets all goofed up and you can spend hours tweaking these settings, and still not be able to view your page elements properly. I've complained to Blogger several times, but as yet, no clear explanation of how to manipulate these items, or what they all do, exactly. It's a process of hit and miss.

Thanks for your page.
Jae Baeli

Anonymous said...

i want a little help.
i want to highlight(means css tweaks here) the comments posted by the author or the owner of the blog. my question is how to find whether the commentor is the owner or not. I use the xml blogger template.

Suzanne said...

Awesome! Very useful. Thanks so much.

Anonymous said...

what a idea... thank you for good info.
Earn Free $1000 Money Online | free easy online jobs