Jugando con los posts (Magazine 1)

Esto comenzó como curiosidad y luego fue ampliándose tanto que terminé por dividirlo en tres partes, como si fuera una novela de misterio así que, un poco de paciencia

Hace ya un mes o más, Gem@ me mostraba un truco que había visto en Blogger Buster, donde se explicaba la forma de crear algo similar a una de esas plantillas que están tan de moda en WordPress y que, genéricamente, se denominan tipo magazine.

Luego de varios intentos infructuosos, renunciamos al asunto, no tanto porque no funcionara sino porque su uso terminaba siendo bastante limitado pero ... año nuevo vida nueva así que vamos otra vez a la carga a ver hasta dónde es posible llegar

Para guiarme en el tema, prefiero la entrada de Ariane en Templates Novo Blogger por varias razones, porque me resulta más clara y además, porque recientemente la han ampliado y además, nos dan la plantilla demo para descargar.

La idea, entonces, es empezar desde ahí y ver las dificultades que tiene este tipo de plantilla y las alternativas que ofrece.

Comienzo entonces con la plantilla mínima modificada en su ancho. Para eso, recurro al tutorial que muestra cómo hacerlo o bien, cambio las dos o tres definiciones CSS directamente:

en #header-wrapper, #outer-wrapper y #footer-wrapper cambiamos el ancho y escribimos width: 980px;
en #main-wrapper usamos width: 560px;
en #sidebar-wrapper usamos width: 390px;

Lo primero será eliminar la fecha de los posts. Esto, lo hacemos porque sino, se nos hará difícil de manejar esa parte ya que Blogger la separa del resto; luego, veremos si hay otra alternativa. Entonces, expandimos los artilugios, buscamos esta parte y eliminamos (o comentamos) las lineas en negrita:

<b:loop values='data:posts' var='post'>

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

<b:include data='post' name='post'/>

Ahora, sólo nos queda modificar una cosa: el ancho de los posts que, en realidad, no están definidos en ninguna parte. Como todo en el blog, el área de posts es un rectángulo, un DIV que está dentro de otro y el ancho es definido por alguno de los "elementos padre". En la plantilla mínima pasa esto:

<div id="main-wrapper">
  <b:section class="main" id="main" showaddelement="no">
    <b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog">
      <div class="blog-posts hfeed">
        <div class="post hentry uncustomized-post-template">
          ....... aqui se muestra el post .......

El ancho de los posts es igual al ancho de main-wrapper pero, podemos modificarlo y, por ejemplo establecer que su ancho sea la mitad; de esta manera, como flotan, aparecerán uno al lado del otro en lugar de uno debajo del otro. Pero, esto lo queremos hacer sólo en la página principal y no en las entradas individuales así que lo más sencillo es usar los condicionales y agregar el estilo CSS, justo después de </b:skin>. Por ejemplo:

<b:if cond='data:blog.pageType != "item"'>
  <style type='text/css'>
    .post {
      background-color: #FAF5FF;
      border-bottom: 10px solid #FFFFFF;
      float: left;
      margin: 0 10px;
      overflow: hidden;
      width: 310px; /* este es el dato importante */
    }
  </style>
</b:if>

Si no hacemos nada más, lo que veremos, será esto.

Con facilidad, podemos colocar un post al lado del otro pero, si no hacemos algo más, el resultado será extraño porque las alturas de cada entrada son variables y el resultado será bastante aleatorio así que el punto fundamental de este tipo de plantillas es que debemos controlar esa altura, debemos establecerla nosotros mismos para que cada rectángulo sea igual al otro, sin importar el contenido. Entonces, podríamos cambiar un poco el estilo CSS anterior, indicar la altura (height) y, para evitar que se corte, poner una barra de desplazamiento lateral:

.post {
  background-color: #FAF5FF;
  border-bottom: 10px solid #FFFFFF;
  float:left;
  height: 200px;
  margin: 0 10px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 310px;
}

El resultado será un poco mejor pero, bastante primitivo así que habrá que seguir pensando. (ver ejemplo online)

Respiramos y vamos con la segunda parte ...