Thursday, February 12, 2009

How to create a new Blogger template (Part 1)

  1. Start with a Blogger's basic default template and dissect it.
  2. Understand basic X/HTML coding.
  3. Understand Blogger's Layouts Data Tags
  4. Know where to find help for customizing Blogger's template.

Dissecting a Blogger's basic default template

Leave the first two lines alone.

Listing 1:
<?xml version="1.0" ...?>
<!DOCTYPE html PUBLIC "... XHTML 1.0 Strict//EN"... >

After the first two lines of code, a Blogger's template is essentially just a regular X/HTML document (according to the specified DOCTYPE in code line #2).

Side notes: Personally, I use XHTML 1.0 Transition for reasons we'll experience when we exercise the coding style I wrote in here: How to write clean X/HTML document. For this reason, in the remaining content of this study assumes and follows the transitional document type declaration.

Basic X/HTML coding

An X/HTML document essentially consists of simple structural tags as seen in Listing 2 below.

Listing 2: <html> <head> <style></style> <script></script> </head> <body> </body> </html>

Despite all of the content we see when view an X/HTML document on the web, that's really all there is to it. A Blogger's template is no exception. The some differences we see in the basic template we've downloaded usually has to do with what Blogger labels "Layout Data Tags" or, for those used to using Blogger's WYSIWYG layout editing tool, "Widgets" (regardless of whether or not they're displayed on the resulting browser screen).

In Blogger's document template case, there are extra namespaces declared as attributes of the <html> tag as shown in Listing 3 below.

Listing 3: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr" expr:dir="data:blog.languageDirection"> ... </html>

We should do the same.

No comments: