El gadget HTML/JAVASCRIPT

Añadir un gadget en Blogger es sencillo, en la primera pantalla de Diseño se muestran las secciones en que está dividido nuestro blog y basta hacer click en el enlace respectivo para que se abra la ventana que muestra los diferentes elementos; de allí en más, seguimos las instrucciones o completamos los datos y voilá. Podemos moverlo, editarlo, eliminarlo; no suele haber problemas y en la plantilla en si misma, se agrega una línea:

<b:widget id='NOMBRE' locked='false' title='TITULO' type='TIPO'/>

donde:
id='NOMBRE' varía según el tipo y se los identifica con un número
title='TITULO' es el texto que hayamos agregado en el cuadro correspondiente al crear el gadget
type='TIPO' es el tipo definido por Blogger mismo (Feed, BlogList, Label, etc)

El título no es obligatorio pero siempre es bueno ponerlo y, en todo caso, si no queremos que se muestre, conviene modificar el código de la plantilla misma para ocultarlo ¿Por qué conviene ponerlo? porque si no lo hacemos, en la pantalla de diseño nos resultará difícil identificar cual es cuál si es que tenemos varios del mismo tipo.

Para personalizar eso, lo que debemos hacer es marcar Expandir plantillas de artilugios y de ese modo, las etiquetas widget que permanecían contraidas se expandirán, mostrando su contenido. En general, veremos que comienzan con algo así:

<b:widget id='NOMBRE' locked='false' title='TITULO' type='TIPO'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    .......
</b:widget>

Esa parte en negrita es el título así que si no queremos que se vea, simplemente, borramos esas líneas.

El contenido de cada etiqueta widget varía con el tipo; algunas pueden editarse, otras no.

Hay un gadget en particular que utilizamos mucho, es el llamado HTML/Javascript y es el que nos permite agregar cualquier tipo de código sin mayores restricciones. Ese gadget no es otra cosa que un mini editor y por lo tanto, es uno de los elementos más flexibles del sistema. Todo bien pero ... siempre hay un pero ... o varios peros.

Lo primero que debemos saber es que desde el punto de vista de la carga del blog, agregar códigos dentro de ese tipo de elemento es exactamente igual que agregarlo directamente en la plantilla aunque Blogger comete un error conceptual al establecer reglas de sintaxis diferentes para ambos. La más evidente es que en la platilla, debemos usar CDATA para que los scripts no se modifiquen o no nos volvamos locos cambiando caracteres y permutando comillas pero, en un gadget, esto no es necesario. Lo mismo ocurre con el uso de ciertos caracteres como & que en la plantilla están prohibidos, etc, etc.

Los gadgets también tienen otra limitación, cuando queremos hacer un backup de la plantilla usando la opción Descargar plantilla completa, el contenido de estos no es guardado y debemos hacerlo de manera manual; esto es particularmente molesto en el caso de los elementos HTML/Javascript. Entonces ¿para qué usamos gadgets de este tipo? Porque de ese modo, la plantilla nos parece menos densa y aparentemente, es más fácil encontrar cosas. De alguna manera, es una forma de barrer y guardar todo bajo la alfombra.

Pero, eso no es necesario, si queremos, podemos tener ambas cosas, usar el gadget y poner el código en la plantilla, para eso, simplemente creamos uno, le ponemos un titulo y algún contenido cualquiera ya que si no, no nos dejará guardarlo. Lo ubicamos y luego, vamos a la plantilla, expandimos todo y buscamos ese titulo. Veríamos algo así:

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Con el título hacemos lo mismo, lo eliminamos o lo personalizamos a gusto.

La etiqueta <b:include name='quickedit'/> es la que agrega el ícono de edición que vemos en el blog cuando estamos logueados con nuestra cuenta de administradores y al igual que el título, si queremos, podemos eliminarla.

Lo que queda, es el contenido en si mismo que se agrega siempre en un DIV que no tiene propiedades de estilo predeterminadas así que podemos dejarlo y entonces, TODO se reduce a la etiqueta <data:content/> que es la que carga el contenido así que basta eliminarla para que nos quede un gadget vacio donde podemos agregar cualquier cosa, que se expandirá y contraera como cualquier otro y cuyo código será parte del backup si descargamos la plantilla.

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <div class='widget-content'>
    ....... aquí coloco cualquier tipo de código .......
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Como cualquier otra cosa, eso también podemos condicionarlo de tal modo que se vea en determinado tipo de páginas; por ejemplo, este gadget sólo se verá en las páginas individuales:

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='widget-content'>
      ....... aquí coloco cualquier tipo de código .......
    </div>
    <b:include name='quickedit'/>
  </b:if>
</b:includable>
</b:widget>

Cambiando las condiciones podemos controlar las páginas y las variantes son muchas; aquí hay algunas:

<!-- esto sólo se verá en el home -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
  .......
</b:if>

<!-- esto NO se verá en el home -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas estáticas -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  .......
</b:if>

<!-- esto NO se verá en las páginas estáticas -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas individuales -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  .......
</b:if>

<!-- esto NO se verá en las páginas individuales -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas de listas (etiquetas/archivos/etc) -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  .......
</b:if>
</b:if>
</b:if>