Gadget de Facebook Twitter personalizable

Cuando queremos incluir un Gadget que muestre un par de imágenes de Facebook y Twitter que cilcando en ellos nos lleven a nuestras respectivas cuentas o páginas en redes, los pasos a seguir son los siguientes:

1. Debemos ir al diseño del blog e incluir un gadget.
2. Se nos abrirá la ventana de Gadgets de blogger, donde elegiremos el gadget: HTML/JAVA.
3. Una vez abierta la ventana del gadget, podemos incluir un título, tras lo cual nos posicionaremos en el área de texto destinado al código HTML y pegaremos el siguiente código:

<a href="http://facebook.com" target="_new"><img src="http://peppermintjim.com/wp-content/uploads/2011/10/facebook-logo.png" width="110" height="110"/></a>

<a href="http://twitter.com" target="_new"><img src="http://www.trecebits.com/wp-content/uploads/2009/04/twitter-logoweb506.jpg" width="110" height="110" style="float: left;"/></a> 

4. Explicación del código:

<-----Vamos con el primer párrafo de código---->

• a href="http://facebook.com" hace referencia a la url o dirección de destino, es decir,en este caso, nuestra página de Facebook .

• img src="http://www.trecebits.com/wp-content/uploads/2009/04/twitter-logoweb506.jpg hace referencia a la url o dirección de de la imagen o logo que queremos que aparezca en el widget, es decir,en este caso: 

• width="110" height="110" nos da la posibilidad de cambiar el alto y ancho de visualización de la imagen. Recordar que lo que cambia es la visualización de la imagen y no el peso en bits, resolución o tamaño real de la imagen. 

<-----Vamos con el segundo párrafo de código---->



En el segundo párrafo se repiete el código entero salvo con dos excepciones:

• Rutas, direcciones o URL:  Así como en el primer párrafo, tanto las rutas del vinculo como de la imagen hacían referencia a Facebook, en este caso hay que cambiarlas a la dirección URL de la cuenta de Twitter y a una URL de la imagen del Logo de Twitter. 

• Posición de las imagenes:  Así como en el primer párrafo, tanto las rutas del vínculo como de la imagen hacían referencia a Facebook, en este caso hay que cambiarlas a la dirección URL de la cuenta de Twitter y a una URL de la imagen del Logo de Twitter.  Si queremos que se muestren en horizontal, usaremos el parámetro  float: left; .  Este parámetro  hace que las dos imagenesm se muestren el horizontal. Eliminadolo del código, las imagenes se mostrarán en vertical.

<-----Por último---->

Recordad, que la suma del ancho de las imágenes tiene que ser igual o menor al ancho de la columna donde está alojado el gadget de nuestro blog.