Títulos, subtítulos y efectos

La realidad siempre supera a la ficción ...

Me preguntaron si era posible agregar un subtítulo a las entradas y la respuesta es ... depende. No hay manera de hacerlo de manera automática ya que para eso, Blogger debería tener ese dato interno y no lo tiene. Sin emabrgo, podemos hacerlo de manera manual, creando una clase CSS que agregamos a la plantilla y que luego, usamos en los posts, adicionándola al párrafo con el texto.

Por ejemplo, lo más sencillo sería agregar antes de </b:skin> algo así:

.post-subtitulo {
  [propiedades de la fuente a utilizar]
}

Y la primera línea de un post sería:

<div class="post-subtitulo">Este es el subtítulo de la entrada.</div>

o bien:

<p class="post-subtitulo">Este es el subtítulo de la entrada.</p>

No es mucho pero con un poco de CSS puede experimentarse y conseguir algun efecto más  si empleamos las propiedades que nos permiten ubicar un elemento con precisión (más información). Estas propiedades son: position, left, top, right y bottom.

Normalmente, los títulos de las entradas tienen una etiqueta de encabezado (h1, h2, h3) y debajo de este hay un DIV cuya clase se llama post-body que contiene la entrada en si misma.

El titulo de la entrada

Este es el subtítulo de la entrada ...

Sed ipsum tellus, feugiat vel, porttitor eget, pretium consectetur; nisl! Duis nulla turpis; congue in; lobortis at, facilisis vel, magna. Duis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui. Nullam iaculis, nibh non fermentum ultrices, nisi nisl laoreet quam, sit amet malesuada odio elit in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend velit non dolor! Aliquam in purus? Nullam ullamcorper urna ac dolor. Pellentesque ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum justo et dui. Nam turpis duis.

Ver cada uno de los sectores: la pagina | el título | el subtítulo | las entradas

Lo que nos permite la propiedad position es ubicar un elemento dentro de otro de manera exacta. Para esto, el elemento contenedor (el externo) debe tener establecida la propiedad como relative y el elemento a mover (el interno) debe tenerla estabecida como absolute. Con esto, lo que hacemos es decirle al navegador que ubique el segundo, no donde normalmente iría sino en alguna coordenada cuyo inicio (0,0) es el contenedor.

Por ejemplo, si tenemos dos DIVs, uno dentro del otro con este código:

<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
  <div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;">
  </div>
</div>

El rectángulo rojo se mostraría a partir del ángulo superior izquierdo del blanco que es el que lo contiene pero, como establecimos las posiciones, podemos "mover" el cuadrado rojo a cualquier lado dentro del contenedor usando las propiedades left y top:

<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
  <div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;left:50px;top:50px">
  </div>
</div>

left y top son las coordenadas relativas al origen del contenedor (el blanco) y aceptan valores negativos así que es sencillo "sacar" el contenido del contenedor:

<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
  <div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;left:-100px;top:-10px">
  </div>
</div>

Con este criterio, podríamos hacer que el subtítulo "subiera" y ubicarlo más arriba, junto al título o debajo de este. Para eso, debemos hacer dos cosas, agregar la propiedad position: relative al DIV de los posts y la propiedad position: absolute a los subtítulos de tal manera de poder moverlos con left y top:

.post-body {
  position: relative;
}
.post-subtitulo {
  position: absolute;
  left: valorpx;
  top: valorpx;
  [propiedades de la fuente a utilizar]
}

El titulo de la entrada

Este es el subtítulo de la entrada ...

Sed ipsum tellus, feugiat vel, porttitor eget, pretium consectetur; nisl! Duis nulla turpis; congue in; lobortis at, facilisis vel, magna. Duis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui. Nullam iaculis, nibh non fermentum ultrices, nisi nisl laoreet quam, sit amet malesuada odio elit in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend velit non dolor! Aliquam in purus? Nullam ullamcorper urna ac dolor. Pellentesque ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum justo et dui. Nam turpis duis.

Ver cada uno de los sectores: la pagina | el título | el subtítulo | las entradas

click para ver el resultado en esta entrada.

Algo similar a eso podría hacerse con los títulos en si mismos, modificando la plantilla, duplicándolos y luego, desplazando uno de ellos unos pocos pixeles para, por ejemplo, crear un efecto de sombras. Un ejemplo:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <span class='sombraTitulo'><data:post.title/></span>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <span class='sombraTitulo'><data:post.title/></span>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <span class='sombraTitulo'><data:post.title/></span>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Para eso, hay que agregarle al título la propiedad position: absolute y agregar las definiciones de la nueva:

.post h3 {
  position: absolute;
  .......
}
.sombraTitulo {
  left: 1px;
  position: absolute;
  top: 1px;
  .......
}