Blog Tips Arena: How To Make Blogspot Template To Be Valid 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 + "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 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' /> <style type="text/css"> <!-- /*<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.

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'>  <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>  <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'><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'>

<b:include name='nextprev'/>
</b:if>

Step 11. Add Alt Attributes on all the existing images or pictures. For example.

<img height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRQB1TZv9fmQR38grO6zUeM9bMnyUetbMFF1Zb9JtZ9nc15xpjwW1Epotenn1rB_0a5fWwnldNryqTUuaxWdt_F3Hu12ad7pmUFMHGs_kvnO5ZiHTbAmwpbOh0pnvVEVcOoXldLsOlUg/s1600/logo.png' width='75'/>
Change to be like this
<img alt='image name' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRQB1TZv9fmQR38grO6zUeM9bMnyUetbMFF1Zb9JtZ9nc15xpjwW1Epotenn1rB_0a5fWwnldNryqTUuaxWdt_F3Hu12ad7pmUFMHGs_kvnO5ZiHTbAmwpbOh0pnvVEVcOoXldLsOlUg/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.

Pages

Thursday, December 25, 2014

How To Make Blogspot Template To Be Valid HTML5

How to make your Blogspot template to be Valid HTML5

16 comments: