Normalmente cuando añadimos un
gadget HTML/Javascript y colocamos en su interior
un código, a veces nesecitamos
centrarlo o alinearlo hacia un lado concreto ya que
Blogger tanto textos como elementos los alinea hacia la izquierda.
Para
alinear los códigos en gadget donde podemos modificar el Html vamos a
encerrarlos en un contenedor (div) y usaremos la propiedad Css
"align" para alinearlos hacia cualquier posición.
Centrar
<div align="center">
Código que se quiere centrar
</div>
A la izquierda
<div align="left">
Código que se quiere a la izquierda
</div>
A la derecha
<div align="right">
Código que se quiere a la derecha
</div>
Tan solo
hay que añadir el código donde se indica
para alinearlo a cualquier posición.
Pero que ocurre si los gadget que instalamos son los propios que Blogger trae por defecto y no podemos modificarlos al no tener acceso al código Html y que normalmente los instala a la izquierda, llaménse:
Estadísticas de Blog, imágenes, lista de Blog etc.....
Por ejemplo
el gadget de Estadísticas, Blogger nos dá la opción de unos cuantos modelos donde elegir pero su alineamiento es siempre a la izquierda.
¿Cómo centrarlos entonces?
Si accedemos a cualquier plantilla nos damos cuenta que Blogger identifica a todos los gadget con una identidad, siendo la de Estadísticas
"Stats1".
Pués bien
conociendo la ID de Estadísticas
Stats1 con un poco de CSS la podemos centrar, así que buscamos en nuestra plantilla (F3 O CTRL+F) el código
]]></b:skin> y justamente
encima colocamos esto:
#Stats1 { text-align: center; }
Otro gadget que Blogger nos ofrece y es
muy utilizado es el de imágenes y cuya
ID es
"Image1".
Blogger los identifica por numeración, osea si tienes 4 gadget de imágenes blogger los identifica como Image1, Image2, Image3, Image4 etc...
¿Como sé la ID de uno que quiero centrar?
Bién ello es fácil, como cada imágen lleva un nombre en el gadget, debemos acceder a la plantilla y ver cual es su
ID. De ejemplo
mi gadget se llama "
SEVILLA FC"
Buscamos con (f3 o ctrl+f) el nombre del gadget, en mi caso
SEVILLA FC y veremos una cosa así:
<b:widget id='Image1' locked='false' title='SEVILLA FC' type='Image'/>
Donde la id=???? del gadget es la que utilizaremos para centrar la imagen que en este caso sería
Image1 y la centraríamos con este código siguiendo los mismos pasos que en el anterior, buscamos
]]></b:skin> y justamente
encima colocamos esto:
#Image1 { text-align: center; }
Esta es la forma de buscar las ID de cualquier gadget que queramos centrar y añadiéndole
#nombreID { text-align: center; }
conseguimos centrar cualquier gadget.
!!!!!!!!!!! A DISFRUTARLO!!!!!!!!!!!!!
