20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Home
Blogger SEO Tips
Blogger Templates

How To Validate Blogger Template With HTML5 Version

tutorial on how to verify validate my blogger template with html5 version,learn trick to add html5 tags in blogspot theme,insert html5 code snippet in blogger homepage,static page and post pages to index faster and get high ranking in google search result.
How To create Blogger Template to Validate HTML5
Your website or blog is valid for html 5? Do you ever thought what is html 5 and how it's help you to increase your webpage ranking in google search results? Today in this article we are going to explain how to make valid html5 blogger template in easy steps.

What is HTML5?

HTML is a markup language especially used for structuring data and presenting content world wide web.This is the fifth version of HTML since the origin of www.HTML5 is a better development of the previous version of html.HTML 5 helps search engine to index your website or blog in better way.HTML 5 goal is to improve the search quality and support the multimedia technology for search engines and easily readable by humans and understood by computers.

What are the benefits of validating Blogger template to HTML5 Version

HTML5 versions have lot's of advantages few of them are below:

  • Improved markup and cleaner code
  • rich media elements
  • browser rendering smooth and faster
  • support search engine to index website or blog in better way
  • support to Mobile ready projects
  • design elegant forms 
  • User interface enhancements
  • Better Interactions and Doctype
  • Many more..

How To Make a Blogger Template Valid HTML 5 Version

Installation steps:
Before proceeding to installation steps first make sure to take a backup of your template.
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML

 Step 3. Now look for the below code,you will find all this code in your template just above the <head> tag.
<?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">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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'>
Step 4. Now replace all the above code,with the following below code.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/> 
Step 5.  Now replace the </html> with </HTML> in your template,you will find this tag in the bottom of your template.we have highlighted Both the html tags of your website or blog,so don't forgot to replace the last one.

Step 6. Now search for the following code <b:include data='blog' name='all-head-content'/> by using CTRL+F or CMD+F (Mac) keys and replace it with the below code.
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>
Step 7. Now Search for the following <b:skin><![CDATA[  tag and replace with the following below code.
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
Step 8. Now Search for the following ]]></b:skin> code and replace with </style> code. now your final code snippet will look like this:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
//All CSS Code Here..
</style>
Step 9. Now remove all the below code snippet your find in template.you will find so many times,remove all of them.
whenever you will add new widget you need to remove again the below code.
<b:include name='quickedit'/> 
Step 10. And finally remove all the below code from your template.
<b:include data='post' name='postQuickEdit'/>
or like below;

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable> 
Step 11. Now Save your template..Done !

Post a Comment