20.10.12

Mover gadgets en la plantilla


Mover los gadgets en Diseño puede ser dificultoso cuando, además de agregar varios gadgets, hemos hecho modificaciones en la plantilla, como agregar una sidebar, dejar estáticas las sidebar, etc.

La dificultad consiste en que en Diseño pueden verse los gadgets superpuestos, quedando algunos ocultos y casi imposible de "arrastrar".

Para la explicación de este tutorial tomamos como referencia un blog diseñado con la plantilla Simple en cuya sidebar hemos puesto los gadgets: Webmaster (Profile1), Archivo del blog (BlogArchive1), Bloguermast (Image1) y Herramientas (Text1), dispuestos así (les ponemos títulos para identificarlos más fácilmente en el código):


Para superar la difucultad antes anotada movemos los gadgets en la plantilla así:

1.- Vamos a Editar HTML:

Diseño Editar HTML Click dentro del editor Ctrl+f

2.- Localizamos el código correspondiente a las secciones de la sidebar en donde se encuentran los gadgets, poniendo una línea del mismo dentro del rectángulo de búsqueda (search), y que es como el siguiente:

<b:section-contents id='sidebar-right-1'>
<b:widget id='Profile1' locked='false' title='Webmaster' type='Profile'/>
</b:section-contents><b:section-contents id='sidebar-right-2-1'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
</b:section-contents><b:section-contents id='sidebar-right-2-2'>
<b:widget id='Image1' locked='false' title='Bloguermast' type='Image'/>
</b:section-contents><b:section-contents id='sidebar-right-3'>
<b:widget id='Text1' locked='false' title='Herramientas' type='Text'/>
</b:section-contents>

  • En la sección identificada como sidebar-right-1 está el gadget Webmaster
  • En la sección identificada como sidebar-right-2-1 está el gadget Archivo del blog
  • En la sección identificada como sidebar-right-2-2 está el gadget Bloguermast
  • En la sección identificada como sidebar-right-3 está el gadget Herramientas
3.- Copiamos la línea de código correspondiente al gadget al cual queremos cambiar de sitio, y la pegamos en el lugar elegido, tomando como referencia los otros gadgets.
  • Siguiendo con nuestro ejemplo, para poner el gadget Archivo del blog en la parte superior, copiamos la línea correspondiente a ese gadget...
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
  • ...la pegamos encima de la línea correspondiente al gadget Webmaster...
<b:widget id='Profile1' locked='false' title='Webmaster' type='Profile'/>
  • ...y la eliminamos del lugar en el que se encontraba.


  • Hecho el cambio el código correspondiente a las secciones de la sidebar en donde se encuentran los gadgets deberá quedar así:
<b:section-contents id='sidebar-right-1'>
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Webmaster' type='Profile'/>
</b:section-contents><b:section-contents id='sidebar-right-2-1'/><b:section-contents id='sidebar-right-2-2'>
<b:widget id='Image1' locked='false' title='Bloguermast' type='Image'/>
</b:section-contents><b:section-contents id='sidebar-right-3'>
<b:widget id='Text1' locked='false' title='Herramientas' type='Text'/>
</b:section-contents>

  • La línea resaltada corresponde al gadget al cual se le cambió de sitio.

4.- Vista previa y Guardar plantilla

La disposición de los gadgets, después del cambio será ésta:

9 comentarios :

▼▲ Ocultar / Mostrar comentarios
Comentario escrito por Anónimo #

No encuentro ese código en mi plantilla.

Felicitaciones por el blog, es muy didáctico.

Saludos.

Comentario escrito por Unknown : #

Anónimo: El código de debe ser exactamente igual al que se indica en el tutorial. Puede variar de acuerdo con el número de gadgets que tenga y la sección que ocupan. Así que busque un código que se parezca.

Saludos.

Comentario escrito por Anónimo #

En primer lugar quiero darle las gracias Sr. Pachón por este blog tan útil.

Estoy iniciándome en el mundo de los blogs y tratando de sacar adelante uno sobre ahorro y bolsa en blogger. Por ello, le agradecería mucho si me pudiera orientar un poco acerca de como colocar cotizaciones sobre un índice bursátil o la cotización del bono español a 10 años en mi blog.

Muchas gracias en cualquier caso.

Daniel, Almagro, España.

Comentario escrito por Unknown : #

Estimado anónimo,

Creo que no es mucho lo que puedo ayudarle, ya que, hasta donde tengo entendido, lo que más se aproxima, en un blog de Blogger, a la presentación de datos estadísticos como los que menciona, son las tablas que, para su propósito, creo que se quedan cortas. En este tutorial encuentra algunos ejemplos:

http://bloguermast.blogspot.com/2009/12/tablas-avanzadas.html

Cordial saludo.

Comentario escrito por Unknown : #

ayudeme a ponerle aplicaciones a mi blog

Comentario escrito por . : #

te felicito por la explicacion, muy didactica y clara, ahora tengo una pregunta para ti: si lo que yo quiero es separar los gatgets ya que visualmente están muy pegados y quiero darles un espacio entre unos y otros que tengo que hacer?

Comentario escrito por Pedro Pablo Pachón : #

.
La respuesta que está en el comentario #15 del siguiente tutorial, y el mismo tutorial, te pueden servir:

http://bloguermast.blogspot.com/2012/07/personalizar-gadgets-blogger.html

Saludos.



Comentario escrito por Anónimo #

me quedo claro para moverlos de arriba a abajo pero como los muevo del lado derecho al izquierdo? :)

Comentario escrito por Pedro Pablo Pachón : #

Anónimo, si el blog tiene sidebar izquierda, o se la agregó, deberá identificarla. en el caso del ejemplo del tutorial la identificación de la sidebar derecha es: id='sidebar-right' , la de la izquierda deberá ser: id='sidebar-left'
Las líneas de código de los gadgets que va a mover los eimina del código correspondiente la sidebar right y los pega dentro del código correspondiente a la sidebar left.

Saludos.

Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.

El autor.