Validate your Blog!

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.

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.

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

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;"

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.

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.

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&amp;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).

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 &amp; (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.

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 &amp; 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$>.

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
<!-- Begin #profile-container -->
and stops after
<!-- End #profile -->

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"/>

November 2004   January 2005   July 2005  

        
This work is licensed under a Creative Commons License.