Blogger agrupa los posts por fecha; nosotros los desagrupamos | Oloblogger ...y el desagrupador que bien lo desagrupare, buen desagrupador será. Pues sí, el título me ha quedado un poco en plan trabalenguas, pero ...

29 de octubre de 2012

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 &lt; y &gt; 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
Copy URL

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

follow us in feedly

41 comentarios :

  1. Vaya, hace tiempo que estaba esperando una explicación así Oloman. También he tenido ligeras molestias por estas cuestiones de la fecha. Ahora probaré los cambios y espero no tenga mayor inconveniente. Como siempre, gracias.

    ResponderEliminar
  2. Lo que yo me di cuenta es que blogger ahora tambien hace aparecer las fechas con etiquetas de numeros, por ejemplo en este blog de peliculas online con la etiqueta "2012", las entradas aparecen con este url: http://www.cinezito.com/search/label/2012 (cosa normal)
    pero tambien aparecen sin el "/search/label/" , es decir de esta forma:
    http://www.cinezito.com/2012

    Revisen sus etiquetas con numeros o años por decirlo asi.

    ResponderEliminar
    Respuestas
    1. Bueno, no exactamente y me parece que eso ha ocurrido siempre. Cuando pones la segunda forma lo que te muestra son todos los posts publicados en 2012 y no sólo los de esa etiqueta. Compruébalo con una peli de 2011 pero sobre la que hayas publicado en 2012. Te debería salir ;)

      Eliminar
  3. donde se cierra el primer loop?

    ResponderEliminar
    Respuestas
    1. En la etiqueta que ves como </b:loop> Lo que ocurre es que no se me quedó el código bien alineado, pero si te das cuenta el if está cerrado justo antes.

      Eliminar
  4. Me encantaría algo parecido, pero con etiquetas. Agrupar post en la página principal por etiquetas y no por fecha ¿se podrá?

    ResponderEliminar
    Respuestas
    1. Eso es algo más que un cambio de estructura. Pienso que se podría hacer si quitáramos las entradas de la página principal mediante una condición y luego añadimos unos gadgets especiales que precisamente sólo se verían en la página principal. Esa es la idea, pero no te puedo concretar el código necesario.

      Eliminar
    2. Si, me parece que habría que cambiar a fondo la plantilla. Es algo largo y cansado eso. Seguramente algún día los que viven de hacer plantillas lo harán :P

      Yo como debo ocuparme más en el contenido, lo dejaré para los ratos libres jaja Saludos y un abrazo.

      Eliminar
    3. Tú y todos. Antes contenido que continente ;)

      Eliminar
  5. Me sale un error al no querer guardar la plantilla:

    Error al analizar XML, línea 1937, columna 7: The element type "b:loop" must be terminated by the matching end-tag ""

    ResponderEliminar
    Respuestas
    1. Quizás es porque marqué en rojo la primera línea y esa hay que dejarla como estaba, no hay que añadir un segundo LOOP.

      Eliminar
  6. Hola, gracias por tus tutoriales siempre me ayudan, tengo una consulta: tengo un blog con solo 4 entradas(quiero que así quede) y lo que quisiera es saber como puedo hacer para que la fecha que aparece siempre se encuentre actual? lo hago manualmente editando las entradas pero quisiera poder usar una condicional o algo para que se actualice automáticamente, me ayudarías?

    ResponderEliminar
    Respuestas
    1. Bueno, lo mejor sería que ocultaras las fechas que la plantilla muestra y que en su lugar pusieras un pequeño javascript que mostrara la fecha del día.

      Eliminar
  7. Hola Oloman te tengo en favoritos, aunque llevo 2 días leyéndote, eres muy útil, mi consulta es: Tengo una entrada en mi blog, pone cojines corazón vale, cada vez que haga un cojín con esa forma lo quiero subir a esa misma entrada, pero al modificarla o editarla, me viene la misma fecha en que creé la entrada por primera vez,a mi me gustaría que al entrar en esa entrada venga separados la fecha y la entrada de cada post que subo. Aunque sea en la misma entrada, no se si me explico. Mi blog es http://miscosturascaprichosas.blogspot.com.es y si entras es lo primero que sale porque la entrada la acabo de subir ahora y la fecha viene del dia 17. Espero tu respuesta, Mil GRACIAS

    ResponderEliminar
    Respuestas
    1. Para eso que quieres no es práctico un blog, porque esto viene a ser como una lista de artículos ordenados (inversamente) por fecha de publicación. Podrías cambiar la fecha de nuevo cada vez que lo editas (cada vez que incluyes nuevos cojines) sin problemas, poniendo la del día actual. Pero ¿por qué no creas simplemente nuevas entradas cada vez que quieres mostrar uno nuevo?

      Si es del mismo tipo que otros, pues creas una etiqueta. Cualquiera que quiera ver todos los "Cojines corazón" verá todas esas entradas de una vez. Pincha en una de las que tienes bajo el título de mi blog si no sabes muy bien de que estoy hablando y fíjate que todos los que salen tienen un tema (etiqueta) en común, la que seleccionaste.

      Eliminar
    2. Muchas gracias Oloman, pero... navegando por tu blog, ya había encontrado la respuesta, y estoy haciendo y aprendiendo muchas cosas contigo, ya he cambiado bastante mi blog, gracias por compartir tus conocimientos.

      Eliminar
  8. Excelente. Muchísimas gracias.

    ResponderEliminar
  9. Otra vez estoy aquí, muy buenas. Pues ahora es para otro blog que estoy haciendome. Y no me sale nada del codigo este, no se donde poner lo que sale en rojo, ya que mi estructura no es igual. Porfe ayuda quiero desagruparlos. Es para cristinaysuscositas.blogspot.com.es Gracias

    ResponderEliminar
    Respuestas
    1. Lo primero es comentarte que si no vas a publicar más de un post por fecha, esto no te hace falta. Lo segundo es que para ver esa estructura, tendrás que pinchar en "Expandir plantillas de artilugios". Lo tercero... lo veremos si esas dos anteriores no son suficientes ;)

      Eliminar
  10. ¡Muy buen post! Lo aplique a mi blog y funciono muy bien, pero tengo un ligero problema… en la portada quedo un espacio muy grande entre la cabecera del blog y el título de la entrada y eso le quita estética a mi blog.

    Alguna idea de cómo solucionarlo?

    Mi blog es este http://peliculasaudiolatinogratis.blogspot.com

    Saludos amigo.

    ResponderEliminar
    Respuestas
    1. Eso no tiene nada que ver con este truco. Tiene que ver con esto:
      .main-inner {
      padding-top: 30px;
      }

      Eliminar
    2. Si tiene que ver! Porque cuando aplique el truco, las entradas quedaron separadas como lo indica el post, pero quedo ese hueco entre el título de la entrada y la cabecera. En las entradas individuales todo está bien, el problema es en la portada.


      Ya intente mover el código que mencionas de esta forma:

      .main-inner {
      padding-top: 0px;
      }

      Y el título de la entrada en la portada sube, sin embargo también lo hace el de las entradas individuales y eso soluciona el problema de la portada, pero crea otro problema al pegar demasiado el título de las entradas individuales con la cabecera.

      Alguna otra solución que mueva solamente el título en la portada y no el de las entradas individuales? Te lo agradeceré mucho, saludos.

      Eliminar
  11. ¡Ya lo solucione! Disculpa por la molestia ocasionada.
    Saludos.

    ResponderEliminar
    Respuestas
    1. No es molestia pero ¿al final tenía que ver o no? :)

      Eliminar
    2. Si, tenías razón.

      Buen blog el tuyo, saludos :-)

      Eliminar
  12. Genial!! Me ha ido de maravilla este post!! Eres un crack!

    ResponderEliminar
  13. orale me sirvio mucho gracias =)

    ResponderEliminar
  14. jeje disculpa otra cosa.. el unico detalle es que no sale la fecha en los posts arreglados ... solo sale en el primero de dicha fecha ... saludos =)

    ResponderEliminar
    Respuestas
    1. Es un detalle a mi parecer menor, pues con que lleve la fecha el primero de la tanda pienso que es suficiente. De todas formas, si quieres recuperarla tendrás que acoplar a ese mismo código este otro

      Eliminar
  15. Excelente, es lo que andaba buscando y funcionó maravillosamente. Gracias Oloman.

    ResponderEliminar
  16. Hola Oloman,
    No sé si verás este comentario, porque la entrada es de hace un tiempecillo pero por si acaso, una preguntilla: he conseguido separar las entradas tal y como señalas pero... antes del título de cada una me sale una línea, la que hacía de separación entre una entrada y otra cuando salían agrupadas, ¿me podrías decir cómo se quita?
    Muchísimas gracias adelantadas y por el post y el blog, son de gran ayuda ;)

    ResponderEliminar
    Respuestas
    1. No veo esa línea que dices actualmente Casala. Supongo que ya lo solucionaste ¿no?

      Eliminar
  17. Hola, Oloman,
    Perdona, que he estado fuera u no te he podido contestar.
    Sí, conseguí solucionarlo (y juraría que te había avisado... :s).
    Muchas gracias por preocuparte.
    Saludos.

    ResponderEliminar
  18. Muchas gracias por la informacion. Pero tengo un problema. Antes de colocar esta rutina puse la de que me mostrase la fecha en todas las entradas, aunque fuera del mismo dia. Al añadir esta lo que me hace es que separa las entradas que son del mismo dia, pero no me muestra la fecha

    ResponderEliminar
    Respuestas
    1. Sí Miguel Angel. Este código tal cual no contempla lo de la fecha, pero puedes añadir el otro que viste a este y lo solucionas.

      Eliminar
  19. Me quedó fantástico! Mil gracias...

    ResponderEliminar
  20. Un problema que crei nadie se molestaria en explicar y resolver, Oloblogger un grande

    ResponderEliminar
    Respuestas
    1. Bueno, es que este asunto me resultaba muy molesto para diversos trucos, así que sí, efectivmente, me "molesté" en resolverlo ;)

      Eliminar
  21. Hola, como aplica esto al nuevo panel de blogger? Soy novato y no se como resolverlo, ya que la explicacion tiene un par de añitos... gracias!

    ResponderEliminar
    Respuestas
    1. Aunque haya pasado tiempo la cosa se hace e la misma manera Sergio, editando la plantilla. Lo que ocurre seguramente es que tendrás una plantilla de las del Nuevo Diseñador o una de las Dinámicas. Con esas este truco no se puede aplicar.

      Eliminar