Cómo ocultar gadgets y elementos en Blogger

Controla la Visibilidad de Gadgets en tu Blog

Uno de los aspectos más interesantes de Blogger es su nivel de personalización. Muchas veces queremos que un gadget aparezca en la portada, pero no en las entradas individuales, o que se muestre solo en páginas específicas. Para lograrlo no es necesario eliminar nada: basta con usar condicionales y CSS para ocultar lo que no queremos mostrar.

En esta guía aprenderás a identificar los ID y clases de tus gadgets, y a aplicar condicionales para decidir en qué secciones de tu blog deben estar visibles. Esto te permitirá un diseño más limpio, ordenado y profesional.

1. Identificar el ID o clase de un gadget

Para encontrar el identificador del gadget, ve a Diseño > Edición de HTML y busca el gadget correspondiente. Verás algo parecido a esto:

HTML

<b:widget id='HTML1' locked='false' title='Ejemplo' type='HTML'>

En este ejemplo, el ID del gadget es HTML1. En plantillas más modernas puede que no encuentres un ID, sino una clase (por ejemplo, class="header-outer"). Recuerda: los ID se llaman con # y las clases con ..

2. Condicionales para ocultar elementos

Una vez que tengas identificado el gadget o contenedor, coloca uno de estos códigos antes de la etiqueta </head> de tu plantilla. Reemplaza #NOMBRE con el ID o clase de tu gadget.

Ejemplos prácticos

Ocultar un elemento solo en la portada

HTML

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

Ocultar un elemento en todas partes menos en la portada

HTML

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

Ocultar un elemento solo en entradas individuales

HTML

<b:if cond='data:blog.pageType == "item"'>
  <style>
    #NOMBRE {display:none;}
  </style>
</b:if>

Ocultar un elemento en todas partes MENOS en las entradas individuales

HTML

<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

HTML

<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

HTML

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

Ocultar un elemento solo en páginas estáticas

HTML

<b:if cond='data:blog.pageType == "static_page"'>
  <style>
    #NOMBRE {display:none;}
  </style>
</b:if>

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

HTML

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

Ocultar un elemento en una entrada o etiqueta específica

HTML

<b:if cond='data:blog.url == "URL-de-la-entrada-o-etiqueta"'>
  <style>
    #NOMBRE {display:none;}
  </style>
</b:if>

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

HTML

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

3. Plantillas antiguas vs plantillas modernas

En las plantillas antiguas, es común usar IDs como #header-wrapper. Ejemplo: ocultar la cabecera en la portada del blog:

HTML

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

En las plantillas modernas (creadas con el Diseñador de Blogger), muchos contenedores no tienen ID, sino clases. Ejemplo:

HTML

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

Conclusión

Gracias a los condicionales de Blogger, puedes ocultar gadgets y elementos en las secciones que quieras, sin tener que eliminarlos. Esto te da más control sobre el diseño de tu blog, mejora la experiencia de tus visitantes y mantiene tu plantilla organizada.