comunidades

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.

Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: generalpropuestas

Recomendamos

Relacionado

general

El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs. Si bien inicialmente ha tendido a ser un factor "olvidado" hoy día se ha tornado fundamental. El cliente, el usuario, ya no utiliza exclusivamente un ordenador de sobremesa o portátil para visualizar las ...

general seo

La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información. La correcta estructura de un Blog asegura una correcta ex ...

general seo

La herramientas para webmaster de Google poseen una utilidad llamada Herramienta de mejoras HTML que expone los problemas registrados durante el análisis y rastreo de tu Blog en Google. Muchos Blogger se encuentran con el error de metadescripciones duplicadas y no saben en qué consiste o qué se puede hacer con él. Veamos qué es y porqué se produce este aviso en las herramientas para webmaster. ¿Qu ...

general seo

Los datos estructurados son una herramienta fundamental en la presentación de los resultados de búsqueda en Google. Gracias a ellos, Google puede presentar información de eventos, rangos de precios, evaluación media del sitio (con estrellas) y gran cantidad de datos en el resumen de la búsqueda que pueden hacer que un usuario se interese más por ese resultado que por otros que no se aprovechan de ...

general

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...

BLOGGER blogging SEO ...

Blogger terapia con posicionamiento SEO por medio de Backlinks, y los ítems de Blogger design a retocar en este artículo. Como alguna vez mencioné es fundamental que estés centrado en tu temática, que te enfoques en la estética de tu blog de blogger, las estrategias de posicionamiento SEO, tu promoción o presentación. Y en posicionar están los backlinks. Por eso es importante dar un mayor grado de ...

general

En la anterior entrega aprendimos a crear nuestra primera plantilla. La idea no era copiar y pegar el código que "nos dan hecho", esta vez se trataba de conseguir entender bien cómo y porqué se hace cada cosa en Blogger. Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy continuamos con la "maquetación", el siguiente gran ...

general seo

Los datos estructurados permiten a los motores de búsqueda determinar que ciertas partes de una página web, se corresponden a una representación determinada en los resultados de la búsqueda de un usuario. Es decir, permiten al buscador formatear los resultados de las búsquedas de sus usuarios, de tal manera que al presentarlos, se distinga perfectamente cada apartado localizado dentro de las págin ...

Tengo una semana de locos, pues con el dinero ganado tras las ventas generadas por la cuenta de instagram, estamos llevando a cabo una campaña de anuncios y hay que monitorizarlo muy bien para no perder dinero. Además, ya os contaba que comienzo otro nuevo proyecto, y no sé si os he dicho o no, que estoy preparándoos otro curso (así que atentos al blog la semana que viene). Pero eso, que de locos. ...

general ayuda blogger script

Hola! cómo están? no esperaba escribir hasta el viernes día del Reto Amistoso pero tras estar gran parte del día de ayer "liada" intentado cambiar el precioso anuncio de Blogger acerca de las cookies, pues me he decidido compartir mi experiencia por si a alguna le trae de cabeza el anuncio cómo a mi. El dichoso anuncio no tiene un estilo propio (tamaño, tipo de letra, color) coge por def ...