Validate your Blog!

Some changes at blogger.com :)

noreply@blogger.com (Moe) — Wed, 27 Jul 2005 17:19:00 +0200

It seems like blogger.com made some changes, and some of the template tags which caused invalid code now do validate :)
Issues 2, 3, 4, and 5 now seem to validate.

However, the profile image still produces invalid XHTML. So do HREF and BR in comments, because they use capital letters, which they must not.

hrefs in comments produce invalid xhtml code

noreply@blogger.com (Moe) — Tue, 4 Jan 2005 16:16:00 +0100

If someone in your comments uses a href (hyperlink), that ItemPage won't validate as xhtml strict anymore.
This is because blogger.com inserts the html code in CAPITAL LETTERS (I really don't know what the reason for doing this might be).
Currently, there is nothing you can do about it. Check the comments for an example.

Feedback

noreply@blogger.com (Moe) — Tue, 4 Jan 2005 15:31:00 +0100

Here's some feedback about this blog. Feel free to leave more in the comments.

ernie's blog: Validated
microfish: Oops, I did it again!
alphae.net: Creating standards-compliant XHTML pages with Blogger

Creative Commons License generates invalid code

noreply@blogger.com (Moe) — Tue, 4 Jan 2005 15:12:00 +0100

If you decide to add a Creative Commons license to your blog (I just did add one here!), the button code you get for insertion on your blog does not generate valid xhtml strict.
In order to make your Creative Commons button validate, simply replace the attribute
boder="0"
by
style="border:0px;"

No valid CSS on blogspot?

noreply@blogger.com (Moe) — Sun, 14 Nov 2004 01:56:00 +0100

Because http://www.blogger.com/css/navbar/main.css does not validate. It's part of the Blogger NavBar at the top of the page. It can't be deactivated by blogspot users.

5. Display Comments

noreply@blogger.com (Moe) — Sat, 13 Nov 2004 17:05:00 +0100

Problem:
If you have comments in a weblog entry, that entry's ItemPage will not be valid xhtml code anymore, because the comment deletion link uses & instead of &.

Solution:
First of all, publish a test entry. Then, do a test comment. On the entry's ItemPage, get the html source. Look for the code which inserts the comment delete icon. It should look something like this, just with different numbers:

<span class="item-control admin-53169609 pid-1116362449"><a style="border:none;" href="http://www.blogger.com/delete-comment.do?blogID=9139428&amp;postID=110036219453601414" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span>

Copy and paste it into your weblog template, replacing the tag <$BlogCommentDeleteIcon$>. Now replace & with &, and replace the postID number with <$BlogCommentNumber$>.

If you have any comments, the delete icon should produce valid xhtml code now.

4. Post a Comment link

noreply@blogger.com (Moe) — Sat, 13 Nov 2004 16:21:00 +0100

Problem:
The Post a Comment link is not valid xhtml code because it uses & instead of &.

Solution:
In your blog template, find the tag <$BlogItemCreate$> and replace it with

<a href="http://www.blogger.com/comment.g?blogID=1234567&postID=<$BlogItemNumber$>">Post a Comment</a>

Replace the blogID (1234567) with your blog's ID number (can be found in the browser's adressbar when editing your blog, for example http://www.blogger.com/app/post.pyra?blogID=1234567).

3. Show Quick Editing on your Blog

noreply@blogger.com (Moe) — Sat, 13 Nov 2004 13:49:00 +0100

Problem:
The same problem I described in Show Email Post links goes also for the Show Quick Editing on your Blog option.

Solution:
If you don't need this function, simply deactivate it in your blog's settings. Even if you do want to use it, do the following and deactive it after this (the function will still work):
Copy and paste the html code for the Quick Editing feature from your published blog page's html source. The code goes into your weblog template, right before the tag <$BlogItemControl$>. It should look something like this, but with different numbers:

<span class="item-control admin-53169609 pid-1116362449"><a style="border:none;" href="http://www.blogger.com/app/post.pyra?blogID=9139428&postID=110036193411846616&quickEdit=true" title="Edit Post"><span class="quick-edit-icon">&nbsp;</span></a></span>

Now replace & with & (2x), and replace the postID number with <$BlogItemNumber$>.

Then deactive the Show Quick Editing option in your blog settings. The one we just built manually will still be shown and produce valid code.
Note: This will only work for blog admins, not for team blog members.

2. Show Email Post links

noreply@blogger.com (Moe) — Sat, 13 Nov 2004 13:23:00 +0100

Problem:
Show Email Post links lets you display an icon for mailing blog posts to other people. The code doesn't validate, because there is a & in the url, but should be & instead.

Solution:
First of all deactivate the feature in the blog settings. Even deactivate it if you still want to use it, and use the following code:

<span class="item-action">

<a href="

http://www.blogger.com/email-post.g?blogID=XX&amp;postID=YY

" title="Email Post"><span class="email-post-icon">&nbsp;</span></a></span>

Exchange the blogID number with your blog's ID (can be found in the browser's adressbar when editing your blog, for example http://www.blogger.com/app/post.pyra?blogID=9139428). Replace the postID number with <$BlogItemNumber$>.
Copy that code, and paste it into your blog template, right before the tag <$BlogItemControl$>.

1. Blogger Profile

noreply@blogger.com (Moe) — Sat, 13 Nov 2004 13:01:00 +0100

Problem:
Unfortunately, the blogger profile which shows a user photo and description does not validate: The img-tag which shows the user's photo doesn't close. It is <image src="...">, but should be <image src="..." /> instead.

Solution:
Copy the html code of your profile, as it appears in your blog's source html code on the website. The code begins after

and stops after


In your blog template, replace <$BlogMemberProfile$> by pasting the html code you copied. Now make sure to add the closing slash / to the img-tag.

Example:
Change

<img width="80" alt="My Photo" height="60" src="http://stephanmosel.de/stephanmosel_bw.jpg">

to
<img width="80" alt="My Photo" height="60" src="http://stephanmosel.de/stephanmosel_bw.jpg"/>

0. This page was non-valid xhtml

noreply@blogger.com (Moe) — Sat, 13 Nov 2004 11:56:00 +0100

Out of the box, even the new blogger templates are non-valid xhtml. :(
This is due to some features of blogger.com. I'll show you how to make your blog validate. This assumes that you have a blogger.com weblog with a default template (preferrably a new one), and basic knowledge in HTML. I'll skip the details why valid code matters and why your blog should be compliant to it. You can check your website's html code for compliance by using The W3C Markup Validation Service.

You won't have to miss any features because we will use some workarounds.
Generally, make sure that your blog template starts like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">