XHTML To HTML: Blogger Template Conversion

I already shared how a dynamic XHTML BlogSpot template could be converted into a blank Static HTML Template, but what if you needed to keep the same design of your blog and only remove the Dynamic objects like widgets. This could easily be achieved by carefully converting the XHTML format of code structure to Basic HTML 4.0 File. This will enable you to even embed or add a PHP or ASP.net code inside the Cloned BlogSpot design in HTML format. A live example is our Contact page with a PHP contact Form. It is not possible to add PHP inside blogger templates because no direct access to web hosting ftp account is available so far. When you visit our contact page, you will feel like you are still in BlogSpot template environment but in reality its only a Cloned HTML design of the original template. The steps today are interesting and fun to try. Make sure you have a webhosting to try today's tutorial. We are using hostgator as our blog web host to host all our files and resources.

This is our new series and would be fun sharing all the new development tips.

XHTML To HTML

Part1: XHTML To HTML: Blogger Template Conversion

Part2: In Progress...

Part3:

Purpose of This Tutorial

Purpose: XHTML is composed of XML and HTML 4. In this series we will learn to remove the XML portion of code and leave HTML 4 alone. Thus we will be able to create a static HTML Clone of a blogger template.

Download and Study your Template

1. Go To Blogger > Templates
2. click Backup/restore
3. Download your template
4. Right click the downloaded xml file and choose "Open with > wordPad"

Study the template:

Every webpage has the following concrete HTML structure. Only the DOCTYPE element would differ in different platforms.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

</head>

<body>

</body>

</html>

A webpage consist of 4 important sections

1. The DOCTYPE defines the type and version of web language being used in the page. In Blogger & also wordpress the type is defined as XHTML and version as 1.0. The only difference is that wordpress uses transitional XHTML while Blogger uses the strict unforgivable version.

   Blogger doctype looks like this. You will find it at the top of your downloaded file.

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

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

   The bolded part is the declaration for XML so that custom tags created using xml could be identified by the compiler. You wont find the bolded part in Wordpress blogs instead you will find the PHP opening tags.

2. The html tag enclosed both the head and body tags
3. The head tag is where you add all your stylesheets (CSS) , scripts (JavaScript, jquery etc.) and meta tags (for SEO & platform compatibility purposes). Code inside head tags are visible to browsers only and not visible on webpage to visitors.
4. The body tag contains your main content. This is the area where you add your Blog header, navigation, post section, sidebars and footer. Code inside body tag is visible on webpage. Any thing you add here will appear on your site and visitors will be able to see it.

Now if you open the downloaded XML file you will observe that the template has the same core HTML structure as we discussed above. Press CTRL + F to find the tags.

All you need to do now is to  identify the dynamic code sections and remove them from the template leaving behind static objects along with their related stylesheets and scripts. For that stay tuned for part2!

The Browser Wars

The day Netscape introduced their custom HTML tags which only their browser could interpret, started an ever growing war between browser companies like IE, Firefox, Opera, Safari and opera. Designers were finding it difficult to create a code that was compatible with all browsers, thus W3C stepped in and introduced XML. XML was used to write other web languages and was a common standard for all browsers. Since most pages were already coded in HTML using tags that no more are supported by modern browsers today, XML was use to create advanced HTML called XHTML. Since then XHTML has remained the standard to create fancy and colorful webpages. The same language is use to code Blogger and Wordpress platforms.

To understand what is the basic difference between XML, HTML and XHTML, I would highly recommend that you read the great article written by hubpages folks.

• The Browser Wars and difference between HTML & XHTML

Got Questions?

If you have any questions related to the code format above or a similar questions, please post your queries in the comment box below. In our coming tutorials we will be diving deep to explore the exciting combination of  webhosting with Blogger hosted blogs. Peace and blessings buddies. :)

Source : mybloggertricks[dot]com

Difference - HTML and XHTML

When inserting codes into the Blogger template, page element, or blog post, you may have seen error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.

XML, HTML and XHTML

We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-

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

The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?

Basic Rules of XHTML

1. Codes to be in lowercase

Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-

<TITLE>Tips for New Bloggers</TITLE>

but this:-

<title>Tips for New Bloggers</title>

If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “Tips for New Bloggers”, can be in the uppercase, lowercase, or mixed case.

2. Attribute values to be in quotation marks

All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-

<div id=header-wrapper> <a href=http://tips-for-new-bloggers.blogspot.com>Text Link</a> <img src=photo.jpg/> <table width=200 border=0 cellpadding=2>

Instead, they should be written as such:-

<div > <a href="http://tips-for-new-bloggers.blogspot.com">Text Link</a> <img src="photo.jpg"/> <table width="200" border="0" cellpadding="2">

3. Container elements must have closing tags

This is not correct:-

<p>A paragraph.

In XHTML, there must be a closing tag with a forward slash (/) at the end:-

<p>A paragraph.</p>

Examples of the many non-empty elements that have opening and corresponding closing tags are:-

<ul> ... </ul> <li> ... </li> <table> ... </table> <h2> ... </h2> <div> ... </div> <span> ... </span> <dt> ... </dt> <dd> ... </dd> <a href> ... </a>

4. Standalone elements to be closed

Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-

<br> <img> <input> <frame> <hr> <meta> <link>

Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-

<br/> <img/> <input/> <frame/> <hr/> <meta/> <link/>

The second way is to add a corresponding closing tag like this:-

<br> ... </br> <img> ... </img> <input> ... </input> <frame> ... </frame> <hr> ... </hr> <meta> ... </meta> <link> ... </link>

5. Elements to be properly nested

This means that elements must be closed in the reverse order. For example, this code is not accepted in XHTML:-

<form> <table> ... </form> </table>

It is improperly nested because the form was created first followed by the table. To close them in the proper order, the table must be closed before the form, like this:-

<form> <table> ... </table></form>

6. Document to have only one root element

In the XHTML document, you will see that except for the document type declaration, all the codes are nested between <html> and </html>. This is the root element and all other elements or sub elements are in between. The document structure will look like this:-

<html> <head> ... </head> <body> ... </body> </html>

7. Attribute minimization is not allowed

In XHTML, all attributes should be in the form name="value". Even if the value is the same as the name, it cannot be minimized to one word. Hence, in our Add Text Box and Textarea article, the textarea code is not this:-

<textarea readonly>Hyperlink Code</textarea>

but this:-

<textarea readonly="readonly">Hyperlink Code</textarea>

XHTML Character Entities

Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead.

"	"
&	&
<	<
>	>

The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.

©

Source : tips-for-new-bloggers[dot]blogspot[dot]com

Move the AddThis Widget to Post Footer in Blogger

Lately I've been doing a minor template makeover on my main blog. One of the changes I made was replacing the default Blogger share buttons with the AddThis toolbar.

An issue I found with the default code was that the widget was being inserted on top of the post footer box instead of inside it like so:

Here is how to alter the code to have the widget placed inside of your post footer.

Go to your dashboard > layout > and Edit the HTML/Javascript widget

Find the following line of code near the bottom:

    container.insertBefore(n,footer);

and change it to this:

    footer.childNodes[1].insertBefore(n,footer.childNodes[1].firstChild);

And the widget should appear in your post footer like below:

To get the widget to appear after the first line use this code instead:

    footer.childNodes[1].appendChild(n);

And it will show up like this:

Hopefully someone will find this useful.

Source : stupidblogtricks[dot]blogspot[dot]com