Personalizar los posts

Para explicar cómo funciona la barra de superior, recientemente agregada, no me queda más remedio que empezar por el final y tratar de contar cómo podemos "personalizar" los posts para que algunos, aparezcan con un diseño gráfico diferente.

Paciencia, si bien el tema es bastante simple, la explicación es larga.

Blogger muestra el blog de manera dinámica, esto significa que, por un lado tiene el modelo gráfico, una especie de hoja prediseñada (la plantilla) y por otro una serie de datos que le proveemos nosotros (los post, las opciones).

Para mostrar los post, toma el "molde" correspondiente, le agrega los datos y va repitiendo la secuencia una cierta cantidad de veces. De esta manera, todos los posts son exactamente iguales. Todos los títulos tendrán el mismo color, todas las fechas tendrán el mismo tipo de letra, etc, etc.

Con facilidad, podemos, por ejemplo, cambiar el color de los títulos. En las definiciones de estilo habrá algo así como:

.post h3 {color: #FF9933;.........}

Basta poner otro color. Claro que, esto cambiará TODOS los títulos.

Pero, ¿qué pasa si sólo quisiéramos cambiar el color del título de un post? ¿es posible hacerlo? ¿cómo podemos identificar un post específico?

Blogger identifica cada blog con un número, lo habrán visto en la barra de direcciones del navegador al cargar determinadas páginas:

blogID=7536819911680553340

De igual manera, identifica cada post con otro número, que también se puede ver en la barra de direcciones:

postID=7536819911680553340

Así, cuando editamos un post, la barra nos muestra una dirección de este tipo:

http://www.blogger.com/post-edit.g?blogID=136972551701248389
&postID=5457373279159610386

Ese número identificatorio se crea cuando lo guardamos o lo publicamos y permanece invariable sin importa lo que hagamos, no se modifica si editamos el post, si le cambiamos el título o la fecha o si lo guardamos como borrador para publicarlo en otro momento.

En una plantilla normal (por ejemplo las Minima), no se le da un uso evidente y sólo podemos verlo en una línea de código:

<a expr:name='data:post.id'/>

donde data:post.id es la variable interna que guarda el dato y, ya que podemos acceder a ella, vamos a utilizarla.

Miremos el bloque <b:includable id='post' var='post'>:

<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
[.......]

El bloque <div class='post'> contiene todo el post (excepto la fecha). Para poder hacer referecia a él, debemos darle un "nombre" único, en HTML , esto se hace mediante el atributo ID, así que, tenemos que encontrar la forma de decirle a Blogger que el ID sea igual al número de postID:

<div class='post' expr:id='"post-" + data:post.id'>

Ahora, el post será accesible porque sabremos su ID. Por ejemplo, este post tienen como nombre: post-7536819911680553340 y usando algo de JavaScript, es posible controlar sus propiedades de manera independiente del resto del blog.

En el mismo lugar, vamos a identificar el título y darle un nombre único:

<b:includable id='post' var='post'>
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title' expr:id='"titulo-" + data:post.id'>
[.......]

El título tiene como nombre titulo-7536819911680553340.

Veamos un ejemplo práctico. Utilizando estos dos botones, puede aumentarse o disminuirse el tamaño de la fuente del título de este post:

CAMBIAR FUENTE

RESTAURAR FUENTE

Del mismo modo, podemos identificar otros sectores, por ejemplo, el footer:

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'> [.......] </p>
<p class='post-footer-line post-footer-line-2'> [.......] </p>
<p class='post-footer-line post-footer-line-3'> [.......] </p>
</div>

Le agregamos un identificación única:

<div class='post-footer' expr:id='"footer-" + data:post.id'>

Y el footer será: footer-7536819911680553340.

En este ejemplo, utilizando los dos botones cambiamos el color de fondo del área del footer de este post:

COLOREAR FOOTER

RESTAURAR FOOTER

Todos los datos anteriores se incluyen dentro de <b:includable id='post' var='post'>, el último sector que nos queda es el que contiene la fecha pero, generalmente está en otro sector, dentro de <b:includable id='main' var='top'>:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>

Allí, hacemos lo mismo:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header' expr:class='"fecha-" + data:post.id'>
<data:post.dateHeader/>
</h2>
</b:if>

Ahora, también la fecha de un post específico es accesible mediante fecha-7536819911680553340.

En este ejemplo podemos ocultar o mostra la fecha de este post:

OCULTAR FECHA

MOSTRAR FECHA

Resumiendo, modificando levemente la plantilla, tenemos un nombre único que nos permite identificar el post:

post-7536819911680553340

y, a los efectos prácticos, tres nombres que identifican la fecha, el título y el footer de cada post:

fecha-7536819911680553340
titulo-7536819911680553340
footer-7536819911680553340

¿Qué podemos hacer con esto? en mi caso, sólo las utilicé para ocultarlas y dejar el post "limpio" pero esto no es lo único, podría utilizarse para otras cosas, dependiendo de la necesidad y la imaginación de cada uno. Por ejemplo:

Para poder ver los ejemplos es conveniente ocultar parte del contenido, asi que:

Click para iniciar

Click para restaurar

Ocultar la Fecha, el Título y el Footer	CLICK
Cambiar el texto del título	CLICK
Poner una imagen en lugar del título (usando Internet Explorer)	CLICK
Poner una imagen en lugar del título (usando Firefox)	CLICK
RESTAURAR a los valores prederminados.

Por supuesto, todas estas modificaciones deben hacerse en el mismo post, para eso, colocamos como primera línea, una declaración de estilo. Por ejemplo, para ocultar la fecha, el título y el footer:

<style>
h3#titulo-7536819911680553340 {display:none;}
h2#fecha-7536819911680553340 {display:none;}
div#footer-7536819911680553340 {display:none;}
</style>

con la única precaución de escribir todo en una sóla línea para evitar que Blogger agregue saltos de línea (<br />) indeseados.

Para hacer que los títulos posean un fondo diferenciado, habría que modificar las clases de la plantilla, por ejemplo:

.post h3 {
height:altura_imagen;
background: url(none) no-repeat left top;
[... propiedades de la fuente ...]
}

y luego, en cada post, ingresar la imagen correspondiente:

<style>
h3#titulo-7536819911680553340 {background: url(URL_imagen);}
</style>

Hasta cierto punto, esto puede automatizarse si en las OPCIONES / FORMATO, escribimos en Plantilla de entrada, el código básico. De esta forma, cada vez que creemos una entrada, el editor ya contendrá la línea de código y sólo deberemos colocar el número de ID del post y la URL de la imagen.

En la práctica, parecería que el título es lo único que puede "personalizarse" con cierta soltura ya que el footer es un bloque que difícilmente querramos modificar y la fecha es un misterio que, por lo que a mi me toca, Blogger tiene guardado bajo siete llaves.

Este método, bueno o malo, es lo que me permitió crear una serie de post "especiales", fuera del orden cronológico del blog y que utilicé como "índices" y hoja de contacto.