AjMrDeSiGn

Templates Blogger, exquisitez para usuarios curiosos.

Crear template HTML5 (Blogger)

23 oct. 2012

Hace unos meses, quise probar si funcionaba crear un template HTML5 para blogger y el resultado no funciono, no me dejaba, me daba error, era imposible añadir los elementos semánticos en HTML5, ya se puede y es posible hacer un template en HTML5 para blogger.

Lo mejor es que se puede eliminar por completo la navbar, otra cosa que antes no se podía hacer, se ocultaba con ccs, hasta que añadieron la opción de poder desactivar y hora eliminar por completo.



Algunos de los nuevos elementos semánticos en HTML5 y una breve explicación de lo que es cada uno:

header - utilizado para definir una cabecera de un documento HTML o una sección.
hgroup - se utiliza para agrupar títulos y subtítulos (h1,h2,h3,h4,h5,h6) a modo de cabecera en una sección.
nav - utilizada para definir secciones de navegación para dentro del mismo sitio web.
section - utilizado para representar una sección dentro de un artículo.
article - una entrada a un blog.
aside - representa cualquier elemento que esté fuera del flujo narrativo.
figcaption - es únicamente para enmarcar un titular dentro de la etiqueta <figure>.
figure - para asociar cualquier contenido multimedia a un título o leyenda.
mark - utilizada para marcar el contenido de manera que pueda resaltarse y diferenciarse de los demás.
time - representa una fecha y hora.
footer - utilizado para definir el pie de página de un documento HTML o una sección.

Imagen de ejemplo



Un ejemplo sin css y el resultado es perfecto, funciona y no hay problema, para los que le guste diseñar ya podéis crear templates HTML5 para blogger.

Sola basta con copiar el código de abajo y pegarlo en plantilla, sin los artilugios expandido y lo mejor es que funciona, falta añadir el css.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='es' class='v2 no-js'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[

/*
---------------------------------
Template HTML5 (Blogger)
Autor: AjMrDesiGn
Url: http://ajmrdesign.com
Fecha: 23/10/2012
---------------------------------
*/

/* CSS3 HTML5
---------------------------------
*/


]]></b:skin>
</head>

<body>
<header>
<h1>Titulo</h1>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul>
</nav>
</header>

<section>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</section>

<aside>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside>

<footer>
<b:section class='footer' id='footer'/>
Copyright 2012 - AjMrDeSiGn
</footer>

<b:include data='blog' name='google-analytics'/>
</body>
</html>

No hay comentarios:

Normas comentarios › Leer antes de comentar...

« »

Suscríbete a nuestro feed...