No se desde cuando existe esta opción (ya se sabe que blogger hace cambios sin decir ni pío), pero me acabo de enterar via blogger code de que en los loops de blogger se puede añadir un atributo llamado index, que añade el dato de cual es el elemento por el que estamos pasando. Es básicamente un contador, que empieza en cero.

Hasta ahora, se podía personalizar el primer post gracias al condicional data:post.isFirstPost, pero ahora se puede ir mucho más allá. Si en el loop principal de los posts (el que está cerca de <div class="blog-posts hfeed">), añadimos el atributo index tal que así:

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

Podemos añadir una clase al post-outer para editar los posts según el orden cambiando <div class='post-outer'> por lo siguiente:

<div expr:class='"post-outer post-numero-" + data:postNum'>

Esto nos permitirá hacer cosas con el css como:

.post-numero-2 .post-body {
    /* Editamos el tercer post (tened en cuenta que el contador empieza en 0)*/
    color: red;
}

Que haría que el tercer post fuera de color rojo (es un ejemplo extraño, pero veis adonde quiero llegar no).

Yendo más allá

Todavía se puede ir más allá usando los condicionales de blogger:

<b:if cond='data:postNum == 3'>
    Ésto sólo aparecerá en el cuarto post.
</b:if>

Esta característica no es específica de loop de los posts, se puede aplicar a cualquier otro, pero es especialmente interesante en él, y aporta un soporte genial para la creación de plantillas totalmente personalizadas.

Esto es todo por hoy que no es poco ;). Espero que os sea útil y que, si os ha parecido útil lo compartáis, para que más gente se pueda beneficiar de esta característica que hasta hace poco no se conocía.

14 pensamientos en “El atributo index en el loop de blogger, o cómo personalizar los posts dependiendo del orden

  1. Bitacoras.com
  2. Imagen de Karla el dijo:

    Hola Emilio,

    Me alegra haberme pasado por tu blog. No sabía de la existencia de ese atributo :D jaja, interesante, muy interesante.

    Por lo que dices, Blogger no hace mención del atributo, tampoco lo he visto en sus artículos que hablan sobre los bucles y datos, de todos modos, es buena noticia, de verdad que sí.

    Muchas felicidades por la adquisición de tu dominio y muchos éxitos.

  3. Imagen de Gerardo el dijo:

    Hola Emilio que excelente que hayas cambiado a WordPress ;). Te tengo una pregunta dime utilizas un plugin o solo es CSS para obtener ese estilo cuando usas CODE, si es asi explicalo porfavor que esta muy bueno. Saludos y exito!.

  4. Imagen de Reina el dijo:

    Buenas Emilio;
    Me suena esto, de hecho hace unos meses inserte algo parecido en uno de mis blogs de pruebas. Era un tutorial, que no recuerdo donde estaba, en el que te daban el codigo para poder personalizar los 5 o 6 primeros post de la portada.
    Ahora estoy buscando el tutorial y no lo encuentro, ¿Sabes algun tutorial que explique como personalizar los primeros post de la portada?
    Un saludo y enhorabuena por tu blog, es fantastico…

  5. Imagen de Reina el dijo:

    Hola Emilio, no se si habrá llegado el anterior comentario.
    Al hilo de este post, queria preguntarte si sabes donde hay un tutorial de como personalizar los primeros post de la portada. Es que recuerdo que hace unas semanas encontre un sitio donde habia un tuto con los codigos a insertar i modificar, para esta tarea que te digo, el caso es que no me acuerdo en que pagina lo vi.
    Saludos y sigue asi, me encanta tu blogm genial!!!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sí que llegó, sólo que al spam (no sé por qué). No sería muy difícil con esto: Sería usar el código de la entrada junto con el de esta nueva entrada (la segunda opción), para hacer algo así desde el CSS:

      [data-home="true"] .post-numero-0 {
      	/*Códigos para el primer post*/
      }
      [data-home="true"] .post-numero-1 {
      	/*Códigos para el segundo post*/
      }
      /* etc */
  6. Personalizar las entradas de blogger según sus etiquetas | Emilio Cobos-CMC

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.