JMiur [E]

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>

8 comentarios:

Domin-Omega  

Yo prefiero usarlos para cosas que podría actualizar por separado de la plantilla en determinado momento.
Si quiero respaldar algo, guardo su contenido aparte, vuelve todo más modular y quiza tedioso, pero almenos la plantilla sabe que tenía ese widget, ya sólo se trata de volver a llenarlo con sus datos respectivos.

Responder
Graciela  

Excelente Jmiur, aclara varios puntitos :P

Responder
MR producciones  

Muy util HMiur =9...te reenvie el mail por las dudas je saludos que andes bien.
MR

Responder
ARGENSTORE  

Hola. Muy bueno el blog.. Necesito ayuda con mi plantilla, es minimalista, no tiene nada se lo agregue todo por html y antilugios, y en la seccion elementos de pagina no tengo nada, ni gadgets, ni widgets, ni entradas y NECESITO AGREGAR VARIAS... Aunque no c, creo que me faltan los css y demas de BLOGGLER porque no me deja hacer nada mas (embet, entradas, etc)....
COMO HAGO PARA HABILITAR LA INTERFAZ DE ELEMENTOS, AGREGAR LAS ENTRADAS Y LOS WIDGETS???
La pagina en cuestion es www.profacebook.com.ar
Gracias.... ARGENSTORE

Responder
naturalizatebykris  

buenas tardes!
en mi blog no puedo añadir ningun gadget HTML7javascript, sabrias decirme porque?
un saludo

JMiur  

Imposible saberlo sin probar. Deberías ver si no están bloqueados los gadgets o agregarlo directamente en el código de la plantilla.

Responder
Jose Fernandez  

Hola que tal amigo. Quisiera preguntarte sobre el like-box de facebook que tienes a la derecha. Resulta que utilizo el código que me da facebook en mi página pero el like-box desaparece a los pocos segundos. Quisiera me pudieras mostrar el código o explicarme si entiendes mi problema. Por cierto mí página está en html construida en bloc de notas.

JMiur  

EL código es tal cual lo mustra Facebok, con las opciones del caso. No hay nada distinto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR