Blogger y el uso de códigos condicionales

El uso de los códigos condicionales es lo que nos permite hacer que nuestro blog tenga cierto dinamismo, haciendo que algunos elementos se muestren en determinado tipo de páginas o modificando su diseño por completo.

La diferencia entre ocultar algo con CSS o JavaScript y usar estos condicionales es sustancial. Si bien, a simple vista parece lo mismo, no lo es en absoluto. Cuando ocultamos con CSS usando propiedades como display:none; sólo hacemos invisible cierta parte pero, el código y su contenido, serán ejecutados igual; como resultado, el tiempo de carga del sitio no variará ya que la cantidad de datos que debe leer el navegador es la misma. Lo comprobamos con facilidad; si miramos el código fuente, eso que ocultamos se verá.

Por el contrario, los condicionales no son ejecutados por el navegador sino por el mismo Blogger, es decir, se ejecutan ANTES que la página sea enviada al navegador; Blogger "escribe" el código fuente y omite esa parte condicionada. Como resultado, si miramos el código fuente, no la veremos; de ese modo, aún cuando nuestra plantilla sea muy grande, la carga del sitio será más rápida por la simple razón de que hay sectores que son ignoradas.

Hay muchas condiciones posibles pero las más flexibles son las que nos permiten saber en qué tipo de página estamos. Para Blogger, por ahora, hay cuatro tipos:

item son las páginas individuales:
http://miblog.blogspot.com/2010/04/titulo.html

archive son las páginas que se ven cuando navegamos usando el elemento Archivos:
http://miblog.blogspot.com/2010_04_01_archive.html

static_page son las páginas estáticas:
http://miblog.blogspot.com/p/titulo.html

index son todas las demás, el home, cuando navegamos entradas antiguas o las etiquetas:
http://miblog.blogspot.com/search/
http://miblog.blogspot.com/search/label/nombreetiqueta
http://miblog.blogspot.com/search?updated-max=2010-01-11T11.......&max-results=2

Todas ellas son accesibles si leemos este dato:
<data:blog.pageType/>

Así que podemos crear cualquiera de estas condiciones de este modo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  ... esto sólo se verá en las páginas individuales ...
</b:if>

o a la inversa, cambiando la igualdad == por la desigualdad !=

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  ... esto se verá en todas las páginas excepto en las páginas individuales
</b:if>

Blogger sólo dispone de condiciones simples así que no pueden evaluarse muchas cosas a la vez, sólo una por una. Para entender eso, vamos a usar otra condición útil, la que nos permite saber si estamos en el home de nuestro sitio o no. Ya vimos que el home es una página de tipo index como muchas otras así que ese dato no nos sirve, necesitamos otro:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
  ... esto se verá en el home ...
 </b:if>

Así que si quisiera que algo se viera en las páginas de etiquetas pero no en la página principal del sitio, como ambas son del mismo tipo, debería hacer algo así:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <!-- OK es una página de tipo index -->
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <!-- y es el home  -->
    ... así que acá muestro algo ...
  <b:else/>
    <!-- como no es el home  -->
    ... acá muestro otra cosa ...
  </b:if>
</b:if>

Sólo podemos usar condiciones que puedan responderse por SI o por NO; ¿esto es tal cosa? o bien "si esto es tal cosa hacer algo y si no lo es hacer lo otro".

Una condición más nos permite saber si estamos en una entrada específica; basta saber la URL de esa entrada:

<b:if cond='data:blog.url == &quot;http://miblog.blogspot.com/2010/04/titulo.html&quot;'>
  ... esto sólo se verá en este post y nada más que en este post ...
</b:if>

Para condicionar elementos agregados, simplemente debemos editar la plantilla, expandir los artilugios y buscarlos; la mayoría de ellos tiene el mismo código; en este ejemplo, condicionamos ese widget para que sólo se muestre en las páginas individuales:

<b:widget id='XXXX' locked='false' title='' type='XXXX'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  ... cualquier tipo de código que coloque el widget ...
</b:if>
</b:includable>
</b:widget>

En general, lo que debemos hacer es buscar el includable cuyo ID sea main y debajo colocamos la etiqueta de apertura; luego, buscamos el final de ese includable y arriba de esta, colocamos el cierre de la condición.

En este blog de pruebas puede navegarse y se mostrarán distintos elementos en la sidebar y debajo del header, según sea el tipo de página en la que estamos:

• el home
• las entradas individuales
• los archivos
• las etiquetas
• un post en particular
• una página estática