Estás en Inicio » Trucos » Ocultar gadgets y elementos en distintas partes del blog

Ocultar gadgets y elementos en distintas partes del blog

11 de enero de 2011 Publicado por El Potro , Etiquetas: Gadgets , Trucos 576 comentarios ,

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 == "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 </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.



Twittear
Enviar por correo electrónico Escribe un blog Compartir en X Compartir con Facebook Compartir en Pinterest
El contenido y material publicado así como la asistencia impartida es completamente gratuita. Tu contribución permite que este sitio continúe en funcionamiento.

576 comentarios en: