Your internet site or blog is valid for HTML 5? Do you ever think what is HTML 5 and how it helps you to make bigger your webpage rating in google search results? Today in this article we are going to explain How to Validate Blogger Template with html5 In Easy Steps.
What Is html5 Used For
HTML is a markup language especially used for structuring records and imparting content international web. This is the fifth version of HTML considering the beginning of www.HTML5 is a higher improvement of the preceding model of html.HTML 5 helps search engine to index your internet site or weblog in better way.HTML 5 intention is to enhance the search fantastic and guide the multimedia technology for search engines and without difficulty readable through people and understood through computers.
Benefits of Validating Blogger Template to html5 Version
- Improved markup and cleaner code
- Rich-media elements
- Browser rendering smooth and faster
- Support search engine to index website or blog in a 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
These are Following Steps:-
Notice:- 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.
Step 4. Now replace all the above code, with the following below code.
Step 8. Now Search for the following ]]></b:skin> code and replace with </style> code. now your final code snippet will look like this:
Step 9. Now remove all the below code snippet your find in template.you will find so many times, remove all of them.
Important:- whenever you will add a new widget you need to remove again the below code.
Step 10. And finally, remove all the below code from your template.
Step 11. Now Save your template...Done!
I hope you enjoy this post and the photos. How to Validate Blogger Template with html5
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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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 == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + 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.
<style type="text/css"><!-- /*<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:
<style type="text/css"><!-- /*<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.
Important:- whenever you will add a 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='"item-control " + 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!
I hope you enjoy this post and the photos. How to Validate Blogger Template with html5
