ocultar elementos en distintas partes del blog blogger

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 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.pageType == "item"'>

<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 != "item"'>

<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 == "archive"'>

<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 != "archive"'>

<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 == "static_page"'>

<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 != "static_page"'>

<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 == "URL de la entrada o etiqueta"'>

<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 != "URL de la entrada o etiqueta"'>

<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 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.