Monday, 27 April 2015

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’>
<head>
remove all the above code and replace it with the following code 
<!DOCTYPE html>
<HTML>
<head>
<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: tips4tricx Blogger Responsive Template
Date : 16 Jan 2014
Url : https://www.facebook.com/sec.researcher
————————-*/
Results become
/* Name: tips4tricx 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’/>
          </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>
Remove and replace with the following code
<span class=’post-icons’>
<!– email post links –>
<b:if cond=’data:post.emailPostUrl’>
</b:if>
</span>
</div>
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’/>
</b:if>
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:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<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://tips4tricx.blogspot.com/atom.xml’ rel=’alternate’ title=’Atom’ type=’application/atom+xml’/>
<link href=’http://tips4tricx.blogspot.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://tips4tricx.blogspot.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
</b:if>
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=”tips4tricx” title=”tips4tricx” 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….
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks