Home » Blog Design » How to Make Valid XHTML Blogger Templates SEO

How to Make Valid XHTML Blogger Templates SEO

How to Make Valid XHTML Blogger Templates – Reduce Total Error Templates Blogspot. Perhaps many who have discussed about how to create a blog template xhtml valid or invalid html5 by reducing the number of errors in templates and widgets. Where the diminishing number of errors on the template, it will be easier for the robot browse our blog and would affect the quality of the SEO of a blog.
To check the validation of a blog template can use the tools of the W3C Markup Validation Service by visiting http://validator.w3.org/ There, we just enter the url of the blog and can determine the amount of error of our blog . Before performing the validation , it is better to use other blogs to trial, if it does not delete the widget results in the perceived error or copy all the contents of the widget to the notepad.

How to Make a Blog Templates Valid XHTML / Valid HTML5

1. Login to your Blogger > Templates > Edit HTML > Expand Widget Templates check settings
2. Change ‘DOCTYPE declaration , find the code below

<!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’>

remove all the above code and replace it with the following code 

<!DOCTYPE html>
<meta charset=’utf-8’/>

after the change of code </html> to </HTML> 
3. Delete the existing comment on the CSS declaration, code search dash (—–) and delete them. example: 
/* ———————-
Name: Leet Blogger Responsive Template
Date : 16 Jan 2014
Url : https://www.facebook.com/sec.researcher

Results become
/* Name: Leet Blogger Responsive Template
Date : 16 Jan 2014
Url : https://www.facebook.com/sec.researcher */

4. Remove the meta tag <b:include data=’blog’ name=’all-head-content’/>
5. Removing the Navigation Bar default blogger, search <body> code and add the following code on top spot 

<!– <body><div></div> –>

6. Removing Icon QuickEdit or images screwdriver, look for the code <b:include name=’quickedit’/> 
if you have found clear all, do not forget if you later add a new widget to remove the code again. 
7. Removing Post icon, locate 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’/>
        <!– quickedit pencil –>
        <b:include data=’post’ name=’postQuickEdit’/>
      </span> <div class=’post-share-buttons’>
        <b:include data=’post’ name=’shareButtons’/>
      </div> </div>

Remove and replace with the following code
<span class=’post-icons’>
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>

8. adding types type = “text/javascript” on all JavaScript code and type type = “text/css” for all existing css, either in templates, post or in a widget. example:
<script src=”https://leetblogger.googlecode.com/files/code.js”></script>
<script src=”https://leetblogger.googlecode.com/files/coba.css”></script>

Change it to
<script type=”text/javascript” src=”https://leetblogger.googlecode.com/files/code.js”></script>
<script type=”text/css” src=”https://leetblogger.googlecode.com/files/coba.css”></script>

9. Hiding page navigation on the main page, look for the code <b:include name=’nextprev’/> replace with the following code 
<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<!– navigation –>
<b:include name=’nextprev’/>

10. Adding Alt attributes on all images, examples 
<img height=’75’ src=’http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png’ width=’75’/>
Change becomes as below
<img alt=’no image’ height=’75’ src=’http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png’ width=’75’/>

11. Remove all the meta tags resulting Error in blog template. Use meta tags follows Valid HTML 5 
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta content=’Your Blog Description’ name=’description’/>
<meta content=’Keywords of your blog’ name=’keywords’/></b:if>
<link href=’http://leetblogger.com/atom.xml’ rel=’alternate’ title=’Atom’ type=’application/atom+xml’/>
<link href=’http://leetblogger.com/feeds/posts/default’ rel=’alternate’ title=’RSS Feeds’ type=’application/atom+xml’/>
<link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/>
<link href=’http://leetblogger.com/favicon.ico’ rel=’icon’ type=’image/x-icon’/>
<meta content=’verification code from google webmaster’ name=’google-site-verification’/>
<meta content=’alexa verification code’ name=’alexaVerifyID’/>
<meta content=’verification code from bing’ name=’msvalidate.01′/>
<meta content=’your Name’ name=’Author’/>

12. Addressing error css templates bundle, remove code <b:skin><![CDATA[
replace with the following code 
<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>

13. Hide widgets on the main page.
<b:if cond=’data:blog.homepageUrl != data:blog.url’>
The hidden widget you Want

14. Put it under the following script just below <head> 

<!–[if IE]><script type=’text/javascript’ src=’http://html5shiv.googlecode.com/svn/trunk/html5.js’></script><![endif]–>

15. At the time of posting pictures remove attributes Anchor=’1′ and border=’0′ alt dressing and add the title attribute. The following example is a standard image format blogspot 
<div class=”separator” style=”clear: both; text-align: center;”>
<a href=”http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png” /></a></div>

Change it to
<div class=”separator” style=”clear: both; text-align: center;”>
<a href=”http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png” style=”margin-left: 1em; margin-right: 1em;”><img alt=”Leet Blogger” title=”Leet Blogger” src=”http://2.bp.blogspot.com/-uDWqr_GxsRo/Uy9DrYHuuXI/AAAAAAAAAwI/DY4ORHIDUxY/s1600/logo.png” /></a></div>

16. Never use tag <center> to make writing or drawing centered, use the following code if you do not want to result in either an html error in the post or in the html widget. 
<div style=”text-align: center;”>Fill Widget</div>

If you really like this Post comment below! Thanks….

About Cyb3r

Check Also

Get 100's of Free Quaility Backlinks From .edu and .gov Domains

Get 100’s Free Quaility Backlinks from .edu and .gov Domains

100’s Free Quaility Backlinks from .edu and .gov – Best Free method to get 100’s Free Quaility …


  1. hey, can you help for validation my blog ?
    Thi is my blog http://kang-mousir.blogspot.com/

  2. thank you for giving useful information. this is the best way to change templates.

  3. thanks to blogger themplate, the info from my father added insight thank you so much, may be useful for us all
    please aprove mister.

  4. Hi there, can u make post about how to make valid css3 blogger template?
    Ernest Dre

  5. Oke thank you pack the info is very helpful for us, success is always…

Leave a Reply

Your email address will not be published. Required fields are marked *