› › Lienzo – Una plantilla básica para blogger

Hacía tiempo que tenía ganas de hacer una plantilla básica para blogger. Nada de filigranas, sólo hacer las cosas más fáciles a los que quieren empezar de cero.

He quitado código por todas partes de las plantillas simples de blogger, he evitado que se cargaran los scripts y estilos por defecto de blogger, y por lo tanto ha quedado lo que ha quedado: una página en blanco, sin CSS, para que podáis hacer tanto como queráis.

Al final he conseguido una plantilla con muy poco código, que (casi) valida (leer más abajo), y optimizada para el SEO (he usado tanto microdata como microformats).

Os he dejado un par de comentarios extensos en el código, sobre todo entre <b:skin> y </b:skin>.

Si queréis verla, podéis hacerlo aquí (aunque ya os aviso de que es una página cualquiera, sin nada de estilo).

Comenzar a editarla

Comenzar a editarla es tan fácil como poner a escribir algo de CSS básico. Aquí tenéis un ejemplo con el siguiente pedacito de CSS:

body {
	min-height: 100%;
	margin: 1em 0;
	background: #eee;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	opacity: .9;
	color: #32A1CC;
	text-decoration: none;
}

a:hover {
	opacity: 1;
	border-bottom: 1px dashed;
}

.site-wrapper {
	/* Estático, es un ejemplo */
	width: 960px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,.5);

}
/* Clearfix */
.content-wrapper:before,
.content-wrapper:after {
	content: "";
	display: table;
} 
.content-wrapper:after {
	clear: both;
}
.content-wrapper {
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* Distribución entre la columna central y la lateral*/
.sidebar,
.content {
	float: left;
}

.content {
	width: 600px;
	margin-right: 60px;
}

.sidebar {
	width: 300px;
}
.site-footer {
	clear: both;
}

/* El título */
.site-title {
	text-align: center;
	line-height: 2;
	margin: 0;
}
.description {
	display: none;
}
.site-header {
	border-bottom: 1px dashed #aaa;
	margin-bottom: 1em;
}

/* Algunos detallitos para el post */
.post-outer {
	padding: 0 1em;
}

/* Y para los títulos de la sidebar y el footer */
.widget .title {
	color: #666;
}
.sidebar .title {
	border-left: 3px solid #aaa;
	padding-left: 8px;
}

.site-footer {
	margin-top: 1.5em;
}
.site-footer .title {
	border-top: 3px solid #aaa;
	padding-top: 8px;
}

.site-footer .title,
.site-footer .widget {
	text-align: center;
}
/* Comentarios */
.comments ol {
	padding: 0;
}
.comment-content {
	padding-left: 40px; /* 30px de imagen + 10px de margin-right */
}
.comment-header {
	/* Alinear al medio con la imangen */
	line-height: 30px;
}
.avatar-image-container img {
	/* Reducir la imagen y separarla 10px a la derecha */
	width: 30px;
	margin-right: 10px;
}
.avatar-image-container {
	float: left;
}

Se puede mejorar mucho, pero con eso ya se ve más presentable ;)

Crear tu propia versión

Si no te gusta la plantilla tal y como está (sumarios automáticos, etc), es posible que te interese compilarla entera, mejor que editarla desde el editor de blogger. Si te interesa, aquí está el código que he usado en github. Necesitarás poner en marcha un pequeño servidor con PHP, pero es fácil con XAMPP si usas windows, y más si usas linux/mac

Para explicarlo: el archivo compile.php incluye los archivos head.xml y body.xml, y cualquiera que estén incluidos desde ellos con:

<!-- #file=archivo.xml -->

Y lo guarda en compiled.xml

Descargar

Si queréis descargar la plantilla, símplemente haced click en el botón de abajo (si se abre en texto plano, click derecho » guardar como).

Descarga

Validar la plantilla

Hay un sólo error de HTML en la plantilla, y es una meta del feed. No las he borrado porque junto con ella, van otras que sí son correctas y que te pueden ayudar a ser indexable, o a ganar subscriptores al feed. No obstante puede ser eliminada borrando estas líneas:

<!-- Links del feed -->
<b:if cond='data:blog.feedLinks'>
	<data:blog.feedLinks/>
</b:if>

Según añadáis widgets, si os obsesiona validar la plantilla, debéis eliminar todos los códigos así:

<b:include name='quickedit'/>

Además, se añaden automáticamente algunos atributos al elemento <html>. Si ves que queda así:

<html class='v2 no-js' expr:dir='data:blog.languageDirection' lang='es' prefix='og: http://ogp.me/ns# article: http://ogp.me/ns/article#' 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'>

Puedes optar por dejarlo así para que valide:

<html class='v2 no-js' expr:dir='data:blog.languageDirection' lang='es' prefix='og: http://ogp.me/ns# article: http://ogp.me/ns/article#'>

Conclusión

Poca cosa más que decir, símplemente disfrutadla, y si hay algún problema, o cualquier otra cosa, símplemente dejad un comentario :)