Cómo utilizar códigos condicionales en Blogger

Ocultar o mostrar partes del Blog que nos interesen según las necesidades que tengamos en nuestra presentación es muy sencillo.

Por medio de unos simples comandos condicionales podemos establecer con facilidad qué deseamos que se visualice y qué no en nuestro Blog.


Nos vamos a olvidar todo lo posible del aspecto técnico puro de cómo se usa el código de una plantilla en Blogger para centrarnos en el uso de los condicionales, si quieres ahondar más aún en la parte técnica, ejecuta la guía: Curso Blogger para no iniciados en informática o programación.

¿Qué son los comandos condicionales en Blogger?

Son las condiciones que introducimos en el código de nuestra plantilla para indicar que deseamos que se muestre o se ejecute una determinada parte del código cuando se cumple una condición.

Por ejemplo, imaginemos que tengo un sidebar (barra lateral) con varios componentes que deseo que sólo se vea en la página de detalle de las entradas pero no en mi página principal. Para ello tendré que establecer una condición que diga: "Si estoy en la página principal no mostrar sidebar". Eso es un claro ejemplo de uso de un comando condicional en nuestra plantilla.

¿Cuándo se utilizan los comandos condicionales en Blogger?

Se utilizan en diversas ocasiones siempre que hay que establecer condiciones para que se ejecute una parte de código en lugar de otra.

Suele utilizarse como hemos visto ya en otras ocasiones para indicar las partes de código que deseamos que se ejecuten en móviles o no:

En personaliza tu plantilla para móviles vimos cómo establecer condicionales que hicieran que un determinado componente se mostrara o no en el móvil:

  <b:if cond='data:blog.isMobile'> 

  </b:if>  

Para mostrar una parte de la plantilla en función de si nos encontramos en la página principal o en el detalle de las entradas:

<b:if cond='data:blog.url == data:blog.homepageUrl'><style>#rsidebar-wrapper{display:none;</style>}</b:if> 

Se utilizan en múltiples ocasiones los códigos condicionales de Blogger, simplemente recorre tu plantilla y encontrarás unos cuantos.

¿Cómo se estructura un comando condicional en Blogger?

Pueden complicarse y combinarse de varias maneras pero para que se entienda con facilidad simplificaremos así:

<b:if cond=CONDICIÓN> 

 Ejecuta todo lo que esté entre el <b:if> y el </b:if> 

 </b:if>  

Es decir, siempre que se cumpla la condición que pones a la derecha de <b:if cond= , ejecuta todo el código que haya dentro de la misma hasta que llegues a su cierre con  </b:if> 

También puedes llegar a establecer condiciones un poco más  complejas como:

<b:if cond='data:blog.pageType == &quot;index&quot;'> Ejecuta todo lo que esté hasta el <b:else>  <b:else/>Si no se cumple la condición inicial entonces, ejecuta todo lo que esté entre el <b:else> y el </b:if> </b:if>

Es decir, siempre que se cumpla la condición que pones a la derecha de <b:if cond= , ejecuta todo el código que haya dentro de la misma hasta que llegues <b:else/> donde ejecutarás el código si no se cumple la condición inicial.

¿Qué códigos condicionales puedo realizar en mi Blog?

Hay muchos y muy diversos, pongamos algunos ejemplos de los más utilizados por si encuentras alguno adaptado a tus necesidades:

Ejecutar siempre que se esté en la página principal:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Dentro el código que quieras que se ejecute siempre en la página principal

</b:if> 

Ejecutar siempre que se esté en el detalle de una entrada:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Dentro el código que quieras que se ejecute siempre en dentro de una entrada

</b:if> 

 Ejecutar siempre que NO se esté en la página principal:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

Dentro el código que quieras que se ejecute siempre que no se esté en la página principal

</b:if> 

Ejecutar siempre que se esté en el detalle de una entrada:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Dentro el código que quieras que se ejecute siempre que no se esté en una entrada

</b:if> 

 Ejecutar siempre que se utilice el blog en un móvil:

 <b:if cond='data:blog.isMobile'>

Dentro el código que quieras que se ejecute siempre que se esté en un móvil 

</b:if> 

Y siempre que cumplas con la estructura <b:if cond='data: puedes montar tu comando condicional con cualquier campo de los "códigos de información" de los cuales Blogger dispone aquí. Verás que podrás realizar condicionales por prácticamente "cualquier cosa" que utilices en tu Blog". 

Un ejemplo de uso de comando condicional en Blogger paso a paso:

Pongamos que tenemos un Blog con un sidebar (barra lateral) que deseamos mostrar sólo en el detalle de las entradas y NO en la página principal.

1) Es de extrema importancia que antes de cualquier cambio realices una copia de seguridad de tu plantilla. Si en cualquier momento decides volver a la presentación anterior, la copia de seguridad es tu única garantía.

2) En primer lugar para decidir qué vas a mostrar u ocultar, es necesario conocer qué es, cómo se llama. Para hacerlo puedes hacerlo con esta guía: Guía Para Trabajar Con Hojas De Estilo En Blogger. Cómo Cambiar Cualquier Cosa De La Presentación De Tu Blog: Tamaño, Color, Tipo De Letra... Verás diversas formas de localizar el nombre de aquello que quieres modificar utilizando las herramientas de desarrollo de Chrome (pulsando la tecla F12 y viendo el nombre de lo que quieres tocar).

3) Ahora dentro de Blogger dirígete al menú de la izquierda y haz "clic" en "plantilla" y, dentro de la página que sale (la que puedes ver en el "pantallazo" inferior del texto), en la parte superior derecha pulsa el botón "Editar HTML".

4) En el paso 2, utilizando los pasos de la guía para conocer cómo se llama al sidebar en mi plantilla ví que tenía el nombre rsidebar-wrapper.
Ahora, como no deseo que se muestre en la página principal y sólo quiero que se vea en las del detalle de las entradas escribo este condicional antes del cierre del </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'><style>#rsidebar-wrapper{display:none;}</style></b:if>

Así establezco que si estoy en la página principal <b:if cond='data:blog.url == data:blog.homepageUrl'> se aplique un estilo que oculte mi barra lateral <style> #rsidebar-wrapper{
display:none;} </style> de ahí que ejecute display:none para mi sidebar rsidebar-wrapper con # por delante para aludir a su clase en mi hoja de estilos.

Eso es todo, cualquier duda pregunta lo que necesites en los comentarios.