La fecha y el título: Uno al lado del otro

JMiur

Blogger tiene dos códigos diferentes para agregar la fecha de las entradas, por defecto, en las plantillas se utiliza el menos flexible a la hora de personalizar el diseño:

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 ...

Tal como comentaba en esa entrada, el rectángulo (cada etiqueta es un rectángulo) que contiene la fecha esta MUY afuera del rectángulo que contiene el título y por lo tanto, cuando se quiere poner uno al lado del otro, las cosas se complican. A veces, esto se resuelven con CSS y a veces no, sobre todo, en las nuevas plantillas.

En general, el esquema de las entradas que veremos en el código fuente es este:

<!-- este es el rectángulo que contiene todos los posts o uno solo si se trata de una entrada individual -->
<div class='blog-posts hfeed'>
  <!-- este es el rectángulo que contiene cada post -->
  <div class='date-outer'>
    .......
    <!-- esta es la fecha por defecto que sólo se muestra una vez si hay varias entradas con la misma fecha -->
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

  .......
  <!-- más rectángulos !!! -->
  <div class='date-posts'>
    <div class='post-outer'>
      <div class='post hentry'>
        <!-- por fin, acá está el título de la entrada -->
        <h3 class='post-title entry-title'> ....... </h3>

        <!-- y su contenido -->
        <div class='post-body entry-content'>
          .......
        </div>
      </div>
    </div>
  </div>

  <!-- si no es una entrada individual, habra otro igual al anterior, tantos como hayamos definido -->
  <div class='date-outer'> ....... </div>
  <div class='date-outer'> ....... </div>
  .......
  <div class='date-outer'> ....... </div>

</div>

Entonces, si queremos darle una solución definitiva y queremos seguir usando ese dato, lo razonable sería mover la fecha y ponerla arriba del título (o debajo si se nos ocurre):

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

    </b:if>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
        .......

Y lo mejor para personalizar eso es empezar desde cero, eliminando cualquier padding, margin, etc. Lo hago paso a paso y sin modificar etiquetas:

/* este es el rectángulo de cada post */
.post { background-color: Gainsboro; margin: 0; padding:0; }

/* esta es la fecha */
h2.date-header { color: Teal; font-family: Arial; font-size: 20px; font-weight: normal; margin: 0; }

/* este es el título */
.post h3 { font-weight: normal; margin: 0; padding: 0; }
/* que es un enlace */
.post h3 a, .post h3 a:visited, .post h3 strong { color: Crimson; font-family: Georgia; font-size: 30px; }

/* y este es el contido de la entrada */
.post-body { margin: 0; padding:0; }

Se verá ... esto:

Para separar una entrada de la otra, les agrego un margen arriba y abajo:

.post {
  .......
  margin: 20px 0;
}

separo la fecha y el título del contenido de la entrada:

.post-body {
  .......
    margin: 30px 0 0;
}

y separo la fecha y el título del borde superior:

.post {
  .......
  margin: 30px 0;
  padding: 10px 0;
}

Voy a poner la fecha a la izquierda y el título a la derecha de esta, una al lado de la otra. Para eso, uso float:

h2.date-header {
  .......
  float: left;
}
.post h3 {
  .......
  float: left;
}

y como flotan, limpio la flotación en la siguiente etiqueta y uso padding en lugar de margin para separar el contenido:

.post-body {
  .......
  clear: both;
  padding: 30px 0 0;
}

Alineo verticalmente la fecha y el título dándoles una altura y estableciendo line-height con ese mismo valor:

h2.date-header {
  .......
  height: 40px;
  line-height: 40px;
}
.post h3 {
  .......
  height: 40px;
  line-height: 40px;
}

Le agrego un color de fondo a la fecha y coloco un padding para separar el texto y que se vea el tamaño real de esa etiqueta:

h2.date-header {
  .......
    background-color: White;
    padding: 0 10px;
}

Uso margin para separar la fecha del borde izquierdo y del título que está a la derecha:

h2.date-header {
  .......
    margin: 0 10px;
}

Ahora, hago lo mismo con el título:

.post h3 {
  .......
  background-color: Bisque;
  padding: 0 10px;
}

Y ya tengo uno al lado del otro y bien alineados.

Obviamente, este no es el único metodo que existe pero puede dar una idea de cómo se manipulan las etiquetas y cuales son alspropeidades que las afectan.