Thursday, December 25, 2014

How To Make Blogspot Template To Be Valid HTML5

HTML5
The meaning of making your blogspot template to be valid HTML5 is not to create a new template, instead we are going to edit or modify your existing template to be valid or it's compliance with HTML5 rules.

If your template is valid HTML5, according the web design experts will ease browsers reading and scanning your blog's code and as for the wide assumption saying a valid HTML5 blog's code will help search engine's bots crawling the blog, I personally don't have a solid source to rely on for approving that assumption.

For some people having a valid HTML5 codes is important showing their professionalism and some even go further assuming valid HTML5 websites are proofs to trust the websites in question.

Whatever your assumption is regarding this matter, let it be yours, my part is only sharing information to help you validating your Blogspot's template codes to be valid HTML 5. That's all.

Valid HTML5 codes are great for your blog's future, and currently all the modern browsers like Chrome, FireFox, IE, Opera and Safari support HTML 5.

How to check your blogspot template code validation?

To verify whether your blog's template is valid HTML5 or not, you can utilize a free service offered by ValidatorW3. And to be honest getting a 100% error-free from the site is nearly impossible without sacrificing things installed on our blog.

My blog has 38 errors and 15 warnings. It's not too many, the errors occurred on this blog are mostly because of image HTML, meta tags codes and widgets. By performing number of tweakings will solve the errors. But I am not planning to do so right now. May be later.

Anyway, if you want to check the possible errors existing in your template code, you can head to http://validator.w3.org/.

How to make your Blogspot template to be Valid HTML5


To make your blog code HTML5 validated -- or at least reducing the errors number, then follow the guides I am about to share now. Firstly, please to backup your existing template, the errors getting worse, you can restore your broken template back to its original form.

Step 1. Login to your blogger.com account > click "Template" > click "Edit HTML"

Step 2.  Find --use CTRL +F -- the following code. It's easy, usually the codes located on the top part of your template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html 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'><head>
Or like this
<?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'>
<head>
Replace all the codes there with the following codes.
<!DOCTYPE html><HTML><head><meta charset='utf-8'/>
Not to forget to also change <html> in the end of your template codes to this tag <HTML>.

Step 3. Now find this tag <b:include data='blog' name='all-head-content'/> and replace the tag with the following codes.
<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 4. Now find this tag <b:skin><![CDATA[ then change it with the following.
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' /> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>
Step 5.  Change all the /*------ ----*/ with this /* and this */. For example.
/* ----------------------Name: Your Template NameDate : 15 April 2014Url : http://the blogname.blogspot.com-------------------------*/
Change to be like the following.
/* Name: Your Template NameDate : 15 Apple 2014Url : http://theblogname.blogspot.com */
Step 6. Delete blogger new navigation. Find the code <body> and place the following code right above it.
<!-- <body><div></div> -->
Step 7. Delete all the quickedit or screwdriver icons. Find this tag <b:include name='quickedit'/>  and delete it.

Remember; each time you create a new widget or gadget in Layout section, you must repeat the process, because a new widget comes with this <b:include name='quickedit'/> code.

Step 8. Find the following code.
<span class='post-icons'>        <!-- email post links -->        <b:if cond='data:post.emailPostUrl'>          <span class='item-action'>          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>          </a>          </span>        </b:if>        <!-- quickedit pencil -->        <b:include data='post' name='postQuickEdit'/>      </span> <div class='post-share-buttons'>        <b:include data='post' name='shareButtons'/>      </div> </div>
Replace the above code with the following code.
<span class='post-icons'><!-- email post links --><b:if cond='data:post.emailPostUrl'></b:if></span></div>

Step 9. Add the  type = "text/javascript" code to the existing JavaScript and add type = "text/css" in all CSS code. For example.
<script src="https://thecode.googlecode.com/files/code.js"></script>
<script src="https://thecode.googlecode.com/files/style.css"></script>
Change them like this.
<script type="text/javascript" src=""https://thecode.googlecode.com/files/code.js"></script>
<script type="text/css" src="https://thecode.googlecode.com/files/style.css"></script>
Step 10. Hide your page navigation on homepage. Find the following code <b:include name='nextprev'/> then replace with the following code.:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
Step 11. Add Alt Attributes on all the existing images or pictures. For example.
<img height='75' src='http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png' width='75'/>
Change to be like this
<img alt='image name' height='75' src='http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png' width='75'/>
SAVE your template!

If all the 11 steps didn't make your template 100% error-free, at least they will reduce the errors in many areas.

One more thing do not too upset if you fail to make your blogspot template to be valid html5. You can search the kind of templates on the internet, and focus on contents of your blog.

18 comments:

  1. Many mistake HTML as a programming language but rather its a markup language and not progaramming language. HtML5 is the latest and technically most advanced version of HTML. To know more
    html5 training in chennai

    ReplyDelete
  2. I appreciate the effort of the blogger. I have one small question which is related to html5. If you could help me out then it would be really helpful. How is the page structure in html5 is different from html4?
    html5 training in chennai|html5 course in chennai|html5 training institutes in chennai

    ReplyDelete
  3. Hi, actually I'am new to angularJs and infact I'am learning angularjs with online training. I'am having doubt, if you could solve the doubt for me that would be very helpful. The doubt is, how can I reset a “$timeout”, and disable a “$watch()”?
    Regards,
    angularjs training in Chennai | angularjs training | angularjs training Chennai

    ReplyDelete
  4. The HTML5 is developed to solve the compatibility problem that affects the current standard of html4. The goal of html5 is to support the audio, video and canvas tags.
    HTML5 training in Chennai | Html5 training chennai

    ReplyDelete
  5. Thank you so much for your post. This post really help me a lot and I have learnt some new things from your blog.
    Mobile Development

    ReplyDelete
  6. i really love to have the blogspot URL bc I've been part of the community for so long
    thank you for your help, github looks like a wonderful alternative

    PHP Training Center in Chennai

    PHP Training Course in Chennai

    ReplyDelete
  7. Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ..Best PHP Training in Chennai|PHP Training in Chennai

    ReplyDelete
  8. nice blog. thanks for sharing HTML Tutorials. It’s really Helpful for me.
    Keep sharing on Html Tutorials…………………

    ReplyDelete
  9. It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...
    Android Training in Chennai
    Ios Training in Chennai

    ReplyDelete