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.
