Códigos condicionales en Blogger

Tweet

Aunque lo expertos en «marca personal» —o como diría alguno personal branding— dicen que los contenidos de tu blog no han de dispersarse demasiado, el objetivo de este es sin embargo el de contar cosas interesantes acerca de cómo entender la realidad que nos rodea: el lenguaje y códigos utilizados para explicarla, comunicarla, almacenarla, así como los medios y tecnología utilizadas. Y por supuesto, el contexto social y político que pone todos estos recursos al alcance de la sociedad.

Así que en esta ocasión, aunque suponga tal vez un pequeño «salto», el tema a tratar es el de cómo utilizar uno de los canales que existen en la actual sociedad de la información que ahora mismo existen: los blogs de Blogger. Estos se caracterizan por sus grandes posibilidades de personalización y una de las funciones que utiliza para ello son unos fragmentos de código que se programan en la plantilla de nuestro blog, llamados condicionales —o condicionantes—. Aunque va a ser una explicación superficial, será necesario emplear un lenguaje informático.

Mostrar lo que se desea en función del tipo de contenido

La utilidad básica de estos condicionales es ejecutar un fragmento de código —html, javascript, ,css, o cualquier otro que lo permita la plataforma— unicamente si se cumple una condición —de aquí el nombre, claro—, con el objetivo de que se muestre o no un elemento o estilo determinado —un widget, un texto, una imagen... lo que sea que pueda aparecer en una página web—.

El lenguaje empleado es propietario de Blogger, es decir, es un código de programación especifico creado por Google para su plataforma de blogs, que sólo ella entiende. Sin embargo, utiliza operadores de relación de la misma sintaxis que el lenguaje C —al menos los explicados en este artículo, el resto no los he probado, pero sería una buena práctica que el lector podría compartir—.

1. Partes del condicionante

El condicionante no se trata de otra cosa que el clásico «if-then-else» de la programación, aunque en este caso el «then» está implícito. Tras el «if» se programa una condición cuyo resultado será un verdadero o falso —booleano—. Esta condición puede ser una operación de relación normalmente de igualdad —o su negación— o puede ser también una variable del tipo verdadero/falso. Si se trata de una relación de igualdad, como en toda que se precia habrán dos partes. En una de ellas estará el elemento a comprobar, y en la otra el valor a partir del cuál elegiremos mostrar o no el elemento.

En cualquier caso el resultado de la operación, sea una relación de igualdad o comprobación de variable booleana, será un verdadero —true— o falso —false—. Si se cumple, entonces el código a continuación se ejecuta.

2. Listado y ejemplos

Dejemos la parte teórica y vayamos al grano.

1. Comprobación de variable booleana

«es el primer post»

Blogger tiene una variable booleana llamada isFirstPost cuyo valor «verdadero» indica que el post actual es el primero —o el más reciente—. Sirve para diferenciar entre la última publicación y el resto para por ejemplo dejarlo sin resumir a modo de portada, mientras que el resto se crean resúmenes. Para esto es necesario tener el código que realiza los resúmenes, por supuesto. Este ejemplo ha sido aplicado en este mismo blog.

<b:if cond='data:post.isFirstPost'>
... aquí va el código del elemento que deseamos mostrar cuando se cumpla la condición...
<b:else/>
... y aquí cuando no se cumpla...
</b:if>

El «else» es opcional, por lo que en los casos posteriores se omite, ya que es exactamente el mismo proceso.

2. Cumplimiento de igualdad (o su negación)

«es la página de inicio»

Con la siguiente sentencia se puede determinar si la pagina del blog que estamos viendo es la de inicio o se trata de cualquier otra. Esto es útil para por ejemplo si se desea presentar en la barra lateral elementos distintos distinguiendo entre la página de inicio y el resto.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
...elemento a mostrar cuando sea la página de inicio...
</b:if>

El operador «==» es la relación de igualdad. Si lo que se desea es comprobar que NO son iguales, se sustituye por el operador «!=» que es su negación. Por ejemplo:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
...elemento a mostrar cuando NO sea la página de inicio...
</b:if>

En este caso data:blog.url es la dirección que en ese momento está cargada en nuestro navegador. En el otro lado de la igualdad, data:blog.homepageUrl es una variable propia de Blogger en la que se guarda la dirección de inicio de nuestro blog.

«es una página determinada»

Si por algún motivo se desea destacar o mostrar un elemento únicamente en una página concreta de nuestro blog, la técnica anterior sirve sin más que cambiar data:blog.homepageUrl por la dirección o URL específica, indicándola entre comillas dobles.

<b:if cond='data:blog.url == "http://cualeslarealidad.blogspot.com"'>
...elemento a mostrar cuando es la pagina indicada...
</b:if>

En este caso se ha sustituido por la misma dirección de inicio del blog, por lo que tendría exactamente el mismo efecto que la opción anterior.

Nota: desde que Blogger añade el código por país a cada blog en función de nuestra localización, sería necesario sustituir data:blog.url por data:blog.canonicalurl.

«es una etiqueta determinada»

Cada etiqueta que se usa en el blog tiene asociada una URL en la que se muestran todas las entradas del mismo con dicha etiqueta. Esta dirección se forma de la siguiente manera:

nombre_del_blog.blogspot.com/search/label/etiqueta

Que en el caso de este blog y para la etiqueta «democracia» sería sustituyendo lo indicado en color azul claro:

http://cualeslarealidad.blogspot.com/search/label/democracia

Si al caso anterior en la que se mostraba un elemento en una página determinada, se sustituye la dirección de dicha página por la que deseemos de la etiqueta en cuestión, se podrá hacer lo propio para una etiqueta determinada:

<b:if cond='data:blog.url == "URL asociada de la etiqueta"'>
...elemento a mostrar cuando es la etiqueta indicada...
</b:if>

3. Por tipo de página

Además de estas variables en las que se guarda la dirección de inicio del blog o cuál es la publicación más reciente, hay otra muy importante que guarda el tipo de página que estamos viendo: data:blog.pageType. Gracias a ella se puede distinguir entre el archivo del blog, un índice de entradas o un artículo individual. La sintaxis es la siguiente:

<b:if cond='data:blog.pageType == "tipo de página"'>

  ... esto sólo se verá en las páginas del tipo indicado...

</b:if>

Y «tipo de página» deberá sustituirse por el valor adecuado en función de si:

«es una entrada individual»

Si se desea mostrar un elemento únicamente en los artículos individuales —por ejemplo, enlaces o botones de suscripción— se ha de indicar como tipo de pagina item.

<b:if cond='data:blog.pageType == "item"'>
  ... esto sólo se verá en las páginas de artículos individuales...
</b:if>

«es una página de archivo»

El archivo es un índice especial en el que se agrupan por fechas las entradas del blog. Para mostrar un elemento únicamente en este tipo de páginas, se ha de indicar como tipo de pagina archive.

<b:if cond='data:blog.pageType == "archive"'>
  ... esto sólo se verá en las páginas de archivo.
</b:if>

«es una página estática»

Las páginas estáticas son aquellas que no están relacionadas con una fecha, al contrario del resto de las entradas del blog que siempre están asociadas a una de publicación —por eso es un blog—. Por sus características, son las páginas que se suelen utilizar para las secciones «sobre el blog», «sobre el autor», o cualquier otra que no dependa de un factor temporal. El valor a indicar es static_page.

<b:if cond='data:blog.pageType == "static_page"'>
  ... esto sólo se verá en las páginas estáticas...
</b:if>

«es cualquier otra página»

Si se desea excluir a todas las anteriores para mostrar un elemento en el resto de páginas como la de inicio o cualquier otra en la que haya un índice de entradas ordenadas por relevancia o cronológicamente, el valor a indicar es index.

<b:if cond='data:blog.pageType == "index"'>
  ... esto sólo se verá en el resto de páginas...
</b:if>

Algunos que lo explicaron de otra manera:

• Condicionantes en Blogger. AyudaBloggers{...}. <enlace al blog>
• Condicionales de Blogger. ciudadblogger. <enlace al blog>
• Blogger y el uso de códigos condicionales. Vagabundia <enlace al blog>

[actualización 23/05/2015]: Google ha mejorado las funciones y potencia de estos comandos. Más información aquí.