Ocultar gadgets y elementos en distintas partes del blog

Con anterioridad vimos c?mo mostrar los gadgets s?lo en la portada, o bien mostralos s?lo en las entradas individuales, para ello nos hemos valido de los c?digos condicionales que como hab?amos dicho en esa entrada son reglas que condicionan d?nde se ejecuta determinado c?digo y d?nde no.

En este caso veremos algunos ejemplos para ocultar elementos en distintas partes del blog. Para ello necesitamos dos cosas, saber identificar los IDs de los gadgets o contenedores, y saber cu?l condicional usar.

Primero, entramos en Dise?o | Edici?n de HTML y SIN expandir plantillas de artilugios buscamos el nombre del gadget que queremos ocultar y en seguida veremos su ID.

Lo que est? entre comillas simples despu�s de id= es el nombre del ID del gadget. En el ejemplo anterior el ID del gadget que ocultaremos es HTML1

Ahora antes de </head> pegamos alguno de estos c?digos:

Ocultar un elemento S?LO en la portada del blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en la portada del blog

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento S?LO en las entradas individuales

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en las entradas individuales

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento S?LO en las p?ginas del archivo del blog

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en las p?ginas del archivo del blog

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento S?LO en las p?ginas est?ticas

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en las p?ginas est?ticas

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en una entrada espec?fica o etiqueta espec?fica

<b:if cond='data:blog.url == &quot;URL de la entrada o etiqueta&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

Ocultar un elemento en todas partes MENOS en una entrada o etiqueta espec?fica

<b:if cond='data:blog.url != &quot;URL de la entrada o etiqueta&quot;'>
<style type='text/css'>
#NOMBRE {
display: none;
}
</style>
</b:if>

En cualquiera de esos casos cambiaremos donde dice NOMBRE por el ID del gadget que queremos ocultar.

Con este mismo m�todo podemos ocultar tambi�n contenedores de la plantilla (en las plantillas antiguas), por ejemplo, si quisiera que el header no se mostrara en la portada del blog haremos lo mismo, primero localizar el ID del contenedor.

En ese caso el ID de la cabecera es header-wrapper por lo que entonces antes de </head> agregaremos esto:

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

?Y para las plantillas nuevas? El procedimiento de los gadgets se puede aplicar de igual forma para las plantillas hechas con el Dise?ador de plantillas de Blogger, pero si queremos ocultar un elemento entonces veremos que esas benditas plantillas no tienen ID en sus contenedores. Pero eso no es problema porque igual podemos hacerlo sabiendo el nombre de su clase (class="NOMBRE").

Siguiendo el mismo ejemplo de ocultar la cabecera en la portada buscaremos no la ID del elemento sino su clase.

En este ejemplo el nombre de la clase de la cabecera es header-outer as? que el c?digo que pegaremos ser? este:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.header-outer {
display: none;
}
</style>
</b:if>

Aqu? han variado dos cosas, una, que no hemos aplicado la ID porque simplemente no existe sino que hemos aplicado la clase, y otra, que al tratarse de una clase entonces ya no hemos usado el signo de gato (#) que anteced?a el nombre de la ID sino un punto (.) lo que indica que se trata de una clase.

Y bien, ya sea que hayamos ocultado un contenedor o un gadget en la portada del blog entonces cuando entramos en Dise?o | Elementos de la p?gina tampoco aparecer?; para forzarlo a que se muestre ah? lee esta entrada de Vagabundia que explica c?mo hacer que los elementos ocultados se muestren en esa ?rea.