29 sept. 2014

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.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

18comentarios:

  1. Super útil. Era algo que andaba buscando hace tiempo y como siempre tú has aportado la solución a mí y seguro que a muchos otros más. Muchísimas gracias. Abrazos!

    ResponderEliminar
    Respuestas
    1. Un placer ayudar Noemí, cualquier duda o guía que necesites aquí me tienes. Un abrazo!!

      Eliminar
  2. La verdad es que esto de los códigos está muy bien. Creo que te faltó este:

    Sirve para condicionar (a la vez) etiquetas, home y archives.

    ResponderEliminar
    Respuestas
    1. Pues gracias Félix, lo que pasa que en los comentarios no queda registrado el código. Gracias de todas maneras. Un saludo!

      Eliminar
  3. Desde que empecé con Wordpress.org ya casi no toco blogger, pero en mis inicios en esto de los blogs tuve que lidiar mucho con el código de blogger y esto de los condicionales era de lo más últil. Muy buena entrada y una info muy útil.

    ResponderEliminar
    Respuestas
    1. Gracias Jefe maestro, para lo que necesites aquí estoy. Un abrazo.

      Eliminar
  4. soy de esos patosos que no me entra!!! leyendo tu blog, la verdad, es todo mucho más sencillo. gracias amigo

    ResponderEliminar
    Respuestas
    1. Gracias a ti Ricardo, cualquier duda me tienes para ayudar. Un saludo.

      Eliminar
  5. Guardado!!!!!! Me encantan tus ayudas!!!!

    ResponderEliminar
  6. Hola mi principal duda no sé si viene bien hacerla aquí, es que he creado un menú con pestañas pero quiero que el blog se abra en la primera, INICIO, al poner el enlace del mismo http://elmundodelaspuertas.blogspot.com.es/ . Siempre se me abre en la pestaña de REDES SOCIALES.
    Muchas gracias por tu respuesta.
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola,
      lo que he visto es que tienes puesta la etiqueta INICIO: http://elmundodelaspuertas.blogspot.com.es/search/label/INICIO Es decir, sacará cuando pulsen en INICIO todas las entradas etiquetadas como INICIO. Yo en lugar de poner /search/label, si pones simplemente una / o http://elmundodelaspuertas.blogspot.com.es sin ninguna etiqueta, debería arrancarte la página principal del Blog.

      Un saludo!

      Eliminar
  7. Hola Migue, espero que puedas ayudarme: hace tiempo instalé unos widgets de publicidad en el blog pero impiden la visita de mi blog desde móviles ¿Hay alguna condicional para impedir su ejecución en la plantilla móvil? Espero puedas ayudarme, ¡Saludos y gracias por tu trabajo!

    ResponderEliminar
    Respuestas
    1. Hola!,te recomiendo esta lectura para adaptar aquellos widgets que deseas que se vean en el móvil y los que no: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger-para.html Verás que hay una opción para poner "mobile=true o false", mira en el paso 3 b) de la guía que te he pasado.

      Un saludo!

      Eliminar
  8. Respuestas
    1. Todo un placer ayudar, un saludo y gracias por participar.

      Eliminar
  9. Hola! Podrías ayudarme a generar un condicional que haga que cuando comparta una entrada de blogger no se tome en cuenta la imagen del encabezado del blog? Siempre es la primera que toma y a veces ni siquiera toma las imágenes incluidas en cada entrada. Te lo agradecería muchísimo. Tu sitio es muy útil. ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Voy a ver si preparo un tutorial para eso este año. Lo mejor es utilizar estos IF para ese propósito que propones: Ejecutar siempre que se esté en el detalle de una entrada:

      <b:if cond='data:blog.pageType == "item"'

      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

      Si lo hago a lo largo de este año te aviso, es que ahora ando muy liado con el comienzo de trabajo.

      Un saludo y muchas gracias.

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.