Tutorial: crea un botón para tu blog

 Hace tiempo que quería incorporar en mi blog un botón como éste para facilitar o hacer más atractivo enlazarlo desde otro blog.
El botón muestra una imagen y a continuación un cuadro con scroll que contiene su código HTML. Sólo hace falta copiar y pegar este código en un gadget del tipo HTML-Javascript para que aparezca la imagen que enlaza con mi blog en la barra lateral del tuyo.
Y a continuación te explico cómo lo he hecho :)

<a href="http://armygurumi.blogspot.com/"><img src="http://farm7.static.flickr.com/6067/6049255788_da140149c5_m.jpg" alt="BWS tips button" width="150" height="150" /></a>

CREA LA IMAGEN DEL BOTÓN 

Para crear la imagen puedes utilizar el editor online Picnik, por ejemplo. 

Necesitarás una imagen de 150x150 pixeles.

 1. Para cambiar la dimensión de la imagen utiliza la opción de Picnik "editar" > "cambiar tamaño"

2. Elige "nuevas dimensiones": 150x150

3. Si la imagen de origen no era cuadrada, desmarca el checkbox "mantener proporciones"

También puedes añadir texto a la imagen.

1. En la opción "crear" > "texto"

2. elige el tipo de letra que más se ajuste.

Guarda la imagen en un sitio web de alojamiento de imágenes como Flickr.

1. Puedes subir la foto a Flickr directamente desde la pestaña "guardar"

2.  y desde la opción "Flickr"

¡Ya tienes la imagen lista para usar!

CREA EL CÓDIGO HTML

El código HTML de tu botón será el siguiente: 

<img src="URL IMAGEN" alt="" />

<br /><textarea cols="20" rows="3"><a href="URL BLOG"><img src="URL IMAGEN"alt="BWS tips button" width="150" height="150" /></a></textarea>

Donde: 

URL BLOG es la de tu blog, en mi caso "http://armygurumi.blogspot.com/"

URL IMAGEN es la ruta que lleva a tu imagen en Flickr. 

Para obtener esta ruta, sigue estos 3 pasos:

1. Comprueba que tu imagen está configurada como "pública", es decir, que "Cualquier persona puede ver esta foto"
2. Desde la foto, abre el menú "Acciones" y elige "Ver más tamaños"
3. Clica sobre la imagen de 150x150 y copia la ruta de la imagen. Esta ruta ha de ser del tipo "http://farm7.static.flickr.com/6067/6049255788_da140149c5_m.jpg"

Con mis datos, el código HTML queda como sigue:

<img src="http://farm7.static.flickr.com/6067/6049255788_da140149c5_m.jpg" alt="" />

<br /><textarea cols="20" rows="3"><a href="http://armygurumi.blogspot.com/"><imgsrc="http://farm7.static.flickr.com/6067/6049255788_da140149c5_m.jpg" alt="BWS tips button"width="150" height="150" /></a></textarea>

PON EL BOTON EN TU BLOG

1. Desde tu blog de Blogger, ve a Diseño> Añadir un gadget > HTML/Javascript
2. Copia y pega el código HTML en el cuadro "contenido"
3. Guarda y ¡ya tienes el botón en tu blog!