The Blog Doctor.

Interchanging Templates and Layouts in Blogger.

The advent of the new version of Blogger introduced the term Layout instead of Template for the new blogs. If you had started a blog in the old Blogger then you had a template. The new version of Blogger migrated your blog while retaining the old template. You then had the option to upgrade to the new layouts or keep to the old template.

The new Layouts are responsible for the new features in Blogger and since they require dynamic publishing cannot be used on ftp blogs. Old timers prefer to stay with what they know best and can edit easily like the old HTML templates. Newbies on the other hand love the Labels and new Archives features of the Layouts which enable them to categorize posts easily. However those wishing to interchange easily between Templates and Layouts are stumped. Here are some diagrams to help these Blogger users..............

If you start a new blog now you automatically get a new Layout for your blog. Layout is a term used to refer to the Graphical User Interface Blogger has introduced to enable bloggers to edit the template using click and drag rather than making changes to the XHTML code of the template. Here is a Web definition for "Layouts" :

Put visual elements into a pleasing and readable arrangement.

To access this login to your Blogger dashboard and click on Layout link next to your blog name. This will open the Page Elements subtab of Template tab where you can see all the sections of your blog and can drag and drop widgets to wherever you want. You can also add other widgets to any section of your blog from this page.

However there are some who wish to use Classic Blogger (HTML) templates. These people have to first revert to classic template in their blog and then load the classic template they wish to use. To do this login to Dashboard and click on Layout. Then click on Edit Html subtab of Template tab. Scroll down to end of this page below the template box. There you will see a "Revert to Classic Template" link. Click that link and your blog will revert to classic template. See picture below
:

Follow the instruction on the left to revert to classic template. If you wish you can download this diagram and use it as a flash card to remind you of the method. Just right click the picture and choose 'Save Image as' to save it to your disk.

If you attempt to paste a HTML template into the new Blogger layout you will get an error message :

Your template could not be parsed as it is not well-formed. Please
make sure all XML elements are closed properly.

Error messages in Blogger Templates explains the error messages and their correction.

UPGRADE TO LAYOUTS

Those people who wish to take advantage of new Blogger features like Labels should upgrade from classic template. To do this login to Dashboard and click on Template for your blog. Then click on Customize Design subtab. This page contains the Upgrade link to upgrade blog to Layouts. See picture below :

Follow the route on the right to upgrade to layout. You can steal the above graphic to keep as a reference.

Remember the two : HTML templates and XHTML/XML layouts are incompatible with each other and do not try and paste one into another.

Template or Layout Which is Better?

Error Messages in New Blogger Templates.

New Blogger Templates are coded in XHTML which is based on XML. XHTML is a much stricter language than HTML and you will encounter more error messages while working on the new templates...........

USING OLD BLOGGER TEMPLATE. The commonest mistake made is pasting a HTML old blogger template into the Edit Template text box. The error message given when you attempt to Preview or save a HTML template is :

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 content of elements must consist of well-formed character data or markup.

This error message is given because HTML templates are not "well formed". HTML templates are incompatible with the new blogger unless you have chosen to retain the Classic template AFTER migrating to the new Blogger. Going from old blogger to the new blogger is a two step process with the second step being optional. The first step is when the blog is migrated to the new blogger along with the old HTML template also called the Classic Template. The second step is UPGRADATION to the new template as outlined in theIntroduction.

WHEN THERE IS NO MATCHING END TAG : In XHTML every tag should have a matching end tag. If there is a end tag missing you will get the following 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 element type "div" must be terminated by the matching end-tag "

Matching end tags are </div> for <div>.

This error is most frequently seen when adding Metatags. Make sure that all your metatags in the new templates end with a forward slash.

All tags should be closed using a forward slash. If there are empty tags then they should be closed by putting a space before the forward slash. For example : <br />. Empty elements are those not enclosing anything between the opening and closing tags. For example :
<img src="valid.gif" />.

USING THE CHARACTER "&". When using ampersand within an attribute value it should always be written using a m p; (without the spaces) and not simply an & character. If this is not done you will get the following 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 reference to entity "key" must end with the ';' delimiter.

OR THIS

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 entity name must immediately follow the '&' in
the entity reference.

For example this is incorrect: <title>Boys & Girls</title> while this is
correct: <title>Boys &a m p; Girls</title>. Omit the spaces between a m p. Do this in links also.

In XHTML, the script and style elements are declared as having #PCDATA content. As a result, < and & will be treated as the start of markup, and entities such as < and &a m p ; will be recognized as entity references by the XML processor to < and & respectively. Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of these entities. The only delimiter that is recognized in a CDATA is the "]]>" string which ends the CDATA section

IF AN ATTRIBUTE IS MISSING. Every attribute must have a value. Every attribute value should be enclosed in double quotes. For example : <table rows="2">. If not you will get following error message :

One of the sections is missing the required id attribute. Every section should have a unique id.

IMPROPERLY NESTING ELEMENTS. (elements must be closed in reverse order). This is incorrect: <em><strong>Include some text.</em></strong>. While this is correct:<em><strong>Include is some text.</strong></em>.

SPECIFY ALTERNATE TEXT FOR IMAGES using the alt attribute. For example : <img src="URL OF IMAGE">ALT. TEXT FOR IMAGE</img>(XHTML 2.0)

CASE MATTERS! In XHTML case matters. If you have <HTML> then you must close it with </HTML>. If instead you close it with </html> you will get the following error :

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 element type "HTML" must be terminated by the matching end-tag "".

VARIABLE DECLARATIONS : These variables are used in the Fonts and Colors subtab of the Template tab to enable the blogger to customize the fonts and colors of his template. These variable are defined in the "Variable definitions" part of the template. They are then used in the appropriate css code. For example a variable is defined as :

<variable name="bgColor" description="Page Background Color" type="color" default="#efefef" value="#ffff66">

In that part of the css which describes the body it is used as follows :

body {
background: $bgColor;
}

If you use a variable ($rightSbColor) in the CSS but do not define it in the VARIABLE DEFINITIONS section you will get the following error :

Invalid variable declaration in page skin: Variable is used but not defined. Input: rightSbColor

The solution is to delete the variable or define it in the Variable Definitions section.

SAME WIDGET ID ERROR : If you add a widget or Page Element with the same ID Number as a widget already present in the template you will get the following error :

More than one widget was found with id: LinkList1. Widget IDs should be unique.

To correct the error just change the number in the widget ID. In this case change it to LinkList2.

ADDING CODE BEFORE THE INCLUDABLE : If you add a line of code before the includable line in an expanded widget template you will get the following error :

The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements

To prevent this always add any code after this line <b:includable id='main'> in the widget code.

WIDGETS SHOULD ALWAYS BE WITHIN A SECTION : If you add a widget before the section line in a template you will get the following error :

The widget with id HTML1 is not within a section (actual parent element is: b:if.) Every widget should be in a section.

To prevent this add the widget code after this line in the template :

<b:section class='sidebar' id='sidebar' preferred='yes'>

LINK ERROR : Following error is seen :

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 value of attribute "href" associated with an
element type "a" must not contain the '<' character.

when you have in your template code of this type :

<a href="<data:post.url/>">Read more!</a>

To correct this error change the code to the following :

<a expr:href='data:post.url'>Read more!</a>

Similarly this code :

<span class="<data:post.author/>">
<data:post.body/>
</span>

will give this error :

Your template could not be parsed as it is not well-formed. Please
make sure that all XML elements are closed properly.
XML error message: The value of attribute "class" associated with an
element type "span" must not contain the '<' character.

So change it to :

<span class="data:post.author">
<data:post.body/>
</span>

ENCLOSE ATTRIBUTE VALUES IN QUOTES : Attribute values should always be enclosed in quotes otherwise you will get this error :

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "width" associated with an element type "img".

Instead of width=56 always use width='56' within code. It does nort matter ehether the quotes are double or single.

DO NOT INCLUDE TWO STYLE SHEETS
If you include two b:skin tags in the template you wiil get this error

We were unable to save your template
Please correct the error below, and submit your template again.
There should be one and only one skin in the template, and we found: 2

Technorati Tags:template, xhtml, xml xhtml, xhtml errors, template errors

XHTML Tips and Tricks for Bloggers.

The new blogger uses XHTML templates which are based on XML. Hence it is important for old bloggers switching to the new bloggers to see how different the new language is.......

TO CONVERT HTML TO XHTML you can use Tidy a utility from

http://sourceforge.net/projects/tidy

NOTE : When you download Full Template using the Download Full Template link under the Edit Html subtab of the Template tab it is saved to your PC as a XML file.

COMPARISON OF HTML AND XHTML

Came first

Developed later (ver2.0 July2006) and will replace HTML in the future.

Offers limited set of document-creation primitives

Backwardly compliant with HTML
Future compliant with XML

Incapable of handling non-traditional content like chemical formulae. musical notation etc

One of the reasons why XHTML based on XML was developed. XML has a large vocabulary to describe any kind of data.

Does not support new media like handhelds and mobliles.
Majority of HTML is completely compatible with XHTML

Future Proof with XML

Backwardly compliant with HTML.

End Tags may be left out in 4.01 Standard

Every tag must have a corresponding end tag. OR include a slash before closing bracket of tag to indicate its ending. Example <br />

Does not enforce strict nesting of elements.

Strict Nesting of elements. Close the tags in the order they are opened.

Not case sensitive.

Case Sensitive for all tag and attribute names. Example <a> and <A> are different tags. This is because XML is also case sensitive.

The Strict definition excludes all deprecated elements in HTML4.01
The Transitional definition includes the deprecated features of HTML and thus you can stay current while also being XML compliant.
The frames definition is similar to the Transitional and also includes frame elements.

Documents must be well formed.
Requires more attention in writing.

Enclose stylesheets/scripts in <style> </style>

Enclose stylesheets/scripts in CDATA sections like this <script language="javascript"> <![CDATA[...Javascript here...]]> </script>

Single quotes will do : <table rows='2'>

Every attribute value should be enclosed in double quotes : <table rows="2">

Some attributes have no values : ismap

Every attribute must have a value. Those without values must use their own names. Thus ismap="ismap"

Majority of HTML is completely compatible with XHTML

Backwardly compliant with HTML

End Tags may be left out in 4.01 Standard

Documents must be well formed.

<img src=seasonings.gif alt="Salt & pepper"> is valid HTML

Ampersand within an attribute value should always be written using "& a m p ;" and not simply an & character
<img src="seasonings.gif" alt="salt &a m p ; pepper" /> is valid XHTML

All XHTML elements must be nested within the root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element.

Practical approach to Hacking Beta Templates.

You want your blog to stand out among the millions of blogs in the blogosphere then....

you will have to learn how to hack the beta blogger template. Classic Blogger had HTML templates which were easy to hack. You could load them into various WYSIWYG site builders and customize them easily. This is not the case with beta blogger.

Beta Blogger Templates are made of XML/XHTML. See What is XML-XHTML for a detailed description. There are five main parts to the template as described in Parts of the Template.

Since the templates are in XML you can use :

XML Notepad 2006
Microsoft XML Notepad
Stylus Studio XML Pro
XML Fox XML&XSD Editor

to edit the templates but they do not have any WYSIWYG capability.

Another approach would be to delete the XML declarations and add <style> tags like in old Blogger and then load them into any web editor. This also has its drawbacks since many web editors produce templates not acceptable by beta blogger.

The CSS sections in old blogger and beta Blogger are similar differing only in names. The corresponding names are shown in the table below. Some sections in beta blogger are new and do not have any corresponding parts in classic Blogger.

CSS DIVISIONS
Classic Blogger	Beta Blogger
body	body
	outer-wrapper
	wrap2
	header-wrapper
header	header section
content	content-wrapper
	main-wrapper
main	main section
	sidebar-wrapper
sidebar	sidebar section
	footer-wrapper
footer	footer section

To see how these parts are arranged in beta blogger see Beta Blogger Template Structure.

Hence the best and most practical approach would be to use the facilities provided by Beta Blogger itself! To use this approach follow these steps :

Login to Dashboard and select Create a Blog.
Create a Test Blog with any name and add a posting.
Go to Pick New Template subtab under Template tab.
Pick the Template which most closely resembles the design you have in mind.
If you want no columns pick the Simple II Template.
If you want blog body to stretch to higher resolutions pick Stretch Denim or any other similar.
If you want body of blog in a central column pick the Minima.
Save Template.
Go to Edit Html subtab under Template tab.
FIRST use Download Full Template link to download it to your PC.
This saves a copy of the template in XML to your PC as FIRST BACKUP.
Next DO NOT put a check in the Expand Widgets Template box.
This prevents any accidental altering of the widget code.
Scroll down in Edit Template text box.
Look for the code you want to change.
MAKE ONLY ONE CHANGE AT ANY ONE TIME TO THE CODE.
Click on Preview at bottom to see the effect of the change.
If you do not like the effect right click inside Template box and select UNDO.
If you like the change Save Template Changes.
Immediately click on Download Full Template link at the top and save the template to your PC with the name FIRST BACKUP1.0 .
Repeat the above steps for any further changes.
Save backups to PC immediately after Saving Template Changes with names ending with 1.0, 1.1, 1.2, etc.
After making any major changes backup the template to PC with name ending with 2.0, 3.0, 4.0 etc.
This is so that you know which version of the template backup is the most recent.

Technorati Tags:css, template, xml xhtml

Download Three Column Beta Template.

What is XML, XHTML?

XML and XHTML are two new terms popping up into the beta bloggers' lexicon and we consider them here.....

First came SGML. Standard Generalized Markup Language (SGML) is a metalanguage in which one can define markup languages for documents. SGML is a descendant of IBM's Generalized Markup Language (GML), developed in the 1960s by Charles Goldfarb, Edward Mosher and Raymond Lorie (whose surname initials also happen to be GML). In logic and linguistics, a metalanguage is a language used to make statements about other languages (object languages).

A markup language combines text and extra information about the text. The extra information, for example about the text's structure or presentation, is expressed using markup, which is intermingled with the primary text. The best-known markup language in modern use is HTML (HyperText Markup Language), one of the foundations of the World Wide Web.

Next came HTML. In computing, HyperText Markup Language (HTML) is a predominant markup language for the creation of web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax. HTML templates can begin with this line :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

or this line :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Strict.dtd declares the document to be HTML 4.01 Strict. HTML 4.01 Strict is a trimmed down version of HTML 4.01 that emphasizes structure over presentation. Deprecated elements and attributes (including most presentational attributes), frames, and link targets are not allowed in HTML 4 Strict. By writing to HTML 4 Strict, authors can achieve accessible, structurally rich documents that easily adapt to style sheets and different browsing situations.

Transitional declares the document to be HTML 4.01 Transitional. HTML 4 Transitional includes all elements and attributes of HTML 4 Strict but adds presentational attributes, deprecated elements, and link targets.

Then came XML. Extensible Markup Language (XML) is a W3C-recommended general-purpose markup language that supports a wide variety of applications. XML is a simplified subset of Standard Generalized Markup Language (SGML). Its primary purpose is to facilitate the sharing of data across different information systems, particularly systems connected via the Internet. The first line in a XML template for beta blogger is :

<?xml version="1.0" encoding="UTF-8" ?>

And Finally we have XHTML. XHTML is the next generation of HTML and is a hybrid between HTML and XML. XML was designed to describe data. HTML was designed to display data. XHTML is much stricter than HTML. Not all browers support XML so XHTML provides an intermediary soluton and can be interpreted by XML and HTML browsers. XHTML templates begin with this line :

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

(source : Wikipedia)

XML and XHTML in BETA BLOGGER.
HTML and XHTML files can be opened in NOTEPAD and edited in it. XML files require special software like :

XML Notepad 2006
Microsoft XML Notepad
Stylus Studio XML Pro
XML Fox XML&XSD Editor

to open and edit them. When you download template in Beta Blogger using its new 'Download Full Template' feature (see picture alongside) the template is downloaded with the file extension XML.

Another way of backing up your template in Beta Blogger is to check the Expand Widget Templates box on top of the Edit Template text box, select all in the edit template text box and copy and paste it to a text file in Notepad.

You can upload text template files to beta blogger using Upload a template from a file on your hard drive feature just below the 'Download Full Template' link. Using the Download Template feature downloads XML template files to your PC.