Ocultar widgets en Blogger

Si te preguntaste alguna vez cómo es que hacen para que el Slider desaparezca cuando ingresamos a un post o cómo hacen para que la sidebar se oculte al ingresar a un post, o cómo es que ese gadget del tiempo sólo se ve en la página principal, aquí vas a encontrar la respuesta.
Esta es una entrada fundamental de http://ciudadblogger.com que no quiero que se pierda en la blogosfera como ha pasado con muchos otros tutoriales que se han borrado. Recomiendo a todos visitar el blog del Potro, pues sabe volcar todos sus conocimientos de una manera simple y amena y sabe muchísimo más que el autor de este mi humilde blog (yo).

Para ocultar elementos en distintas partes del blog necesitamos dos cosas, saber identificar los IDs de los gadgets o contenedores, y saber cuál condicional usar.(pueden verlo en el blog del Potro)

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.

Agradecemos al blog Ciudad Blogger por todo lo que hace por nosotros.