Aunque para muchos simplemente no les importa que sus paginas tengan muchos errores de código y no es obligatorio tener un sitio bien hecho 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.
Eso significa que ya no podrás cambiar colores, 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 y considero que para continuar debes tener conocimientos básicos de CSS y HTML por lo menos como para darle forma a tu propia plantilla.
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
¿Porque crear una plantilla para validar mi blog en 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, 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 scripts 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.
- Ahora dirígete a plantilla.
- Editar HTML.
- y una vez que este en tu HTML selecciónalo todo y borralo.
- 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 == "item"'> <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, esto es si no tienes errores en tus entradas.
- 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, ya te mostrare como corregirlo.
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:
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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='"post-body-" + data:post.id'>
<data:post.body/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 != "true"'>,</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, esto es si tienes los comentarios de blogger desactivados 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 debajo de title:
<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:
<style type="text/css"><!-- /*<b:skin><![CDATA[*/]]></b:skin><style type='text/css'>Aquí pega los css</style>
Con este codigo deshabilitamos las lineas y aceleramos la carga de los css, lo que hará que tu blog sea mas rapido 2X1, ahora los css que copiaste de las lineas en un bloc de notas pegalos donde dice "aqui pega los css" y ahora te daré algunos css para darle estilo al blog. Copia estos estilos y pegalos debajo de los que acabaste de colocar:
Codigo editado, extraído de Ayuda-bloggers
/*Elementos Básicos*/
body {
background:#eee;
font-family: Arial;
margin:0;
padding:0;
height:100%;
}
a:link{text-decoration:none;transition:all .5s ease-out;color:#2889ce}a:visited{text-decoration:none;color:#2889ce}a:hover{text-decoration:none;color:#666;transition:all .5s ease-out}
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
.clearfooter {
height: 330px;
clear: both;
}
/*Cabecera*/
#header-wrapper {
overflow:hidden;
width:1000px;
color:#797979;
margin:auto;
height:150px;
background:#eee;
}
/*Contenedor general*/
#content-wrapper {
width:1000px;
margin:0 auto;
min-height:100%;
height:100%;
}
/*Sidebar, derecha*/
#sidebar-wrapper {
width:300px;
padding:5px;
background:#fbfbfb;
color:#797979;
float:right;
}
/*Principal, izquierda*/
#main-wrapper {
color:#797979;
width:650px;
padding:15px;
margin:auto;
margin-right:10px;
background:#fff;
float:left;
}
/*Footer*/
#footer-wrapper {
position: relative;
margin:0px auto;
width:1000px;
background:#f5f5f5;
height:70px;
color:#fff;
}
#footer {
margin:0px auto;
width:1000px;
text-align:center;
}
/*Entradas*/
.post {
background:#fff;
color:#797979;
padding:10px;
font-size:13px;
}
/*Título entradas*/
.post h3 {
font-size:24px;
margin:0;
color:#797979;
}
/*Cuerpo de la entrada*/
.post-body {
margin-top:10px;
}
/*Pié de las entradas*/
.post-footer {
padding:5px;
border-top:1px solid #c0c0c0;
}
/*Ocultando la fecha gigante arriba de las entradas*/
.date-outer h2 {
display:none;
}
/*Títulos de los gadgets de la sidebar*/
.sidebar h2 {
font-size:16px;
}
Ya con esto si validamos nuestro blog veremos que es valido! y nos arrojara luz verde, y nuestro blog tendrá estilo.
- Cada vez que entres en tu platilla en la parte de arriba se aparecera una linea como esta:
<html lang='es' 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'>
- Borra todo lo que esta en color verde para que el validador no marque errores
¡A tener en cuenta!
Errores HTML5 en los gadgets de blogger
Cada gadget que pongamos en nuestro blog nos arrojara 4 errores, ya que cada gadget tiene la edición rápida, ya lo habrán visto como este icono
cada gadget cuando se crea viene con esta edición rápida.para quitar estos errores cada ves que pongas un nuevo gadget:
- ve a plantilla.
- editar HTML.
- activa el buscador con las teclas CTRL F (Mac ⌘F).
- y busca esta linea <b:include name='quickedit'/>
- elimina todas las que encuentres y valida el blog para ver que todo esta bien.
Errores HTML5 en los comentarios
Desafortunadamente los comentarios de blogger vienen con muchos errores de código y no podemos editarlos cada ves que alguien hace un nuevo comentario, este sale con 4 o 5 errores, y una entrada con bastantes comentarios debe tener un sin-fin de errores.
Hay 2 soluciones, eliminar los comentarios de blogger y remplazarlos con:
los comentarios de google+
comentarios de disqus
No explicare como poner estos sistemas.
12 comentarios:
Hola amigo como estas, me gusta mucho el diseño de tu blog me podrías dar unos consejos?
la combinación de colores, el mio gris blanco y azul oscuro y claro
tarde mucho en ir logrando buen diseño
fuentes de google fonts como open sans
Muchas gracias por la advertencia Manzano. Es una pena que para los pocos comentarios que tengo, no exista modo de conservarlos.
En el caso que lo exporte a wordpress (poco probable) y luego lo paso a html5 ¿pasaría lo mismo? . Soy novata en el html5 pero con mucha ganas de aprender.
Gracias.
Ah, se me pasó consultarte otra cosa. ¿Se conservan los post? Sería una pena que aquellos que se quieran pasar a HTML 5 pierdan las entradas, trabajo de años... :-(
Muchas gracias Manzano. Miraré el link que dices.
no creo que me pase a wordpress. lo que preguntaba es respecto a blogger. Dices que las entradas no se pierden, los comentarios ¿si?
si usas los comentrios de google o disqus puedes importarlos
Gracias Esneider, ya me di de alta en disqus y ya aparece en el blog. Estoy quemándome las pestañas y poco a poco haré la plantilla en HTML5.
Hola, Sobe el texto en azul que dices se debe borrar, no se puede borrar de la plantilla? Si sigo los pasos que dás en el post se me descuarda todo el diseño del blog, pero si le doy al validador los únicos errores que me dá son los xmlns y con ellos no mejora en woorank...
gracias
no se puede, las plantillas de blogger no dejan borrar esos errores, la única forma es purgando el blog, borrando todo. saludos
Ok, gracias, habrá que conformarse entonces, pero almenos ahora ya lo tengo claro :)
Hola eznaider puedes mandarme tu plantilla MP a este correo por favor
Publicar un comentario