Resumen Posts 1: El encabezado

La característica principal de un blog es que eso que publicamos se ordena de manera cronológica, desde lo más nuevo hasta lo más viejo, por lo tanto, el dato que indica la fecha suele ser un dato importante.

Uno podría imaginar que las entradas son una serie de rectángulos apilados, cada uno de ellos conteniendo datos (fecha, titulo, etc) y eso sería lógico pero, la forma en que Blogger maneja las fechas de las entradas es extraña; por algún motivo, esa fecha está afuera, en un rectángulo separado y accedemos a ella con un dato tan particular que sólo se muestra una vez, es decir, si hay dos entradas en la misma fecha, sólo se muestra una de ellas:

El formato de esa fecha es la que podemos establecer en Configuración | Formato:

Formato de cabecera de fecha 08/10/2009 8 de octubre de 2009 jueves 8 de octubre de 2009 08/10/09 jueves, octubre 08, 2009 10/08/2009 10.08.2009 20091008 2009/10/08 2009-10-08 8.10.09 jueves jueves, octubre 8 octubre 08, 2009 08 octubre 2009 08 octubre, 2009

En un blog "normal con algún truco, podemos hacer que se muestre en todas las entradas, algo imprescindible si usamos alguna característica gráfica como los calendarios pero que esté separada no sólo molesta en este sentido, también complica las cosas cuando usamos alguna clase de plantilla donde se muestran las entradas de manera resumida ya que debemos ocultar esa fecha.

En realidad, no es necesario seguir las reglas de Blogger y es más sencillo eliminar ese dato tal como está ya que de todos modos, la fecha es accesible igual sólo que el dato a leer es otro.

En una plantilla mínima, la fecha se muestra de este modo:

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

<data:post.dateHeader/> es el dato que contiene la fecha y es el que molesta así que fuera con él; eliminamos todo eso de un plumazo.

Hay un segundo dato que nos da la fecha y que se encuentra dentro del post en si mismo y es todo lo que que necesitamos. Se llama <data:post.timestamp/>

Por lo general la vemos en el footer de los posts y lo usamos para mostrar la hora de la publicación ya que así está establecido por defecto pero, en la misma Configuración | Formato, podemos seleccionar la forma en que se mostrará. Por ejemplo, la definimos como fecha:

Formato de hora 17:08 17:08:27 10/08/2009 05:08:27 PM jueves, octubre 08, 2009 10/08/2009 5:08:27 PM 17:08 8.10.09 5:08 PM

De ese modo, la hora no será la hora sino la fecha en formato mes/dia/año y la vamos a usar para crear un DIV nuevo que contenga el encabezado completo de cada entrada, la fecha, el título, el autor y cualquier otra cosa que se me ocurra.

Por defecto, el título de las entradas se encuentra en <b:includable id="post" var="post" > y tiene este código:

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

Vamos a cambiarlo por algo así:

<div class='elEncabezado'>
  <span class='lafecha' expr:id='&quot;fecha-" + data:post.id'>
    <script type='text/javascript'>calendario(&#39;<data:post.timestamp/>&#39;);</script>
  </span>
  <b:if cond='data:post.title'>
    <h3 class='post-title' expr:id='&quot;titulo-&quot; + data:post.id'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h3>
</b:if>
<span class='elAutor'>mi_nombre</span>
<span> ... cualquier otra cosa ... </span>
</div>

Eso, hará que ahora, las entradas sean rectángulos individuales y por lo tanto, serán mucho más sencillas de manipular cuando intentemos resumirlas:

La primera parte contiene un script optativo que se usará para descomponer la fecha y mostrarla de manera diferente; su código debería agregarse antes de </head> y es el siguiente:

<script type='text/javascript'>
//<![CDATA[
  // LAS FECHAS DE LOS POSTS
  var mes=new Array();
  mes[1]="ene"; mes[2]="feb"; mes[3]="mar"; mes[4]="abr"; mes[5]="may"; mes[6]="jun";
  mes[7]="jul"; mes[8]="ago"; mes[9]="sep"; mes[10]="oct"; mes[11]="nov"; mes[12]="dic";
  function calendario(cual) {
    var verCero;
    var lafecha = cual.split('/');
    verCero=lafecha[1].substr(0,1); if (verCero == "0") { lafecha[1]=lafecha[1].substr(1) }
    fday = "<span class='lafechaDia'>"+lafecha[1]+"</span>";
    fmonth = "<span class='lafechaMes'>"+mes[lafecha[0]]+"</span>";
    fyear = "<span class='lafechaAnio'>"+lafecha[2]+"</span>";
    document.write(fday+fmonth+fyear);
  }
//]]>
</script>

Nos faltaría agregar el CSS.

Aquí lo más importante es agregarle la propiedad position:relative al DIV con el encabezado. Esto será la clave para poder ubicar cada parte de su contenido de manera absoluta, sin márgenes extraños, flotaciones que perturben ni propiedades complejas; de tal forma que pueda verse correctamente en cualquier navegador. Agregamos entonces las definiciones entre <b:skin> y </b:skin>.

No hay demasiadas restricciones al respecto:

/* titulo de los posts */
.post .elEncabezado {
  /* lo importante es definir ancho, alto y posición */
  background-color: #000;
  height: 70px;
  margin: 20px 0;
  position: relative;
  width: 100%;
}
.post h3.post-title {
  border-bottom: 1px solid #444;
  border-top: 1px solid #444;
  font-family: Lucida Grande,sans-serif;
  font-size: 28px;
  font-weight: normal;
  line-height: 1.4em;
  margin: 0;
  width: 410px;
  /* con esta propiedades posicionamos el título */
  padding: 10px 0 20px 60px;
  position: absolute;
  left: 0;
  top: 0;
}
.post h3.post-title a, .post h3 a:visited { 
  /* estas propiedades deben colocarse porque el título es un enlace */
  color: skyBlue;
  display: block;
  font-family: Lucida Grande,sans-serif;
  font-size: 28px;
  font-weight: normal;
  text-decoration: none;
}

/* el autor de los posts */
.post .elAutor {
  color: skyBlue;
  /* con esta propiedades posicionamos al autor */
  position: absolute;
  right: 5px;
  top: 45px;
}

/* la fecha de los posts */
.lafecha {
  display: block;
  font-family: Verdana,Arial;
  font-weight: normal;
  height: auto;
  line-height: normal;
  text-align: center;
  width:40px;
  /* con esta propiedades posicionamos la fecha */
  position: absolute;
  left: 5px;
  top: 4px;
}
.lafechaDia {
  color: #6495ED;
  display: block;
  font-family: Georgia;
  font-size: 36px;
}
.lafechaMes {
  color: #94D5FD;
  display: block;
  font-size: 14px;
  margin-top: -10px;
}
.lafechaAnio {
  color: #DDDDEE;
  display: block;
  font-size: 14px;
  margin-top: -6px;
}

En resumen, dentro de un rectángulo llamado elEncabezado, colocamos cada parte a mostrar y usamos la propiedad position:absolute para ubicarlo en un lugar preciso y eso lo hacemos con las propiedades top, bottom, left y right.

Ahora que lo tenemos todo el post en un solo bloque, ya podemos empezar a ver la forma de mostrarlo resumido.