Blogger: el primer post con un estilo diferente II

Blogger, Tutoriales Publicado por Claudia en julio 6, 2009

Guti me pedía que explicara un poco más acerca de cómo mostrar el primer post con un estilo distinto en Blogger (viene de acá), utilizando el nuevo código condicional que aparece en las plantillas.

En general, es posible hacer modificaciones básicas añadiendo estilos condicionales bajo el cierre de “b:skin“, y justo antes del cierre de la etiqueta “head“, de la siguiente manera:

Condicionales Blogger

Lo anterior va a definir estilos para el primer post, que son distintos a los de los posts individuales. En el ejemplo, puse un color distinto para el cuerpo de los posts (post-body). No obstante, añadir condicionales para el primer post es algo más complejo que eso. No recomiendo su uso para quienes no están familiarizados con la estructura de las plantillas de Blogger, porque podrían sufrir un gran dolor de cabeza.

Hace unos días, Ro Zanchetta escribió una entrada de cómo usar la nueva etiqueta “isFirstPost” en Blogger, con un ejemplo concreto para plantillas tipo revista, utilizando un hack para “leer más”. Para quienes son arriesgados y quieren “lanzarse directamente a los leones”, el post de Ro es una lectura obligada. Por mi parte, voy a explicar el mecanismo para usar condicionales para el primer post, de acuerdo a mis propios experimentos.

Ahora bien: Al expandir los artilugios de las plantillas, es posible encontrar la siguiente código:

<b:includable id='post' var='post'>
Código-post
</b:includable>

Lo que llamé Código-post son muchas líneas de código, las cuales en una plantilla muestran: el título de un post, el cuerpo del post, y el footer del post, donde aparecen los meta-datos: autor del post, hora, comentarios, etiquetas y otros.

Entonces, el procedimiento a seguir es el siguiente: copiar el código de los posts (debe mostrarse dos veces en total) utilizando distintos condicionales, de la siguiente manera:

<b:if cond='data:post.isFirstPost'>
Código-post con clases distintas para el primer post
<b:else/>
Código-post
</b:if>

El “Código-post” es el código completo, íntegro, sin cambios. Sin embargo, el “Código-post con clases distintas para el primer post” debe tener algunos cambios. Por ejemplo:

  • En vez de “div class=’post-entry‘”, voy a usar “div class=’post-entry-first‘”
  • En vez de “div class=’post-body entry-content‘”, voy a usar “div class=’post-body-first’

Y así sucesivamente, definiendo mis propios selectores para esa sección. Preferí usar selectores similares a los de la plantilla Mínima, agregando “-first” a cada uno, para que sean más fáciles de recordar.

Hecho este procedimiento, sólo queda definir las propiedades para cada selector antes del cierre de “b:skin”, como en la siguiente imagen (sólo es un ejemplo, porque puedes hacer mucho más):

Condicionales Blogger

Voilá! Eso es todo. Probablemente, la etiqueta “isFirstPost” dé para una nueva entrada de este tipo, sobre cómo añadir hacks. A mí, por ejemplo, me gustaría poner un hack “leer más” automático en el primer post, y un hack “leer más” no-automático para los siguientes. Es cosa de seguir experimentando…

Compártelo!
6 Comentarios en Blogger: el primer post con un estilo diferente II
  1. guti dice:

    gracias por ampliar la entrada referente al primer post con un estilo diferente.Está bastante clara y gracias a eso la he podido entender algo mas.intentaré ponerlo en practica.Gracias . Guti

  2. Sergio dice:

    Muy buen post, pero no termino de entenderlo, asi pues no se implementarlo en mi blog 🙁

    ¿No podrias colgar una plantilla con todo el codigo para poder avanzar desde ahi en adelante?

    Un saludo y felicidades por este blog 🙂

  3. karolayne dice:

    Muy buen post, pero no termino de entenderlo, asi pues no se implementarlo en mi blog .
    gracias por ampliar la entrada referente al primer post con un estilo diferente.

  4. Ana Laura dice:

    Esta super interesante. A mí me encantaría poder hacer exactamente lo opuesto a lo que te interesa a vos, que gracioso. Me gustaría que el primer post estuviera completo y los demas tuvieran un leer más automático. Seguiré leyendo del tema a ver si puedo llegar a buen puerto.

    Muchas gracias!!!

  5. DistritoUrbano dice:

    hola me podrias explicar bien es que no entiendo que tengo que hacer y me interesa mucho este post

  6. DistritoUrbano dice:

    NO ENTIENDO T_T

Deja tu comentario
Tu Comentario