¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

W3C Validar plantilla blogger en HTML5

Publicado el 28 enero 2014 por Loquendo Manzano
Para los bloggers un poco mas avanzados y exigentes tal vez les ha llegado la idea de que su blog sea totalmente compatible con HTML5 según los estándares del W3C.

si no sabes que esto te lo explicare:
el HTML5 es la nueva forma o contenido para crear sitios web, entre otras palabras es la forma actualizada
el W3C es la entidad para controlar la forma correcta de crear sitios web.
Aunque para muchos simplemente no les importa que sus paginas tengan muchos errores de código, y no es obligatorio tener un sitio bien echo ya que los navegadores nuevos interpretan muy bien el código incorrecto, algunos siente la necesidad de tener sus sitios lo mas perfectos posibles, y siendo el caso de blogger, puede resultar un poco complicado reparar estas fallas. intente mucho que mi blog fuera valido ante el W3C, fue un poco difícil pero logre validarlo, (verificar validez) y si quieres también validemos el tuyo.
LA ÚNICA ADVERTENCIA QUE TENGO, ES QUE SI QUIERES CONTINUAR Y TENER TU BLOG 100% VALIDO DEBERÁS DESPEDIRTE DE:
  • EL DISEÑADOR DE PLANTILLAS
  • LOS COMENTARIOS DE BLOGGER

Eso significa que ya no podrás cambiar colores ni anchura ni nada por el diseñador, tendrás que hacerlo en la plantilla directo, antes de empezar crea una copia de seguridad por si te arrepientes.
Para continuar debes tener conocimientos básicos de CSS y HTML.
Debido a que la estructura de blogger es xml, cuando se interpreta a html hay varios cambios, las plantillas de blogger traen muchos errores y algunos se pueden corregir pero hay otros que no se pueden, el lado bueno es que tendremos que crear nuestra propia plantilla, si crearemos nuestra propia plantilla para así dejar atrás los errores de HTML5 que trae blogger.
Estos son los puntos a tratar
  1. Eliminando la plantilla y colocando la nueva
  2. Dandole cuerpo al blog
  3. Reparando el error y dando estilo al blog
  4. Errores HTML5 en los gadgets
  5. Errores HTML5 en los comentarios

¿Porque crear una plantilla para validar mi blog como HTML5? 

Por algo en especial, ademas de eliminar todos los otros errores mas rápido, cuando entras en tu plantilla en la parte de arriba veras un código como este:
<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'>

este código nos marca como 5 o 6 o mas errores y no se puede eliminar, la única forma es creando una plantilla nueva.

Purgando la plantilla para HTML5

Bien comencemos! antes de empezar:
  • guarda tus gadgets en un bloc de notas porque al colocar la nueva plantilla se eliminaran.
  • guarda tus meta etiquetas <meta content=
  • guarda scrits que tengas como por ejemplo, el de google analitycs.
  • guarda tus estilos css nos servirán mas tarde.
  • abre en otra pestaña el validador del W3C.

  1. Ahora dirígete a plantilla.
  2. Editar HTML.
  3. y una vez que este en tu html selecciónalo todo y borralo.
  4. y en su lugar pega esto:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='es'>
<head>
<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>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
 <b:skin><![CDATA[]]></b:skin> 
 </head>
 <body>
 <b:section id="main" />
 </body>
</html>

con esto tendremos nuestra plantilla nueva en HTML5, si la analizas con la w3c validación,  tiene un error y una advertencia.
  • la advertencia es Using experimental feature: HTML5 Conformance Checker esto es porque el HTML5 es todavía un proyecto sin terminar, mas información.

  • El error es por el carácter que esta en colo rojo en esta linea: href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=xxxxxxxxxxxxxxxxxx&xx=xxxxxxx-xxxx-xxxx-xxx-xxxxxxxx, esta linea es de los css de los gadgets, comentarios y demás.

Dándole cuerpo al blog

Ya te diré como reparar ese error, si miras tu blog esta todo en blanco y no hay nada, vamos a ponerle el cuerpo agregaremos los códigos para tener el cuerpo del blog básico, copia todo este código  y remplaza <b:section id="main" /> por este:
codigo editado, extraído de Ayuda-bloggers 
<div id='header-wrapper'>
<b:section class='header' id='header' preferred='yes'/>
</div>
<div id='content-wrapper'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>
<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
  </div>
  <div class='clear'/>
</b:includable>
<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:id='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>
          </b:if>
        </b:if>
      </span> 
<span class='post-icons'>
        <b:include data='post' name='postQuickEdit'/>
</span> 
</div>
      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>   
    </div>
  </div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='clearfooter'/>
</div><div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

Reparando el error y dando estilo al blog

Ahora que hemos agregado el cuerpo, si lo validamos, vemos que sigue igual, con 1 Error, y si miramos el blog lo veremos realmente feo, sin color, sin nada, solo texto, ya colocaremos los estilos, pero antes a reparar el error.
En tu blog, con click derecho del cursor, ratón o como le digan, le dan en la opción "VER CÓDIGO FUENTE DE LA PAGINA" veras 2 lineas como estas:
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/xxxxxxxxxx-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=xxxxxxxxxxxxxxxxxx&xx=xxxxxxx-xxxx-xxxx-xxx-xxxxxxxx/>

la segunda linea es la que nos da el error y la primera contiene los css de los gadgets, comentarios y mas.
Lo que vamos a hacer es cancelar esas lineas para que queden deshabilitadas y no marquen error, pero antes debemos copiar los css que contienen, da click en las lineas y veras el css que tienen, en un bloc de notas copia los código de las 2 lineas.
Una ves copiados los css utilizaremos este código para deshabilitar las lineas,
  • regresa a plantilla.
  • editar HTML.
  • y busca la linea que estaba en color verde al principio o esta <b:skin><![CDATA[]]></b:skin>
  • y cámbiala por esta: