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 :)

27 pensamientos en “Lienzo – Una plantilla básica para blogger

  1. Bitacoras.com
  2. Imagen de ManuelManuel el dijo:

    Hola Emilio he recurrido a todo y se que tu me lo puedes solucianar
    Tengo un problema con esta web www. estudiocreate .com que no soy capaz de dejar el footer anclado al final, se mueve segun si hay mas contenido o no y se ve diferente en todos los navegadores. ¿A que es debido?

    • Imagen de Emilio Cobos Álvarez el dijo:

      No, veamos: position: fixed posiciona los elementos con respecto a la pantalla, así que al poner bottom: 0; quedarán debajo del footer. No obstante si pones bottom: 45px; quedará por encima del footer, y por ende debajo de la sidebar.

      Mira con cuidado tu código, tienes muchos problemas con id’s y clases. La id sidebar se repite varias veces, por ejemplo.

  3. Imagen de Renzo Rosales el dijo:

    Hola emilio, agradecerte por la plantilla. Tengo una pregunta, a que te refieres con validar la plantilla, te lo pregunto dado mis escasos conocimientos de blogger. Estoy hace un año pruebe y pruebe, viendo tutoriales, tratando de hacer algo que me guste, pero no le he conseguido, y de tanto hacer ya he aprendido algunas cosas. ¿Esta plantilla es tan funcional como las de blogger? ¿las plantillas de blogger son malas?

  4. Imagen de Cesar VallejoCesar Vallejo el dijo:

    Muchas gracias por la plantilla, solo preguntarte a que te refieres con “validar” la plantilla, y si no hago la valido que pasaría

    • Imagen de Emilio Cobos Álvarez el dijo:

      Nada, validar es que el código HTML sea válido acorde a los estándares. Si no lo cumples en principio no tiene por qué pasar nada (la inmensa mayoría de los sitios tienen errores de validación), pero lo ideal sería que todas validasen.

  5. Imagen de Martha ArbuluMartha Arbulu el dijo:

    Hola, muy lindisima la plantilla, una pregunta referente a los estilos. Como puedo acercar más los titulos de los post con sus contenidos, en la plantilla por defecto salen muy separados, como hago para que el contenido ocupe todo el ancho en los sumarios justificados obviamente. Muchas gracias guapo!

  6. Imagen de leoleo el dijo:

    hola amigo Emilio una consulta como hago para que el resumen del texto de cada post en el index sea mayor a lo que se muestra alli que es un promedio de 20 palabras, dime en bloger puedo hacer categorías y etiquetas…. algo asi: Categoría: Curiosidades / Etiquetas: arte, Google Maps, Google Street View.

    Gracias por tu ayuda.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.