Blogger agrupa los posts por fecha; nosotros los desagrupamos

...y el desagrupador que bien lo desagrupare, buen desagrupador será.

Pues sí, el título me ha quedado un poco en plan trabalenguas, pero es que mis neuronas andan ya muy quemadas últimamente. La cuestión es que el sistema de Blogger hace algo un poco peculiar con las entradas que tienen la misma fecha y eso a veces nos da problemas para poder manejar bien el aspecto de las entradas.

Esto ocurre en páginas de navegación o en la de Inicio y sobre todo cuando queremos montar algún sistema de sumarios y darle estilo a cada uno de ellos.

Pero empecemos viendo un ejemplo para ver qué es lo que pasa.

---

La estructura de una página de Inicio con tres posts de los cuales los dos primeros tienen la misma fecha, sería como en este esquema (se han nombrado las clases según vienen de serie en las plantillas estándar):

Como veis, una vez que se inicia el bucle que va mostrando las entradas dentro de la clase general blog-posts, Blogger genera una caja para cada fecha (date-outer). Dentro de cada una pone una única cabecera con la fecha común (h2.date-header) y a continuación las distintas entradas de esa fecha bajo la clase post-outer. Aquí ya irá el titulo del post y el contenido del mismo de manera individual.


Ahora supongamos que monto un sistema de sumarios y quiero que las entradas me queden dentro de un borde y por ejemplo un fondo contrastado para poder distinguir fácilmente dónde empieza uno y dónde el siguiente. En un principio no hay mucho problema porque normalmente esas propiedades están en la clase .date-outer (en caso contrario las podemos añadir nosotros) y todas quedarán con ese formato tanto en Inicio como en los posts individuales.

Pero el problema viene cuando publicamos más de una vez al día y Blogger nos agrupa las entradas bajo la misma fecha. Entonces nuestro diseño de sumarios independendientes ya no lo serían tanto:

Podríamos intentar aplicar esos mismos estilos a .post-outer, pero el trabajo sería baldío porque sólo conseguiríamos sacar la fecha fuera del estilo y casi lo mismo ocurriría si probamos con .date-posts.

---

En fin, que en algunos casos es una lata esto de la agrupación, pero sabiendo dónde se genera el asunto podemos modificar un poco nuestra plantilla para cambiar eso y obtener este otro esquema:

El trozo de código que nos interesa es sólo visible seleccionando Expandir plantillas de artilugios. Sería este y lo que habría que hacer sería insertar lo que está marcado en rojo.

<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
          &lt;div class=&quot;date-outer&quot;&gt;
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

          &lt;div class=&quot;date-posts&quot;&gt;
<b:else/>

        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>

</b:if>

        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>

No es un equívoco mío que las aperturas y cierres de algunas etiquetas salgan arriba como < y > respectivamente. Es necesario hacerlo así para que el editor no nos de un error de estructura y nos permita grabar los cambios sin papeletas.

Por ser esta una parte muy importante del código de todas las plantillas, antes de probar te sugiero que reconsideres esa costumbre de no hacer copias de seguridad de vez en cuando ;)


Pues ya está, ya hemos conseguido una estructura HTML que nos permite separar todos los posts aunque algunos tengan fechas coincidentes. Ahora podremos configurar el estilo de las entradas tanto desde .date-outer como desde .date-posts o .post-outer si no nos interesa englobar también la fecha.


Hice el esquema de colores porque pienso que se ve más claro, pero esto mismo traducido en código real supone pasar de lo que muestra la primera captura a lo que se ve en la segunda. El color blanco representa cada entrada, ya que he usado para las marcas rectangulares a la izquierda los mismos colores que en el susodicho esquema.

¿Alguien se percató de que sigue saliendo sólo una vez la fecha cuando hay más de un posts por día? Bien, así me gusta, que estéis atentos.

Lo que ocurre es que Blogger guarda la fecha de cada post, pero sólo la recupera para el primero de los que tienen la misma. Pero esa es otra historia que ya vimos hace tiempo y que tiene también fácil solución.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter