condicionales | Chica Blogger
Blogger, Tutoriales

Blogger: el primer post con un estilo diferente II

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…

Tags: , ,
Blogger

Blogger: el primer post con un estilo diferente

Publicado por Claudia en junio 23, 2009

Desde hace un tiempo, me preguntaba cómo hacer que en Blogger el primer post se muestre distinto a los demás, de modo tal que éste tenga un estilo único que lo haga destacar sobre el resto.

Actualmente, Blogger está añadiendo nuevos códigos (y posibilidades) a sus plantillas, que al parecer van de la mano con su aniversario número 10. Así, por ejemplo, se rumorea (con bases muy certeras) la posibilidad de inclusión de un hack que permite acortar los posts, y que es análogo a la función “more” de WordPress.

La última gran novedad, es la inclusión de un nuevo código condicional que hace posible definir un estilo distinto y único sólo para el primer post:

 <b:if cond='data:post.isFirstPost'> contenido </b:if>

Este código puede ser de gran utilidad para destacar el título del primer post (como muestra Ro en Bloggersphera), conseguir que un determinado hack (por ejemplo, “leer más con thumbnails“) se aplique sólo al primer post, o destacar el post completo al estilo de los “featured posts” de WordPress.

Los condicionales de Blogger son apliamente usados para aplicar hacks o crear plantillas tipo Magazine, galerías de imágenes. Por ejemplo:

  • Para mostrar sólo en la página principal
<b:if cond='data:blog.pageType == "index"'> contenido </b:if>
  • Para mostrar en un post individual
<b:if cond='data:blog.pageType == "item"'> contenido </b:if>

*Podrían cumplir funcionales análogas al index.php y el single.php de WordPress, respectivamente.

Estos tres códigos condicionales básicos expanden las posibilidades de Blogger, y lo llevan a niveles insospechados hasta hace quizá un par de años. Si quieres adentrarte en su uso, puedes revisar el excelente tutorial de Vagabundia que explica el uso avanzado de condicionales.

Por ahora, el uso de condicionales para el primer post da para detenerse un rato a probar y experimentar, porque no es un ejercicio realmente simple (aunque sí puede tener resultados muy satisfactorios). Sigo haciendo mis propios experimentos.

Tags: , , ,