Agregando subtítulos a las entradas

¿Es posible agregar subtítulos en los posts? Sí, claro que sí pero, bueno, hacerlo de manera más o menos automática ya es otro cantar. Sin embargo, podemos hacerlo con algo de CSS.

Como es sabido, la mayoría de los controles de los formularios admite una limitada cantidad de etiquetas HTML así que vamos a usar el cuadro de títulos de las entradas para generar un título y un subtítulo.

Por razones que tienen que ver con la indexación y los buscadores, el título de una entrada es muy importante así que siempre conviene que sea claro y que no contenga caracteres "extraños". No hay problemas con ellos en si mismos, se verán bien pero, como en Blogger, la URL de cada entrada es generada en función del título, esas URLs serán un poco estrafalarias. Por ejemplo, si el título contiene vocales acentuadas, estas no se verán o serán reemplazadas por vocales sin tildes; las eñes se convertirán en enes y los símbolos ¡ y ? no se verán.

En otros sistemas de blogs, las cosas son peores ya que esos caracteres se reemplazan por símbolos extraños, porcentaje y números estrambóticos.

Esa URL es generada por Blogger una sola vez, cuando publicamos la entrada y no cambiará aunque editemos el post una y mil veces. Por lo tanto, nos tomaremos el trabajo de publicar dos veces el mismo artículo, la primera vez, teniendo en cuenta esas limitaciones para crear una URL amigable y la segunda vez, cambiándolo para que muestre otra cosa.

Por ejemplo si publico la primera vez con este título:

Este es mi titulo

la URL generada será esta:

http://miblog.blogspot.com/2009/07/este-es-mi-titulo.html

Edito el post, cambio ese título por otra cosa, por ejemplo:

Este es mi título <small>y este es el subtitulo de la entrada</small>

y lo publico otra vez.

La URL será la misma pero lo que veré será diferente:

Ahora, necesitamos agregar un poco de CSS para, por ejemplo, mostrarlo en otra línea, cambiarle la fuente, los colores y todo eso que a uno se le ocurra.

La definición dependerá de la plantilla pero, en una mínima sería algo así:

.post h2 small {
  display: block;
  font-size: 14px;
  font-weight: normal;
  /* y el resto librado a la imaginación */
}