Ocultar gadgets en distintas partes del Blog

Ocultar gadgets en distintas partes del Blog Ocultar widgets segun el tipo de pagina

Supongamos que hemos agregado un gadget reproductor de música, pero solo lo queremos en la pagina principal, pues bueno, esto es posible y de forma muy limpia usuando las condiciones de blogger. En este aporte aprenderemos a ocultar widgets en diferentes paginas.


Atributo condicional

Este atributo originalmente se desarrollo junto a las etiquetas b:if de Blogger, mismas que nos permiten ocultar o mostrar los elementos que encierran. Seguramente ya las habrás visto en tu plantilla o en alguna parte, pero tienen este aspecto:


<b:if cond='{expr}'>
  <!-- Se muestra al cumplir la condición -->
</b:if>

Pues bien, estas etiquetas no sirven para ocultar widgets, pero el atributo cond sí. Todos los gadgets de Blogger se crean dentro de una etiqueta b:section, y estos a su vez crean sus propias etiquetas conocidas como b:widget, por lo cual, si nos vamos a Temas > Edicion html, nuestros widgets siempre estarán organizados de la siguiente manera:


<b:section id='sidebar'>
   <b:widget id='Blog1' type='Blog'>...</b:widget>
   <b:widget id='AdSense1' type='AdSense'>...</b:widget>
   <b:widget id='Profile1' type='Profile'>...</b:widget>
</b:section>

Tanto la etiqueta b:section como b:widget aceptan el atributo cond, lo que nos permite agregar una condición, lo que nos brinda el control sobre lo que queremos mostrar, como hacerlo y cuando:


<b:section id='sidebar'>
   <b:widget cond='{expr}' id='LinkList1' type='LinkList'>...</b:widget>
</b:section>

La expresión que se reemplaza por {expr}, puede ser cualquiera, pero como en este articulo vamos a ocultar widgets dependiendo del tipo de página, utilizaremos etiquetas data:view que devuelven precisamente esa información:


data:view.isHomepage Verdadero solo en la Página principal.
data:view.isPost Verdadero solo en las Entradas.
data:view.isPage Verdadero solo en las Páginas estáticas.
data:view.isArchive Verdadero solo en el Archivo.
data:view.isError Verdadero solo en el Error 404.
data:view.isSearch Verdadero solo en la Búsqueda.
data:view.isLabelSearch Verdadero solo en la Búsqueda por etiquetas.
data:view.isMultipleItems Verdadero si se muestran Entradas múltiples.
data:view.isSingleItem Verdadero en las Entradas y Páginas estáticas.
data:view.isPreview Verdadero solo en la Vista previa.
data:view.isLayoutMode Verdadero solo en el Modo Diseño.

De esta forma, si deseamos que un widget solo sea visible dentro de una Página estática, al reemplazar {expr} nos quedará algo similar a esto:


<b:section id='sidebar'>
   <b:widget cond='data:view.isPage' id='LinkList1' type='LinkList'>...</b:widget>
</b:section>

Con este codigo no estamos haciendo el gadget "invisible", como se realizaba antes mediante un metodo viejo utilizando CSS, en este caso, el gadget no renderiza, por lo tanto el rendimiento es insuperable.


Condicionar un widget

Ya habiendo explicado todo lo anterior, lo que viene es simplemente una demostración en forma de tutorial, donde ocultamos el gadget búsqueda. Para empezar necesitamos saber en donde esta el widget, lo podemos hacer visitando nuestro blog:


widget busqueda blog

También podemos ir a el panel de Blogger en la pestaña Diseño, en ambos casos notaremos que el widget "búsqueda" en este ejemplo se encuentra primero en la barra lateral:


Widget busqueda pestaña Diseño

Ya sabiendo esto, vamos a ir a la pestaña Temas y presionamos el botón Editar HTML. Entre los botones de opciones, damos clic en "Ir al widget" y seleccionamos el que queremos ocultar, en el caso de este ejemplo, es el de búsqueda:


widget busqueda en el Editor HTML

Al dar un clic, nos llevará automáticamente al widget seleccionado, es fácil de saber que esto ocurrió, porque nos saldra en la parte superior del Editor HTML:


widget busqueda de Blogger desde el Editor HTMl

Para finalizar, simplemente agregamos el atributo cond y dentro escribimos la etiqueta data:view que corresponde al tipo de página en donde queremos mostrar ese widget. En este ejemplo nos quedaría así:


<b:widget cond='data:view.isPost' id='BlogSearch10' type='BlogSearch'>...</b:widget>

Damos clic en "Guardar cambios" y ahora el Gadget solo será visible si se visita desde una entrada. Si queremos indicar lo contrario (que no se muestre en las entradas) agregamos una exclamación ! al inicio de cualquier etiqueta data:view de esta forma:


<b:widget cond='!data:view.isPost' id='BlogSearch10' type='BlogSearch'>...</b:widget>

Lo que le indica al widget que se muestre en todas las paginas, menos en las entradas del blog, es decir, nuestra condición se invierte.


Conclusión

Ya sea con el fin de ganar rendimiento o de mejorar la experiencia de usuario, tener el control sobre cuándo y como mostrar un widget en paginas especificas nos será de mucha ayuda, además, en el proceso nos familiarizamos con la sintaxis que maneja Blogger, y aprendemos más de nuestros blogs.


Espero que esta entrada les haya sido de utilidad. Si te ha servido esta información, no olvides compartir, ayudaras a mas personas y lo agradeceré mucho. Gracias por leer.

Quizás te interese