Hacker of the Web
Tus ideas en código!...y mas

Estructura de un gadget en Blogger

Para comenzar a explicar la estructura de un gadget en Blogger, es necesario saber que existen varios tipos de gadget, y por defecto Blogger les da una estructura predefinida. Esta estructura se puede modificar al gusto de cada quien para un mejor manejo del blog y reutilización de código, que nos dará como resultado una mejora en la carga del blog.

La estructura por defecto de un gadget es la siguiente:

<!-- Inicia el gadget -->
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<!-- Inicia el bloque principal del gadget -->
<b:includable id='main'>
<!-- Solo mostrará el titulo si el gadget tiene titulo -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<!-- Muestra el contenido del gadget en un contenedor DIV -->
<div class='widget-content'>
<data:content/>
</div>
<!-- Por ultimo coloca al final el icono de editar -->
<b:include name='quickedit'/>
<!-- Finaliza el bloque principal -->
</b:includable>
<!-- Finaliza el gadget -->
</b:widget>


La primer linea del gadget:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
Define:
La identificación del gadget: id='HTML1'
La identificación no es nada mas que el tipo de gadget seguido del numero de gadget, que va creciendo en cada tipo de gadget, es decir, que si agregamos un gadget HTML tendrá de identificación HTML2

El estado del gadget: locked='false'
El estado del gadget puede ser true o false, si es true no se podrá mover de donde esta, pero si es false se podrá mover a cualquier sección del blog

El titulo del gadget: title=''
En el titulo del gadget es el titulo que se le agregó cuando fue agregado al blog.

El tipo del gadget: type='HTML'
Es el tipo de gadget que se agregó al blog.

La segunda linea del gadget:
<b:includable id='main'>
Es una linea tipo b:includable, es decir, que contendrá codigos que pueden reutilizarse.
Define una identificación: id='main'
Esa identificación es una palabra definida por Blogger, que es el código principal del gadget.


Y para cambios de plantillas, puedes agregar un gadget con contenido visible en la plantilla, así no tendrás que copiar y pegar códigos de gadget en gadget.
Puedes agregarlo directamente despues de un </b:widget>:
<b:widget id='HTML101' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- aqui estará el contenido visible en la plantilla -->
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.



/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

9 comentarios !

Bayo dijo...

Hola:

Quiero modificar sólo un gadget: el "Listado de links".

Quiero que los links de la lista estén separados por comas o por espacios (no uno abajo de otro).

¿Cómo lo puedo hacer?

Gracias.

Saludos

Bayo

Unknown dijo...

Hola!!, Bayo

La respuesta a tu pregunta es relativamente fácil, la estructura original es la siguiente:

<b:widget id='LinkList2' locked='false' title='Mis Blogs' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Donde el texto en negrita son las etiquetas que le dan forma de lista a la lista de link, redundantemente xD.

lo que hay que hacer simplemente es eliminarlas, y en el caso agregar una coma la final de cada link:

<b:widget id='LinkList2' locked='false' title='Mis Blogs' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<b:loop values='data:links' var='link'>
<a expr:href='data:link.target'><data:link.name/></a>,
</b:loop>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Marcos Giovagnorio dijo...

la verdad es que estoy harto. no puedo cambiar el color del contenido del gadget "Recetn Posts". todo sus contenidos están en negro y los quiero en blanco.
quise modificar el css agregando esta linea de codigo

.sidebar .widget .widget-content a{
color:white;
}

lo hice pero no hace caso. no hay forma de poder cambiarle el color. me podrias ayudar?

Unknown dijo...

Marcos, prueba colocar un "!important" antes del punto y coma de cada atributo:

.sidebar .widget .widget-content a{
color:white !important;
}

Pero si aún no puedes agregar la opción tres de este apartado, ahi se encuentran con cada opcion los selectores CSS que necesitas.
http://santyweb.blogspot.com/2009/05/otras-formas-de-mostrar-entradas.html

*Nicolas* dijo...

man, sabes como puedo organizar los gadgets? porque cuando pongo diseño y trato al moverlos de dejarlo en otro lugar no quedan yse devuelven al lugar de origen

M. Caluz dijo...

me pasa lo mismo que *Nicolas* ! estoy cansada de eso ¬¬ !!

Inter dijo...

exactamente lo mismo que nicolas y michelle , ayudaa :(

Unknown dijo...

Chavo Toledo, mira el paso numero [5] de esta entrada: Insertar o crear, eliminar o mover un gadget?

Liderazgo Humanista dijo...

Muchas gracias, Hacker, me sirvió mucho tu entrada.
Un saludo.


Página Principal
Arriba