lunes, 3 de junio de 2013

Ocultar Gadgets HTML y Elementos En Blogger

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.


Paso Nro 1

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


Paso Nro 2

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.

6 comentarios:

  1. Amigo, muchas gracias por el post. De todas formas quiero avisarle que el primero no funciona, ya lo he probado de todas las maneras en varios blogs y no hay caso, algo está mal. ¡Saludos!

    ResponderEliminar
  2. Hola gracias por tu post!!, esto me ha servido para ocultar solo un elemento, pero como le hago para ocultar varios elementos???? Gracias

    ResponderEliminar
    Respuestas
    1. donde pones el #blablabla, solo pones , y el otro #blablabla2 así:
      #NOMBRE, #nombre 2, #nombre3, .nombre4 {

      Por cierto, mejor ve con el post original (este es solo un copy paste de lo publicado en 2010 por ciudadblogger.com) allí te dan mas ayuda

      Eliminar