![BWS tips button](http://farm7.static.flickr.com/6067/6049255788_da140149c5_m.jpg)
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 :)
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 :)
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.![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHtOQWOpMPJZnyqe-xJpPrRlUMmAnDrdAmaaabJ0goWt7fgNLFAvKZNLNjF5Ym0bbMNlZODEjpU1D2EA4BNC38fES1y6sxUCPe9rsMEHmU4pj_5usLByODi2cyeNoY4K87IQm1HivdZX1/s400/Imagen+1.jpg)
1. Para cambiar la dimensión de la imagen utiliza la opción de Picnik "editar" > "cambiar tamaño"
3. Si la imagen de origen no era cuadrada, desmarca el checkbox "mantener proporciones"
También puedes añadir texto a la imagen.
2. elige el tipo de letra que más se ajuste.
1. Puedes subir la foto a Flickr directamente desde la pestaña "guardar"
¡Ya tienes la imagen lista para usar!
2. Elige "nuevas dimensiones": 150x150
También puedes añadir texto a la imagen.
1. En la opción "crear" > "texto"
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:
Comprueba que tu imagen está configurada como "pública", es decir, que "Cualquier persona puede ver esta foto"
Desde la foto, abre el menú "Acciones" y elige "Ver más tamaños"
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."
alt
=
""
/>
<
br
/><
textarea
cols
=
"20"
rows
=
"3"
><
a
href
=
"http://armygurumi. blogspot.com/"
><
img
src
=
"
http:/"
alt
=
"BWS tips button"
width
=
"150"
height
=
"150"
/></
a
></
textarea
>
PON EL BOTON EN TU BLOG
- Desde tu blog de Blogger, ve a Diseño> Añadir un gadget > HTML/Javascript
- Copia y pega el código HTML en el cuadro "contenido"
- Guarda y ¡ya tienes el botón en tu blog!
No hay comentarios:
Publicar un comentario