How To Validate Blogger Template With HTML5 Version

0
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 !
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.
Your website or blog is valid for html 5? Do you ever thought what is html 5 and how it's hel...
SUMMARY

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.

You Might Also Like:

We hope this article helped you to learn How To Validate Blogger Template With HTML5 Version. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Validate Blogger Template With HTML5 Version" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand