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.

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.

How To Add HTML Picture Codes to Blogger / Basic

1.Login to your Bogger Dashboard and go to Design >> & Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2J_UFRQ_wqvlG2BWYRYp4QDfIgjAboVJJWDXCFf63youCR045Sgf7PaZ24d6fHPg_t4ckGQaUW5v9meSjM6gp2-4rKWF4nC_dGfU-WiD8JIVnfq5PCdCdDlyrMUNxleBJGAx0N4rT_GA/" width="125" height="125" alt="Blogger tricks and toolz" />

Look at the example below:



4. Now Click on Save "Html Java Script" and You are done..

Advanced users of Blogger.com service may have tried to insert and put Google AdSense ad code which is actually a Java script directly into the blog pages by manually editing the XML-based template HTML coding interface. Actually, it’s possible add any ad code by using HTML/JavaScript page element within the Blogger new XML template system, but the place where you can place the new block is rather limited, i.e. above or below the post body, header, footer, within sidebar or between blog posts. In case you want to put the ads inside the post, or align the ads to float and wrap around the text, or just within the single individual article content view, you will have to edit directly the HTML coding of Blogger template.

If you try to insert any Google AdSense, AdBrite, AdEngage and any other JavaScript based ad code, or client-side components such as counter, tracker, form, snippet, effect, date and time, etc which is JavaScript based, the following error message may be returned when saving ore previewing:

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 processing instruction target matching “[xX][mM][lL]” is not allowed.

or

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 “zs” must end with the ‘;’ delimiter.

and many other different XML error message.
The problem is caused by incorrect dynamic interpretation of Blogger XML template when it generates the HTML webpage for the blog page that is requested, probably due to the fact that the AdSense ad code or other code is not a valid XML, coupled with the fact that some ASCII characters have special meaning and reserved functions, confusing Blogger blogging engin.
The resolution to the JavaScript based coding does not work in Blogger HTML template error can be solved by replacing special characters or symbols in the script to HTML code. Check out the list below for which ASCII characters that need to be replaced with their corresponding HTML code. Using HTML code will ensure that Blogger render the character correctly when serving the page to the viewer.
< – &lt;
> – &gt;
Above two is enough to make Google AdSense works in Blogger template. For other scripts, such as AdBrite ad code, you will need to replace more characters such as those listed below.
& = &amp;
” = &quot;
For example, a Google AdSense code should become looks similar to code below:
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXX";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "000000";
google_color_text = "000000";
google_color_url = "000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
While an AdBrite ad code will became the similar code to the below:
<script type="text/javascript">
var AdBrite_Title_Color = '0000FF';
var AdBrite_Text_Color = '000000';
var AdBrite_Background_Color = 'FFFFFF';
var AdBrite_Border_Color = 'FFFFFF';
</script>
<script src="http://ads.adbrite.com/mb/text_group.php?sid=303771&zs=3330305f323530" type="text/javascript"></script>
<div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=303771&amp;afsid=1" style="font-weight:bold;font-family:Arial;font-size:13px;">Your Ad Here</a></div>
Simply use the text editor to parse the code and then replace the characters. Don’t worry about violating AdSense TOS or other terms and conditions, as once the blog’s web pages are rendered and presented to the viewers and visitors, the code will be exactly same as the original code before any replacement!