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

Estructura de un gadget en Blogger II

Anteriormente había explicado la estructura de un gadget, pero la estructura no se lleva solamente una entrada. Pues faltan por explicar algunos aspectos. Como lo son los b:includables, con los cuales reutilizaremos código fácilmente. Es decir sin tener que escribirlo dos veces.


La estructura por defecto de un gadget es la siguiente:
<b:widget id='HTML1' 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'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


Los b:includables son muy útiles a la hora de escribir código mas de una vez, ya que almacena el código en el y solo con llamarlo el código será incluido en donde fue llamado.

La estructura del b:includable es:
<b:includable id='IDENTIFICADOR'>
CODIGO
</b:includable>
Y para llamarlo:
<b:include name='IDENTIFICADOR'/>

Para utilizarlo debe colocarse de la siguiente manera:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='icono-santy'>
<img src='santy.png' />
</b:includable>

<b:includable id='main'>
<b:include name='icono-santy'/>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
<b:include name='icono-santy'/>
</div>
<b:include name='quickedit'/>
<b:include name='icono-santy'/>
</b:includable>
</b:widget>


Si agregamos el gadget anterior a la plantilla, este mostrará una imagen antes del titulo, una imagen antes del contenido del gadget y una después del icono de editar. Todo esto agregando el código dentro del b:includable y llamar al b:include, con la identificación apropiada cuantas veces queramos.
#

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:

4 comentarios !

Onetwothree dijo...

Hola Santy,

El caso es que tengo una widget en la plantilla del blog que no tiene una imagen que encabece el widget, el resto tienen (Recent Comment, Recent Post o Archive) pero las "Categorias" no tiene.

Si no he entendido mal primero tendría que definir esa imagen (tu "icono-santy"), que ahora no se muy bien como hacerlo en mi plantilla, y luego añadir esa imagen dentro de mi widget en l tag "widget-content"...en plan:

"div class='widget-content'"
"data:content/"
"b:include name='imagen-titulo archives'/"
"/div"

Es algo así?

Gracias por tu ayuda.

Nota: He sustituido el (<) por (") para que me lo acepte y lo veas.

SäNTÿ dijo...

Onetwothree, casi das en el blanco, pero te faltan algunos elementos, pues para obtener una imagen por encima del contenido del gadget es necesario definir la imagen en el elemento y colocarlo en vez de el titulo del gadget:

<b:widget id='Label101' locked='false' title='Etiquetas' type='Label'>
<b:includable id='icono-santy'>
<img src='URL DEL TU IMAGEN' />
</b:includable>
<b:includable id='main'>
<b:include name='icono-santy'/>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li class='etiqueta'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Solo, como apuntas correctamente, definirias la imagen y listo.

Onetwothree dijo...

Ese widget que has definido arriba es el diseño que llevan todas las "categorias" de los blogs?

Lo digo porque cuando he ido a mirar dentro del widget de mis categorías me he encontrado que está compuesto por esto:

"b:widget id='Label1' locked='false' title='Categorias' type='Label'/"

Simplemente eso hace que funcione? Solo tendría que añadir:

"b:includable id='icono-santy'"
"img src='URL DEL TU IMAGEN' /"
"/b:includable"
"b:includable id='main'"
"b:include name='icono-santy'/"
"div class='widget-content'"
"ul"
"b:loop values='data:labels' var='label'"
"li class='etiqueta'"
"b:if cond='data:blog.url == data:label.url'"
"data:label.name/"
"b:else/"
"a expr:href='data:label.url'"
"data:label.name/""/a"
"/b:if"
("data:label.count/")
"/li"
"/b:loop"
"/ul"

"b:include name='quickedit'/"
"/div"
"/b:includable"
"/b:widget"

Para que el gadget funcionase? porque no encuentro nada relacionado con las categorías en la plantilla, sólo algo de "Relacionados", que por supuesto no es parte de Categorías.

Anónimo dijo...

muyy bueenooo


Página Principal
Arriba