El rincón natural

jueves, 8 de octubre de 2009

Cómo poner imágenes con liga hacia otro sitio

A petición de mi compañero bloggero Vic, les dejo un pequeño manual con código html para insertar imágenes que tengan la cualidad de servir como ligas (links) hacia un sitio particular de internet.

Primero, entrar en el sitio donde están las opciones para configurar blogger. Despues dar click en la pestaña que dice Diseño.

Allí, dar click en agregar gadget. Aparecerá una ventana emergente que tiene varias opciones para seleccionar tipos de gadgets. Alli dar click en el que dice HTML-Javascript.

Posteriormente, aparecerá un recuadro que pide escribir el título del gadget y un espacio en blanco para escribir los comandos. Allí es donde escribiremos el código HTML para hacer que una imagen sirva como link a un website.

Antes que nada debemos tener disponible una imagen albergada en algún sitio de internet que sea disponible de accesar por medio de una dirección de internet. Si queremos poner una imagen hecha por nosotros entonces podemos albergarla (hosting) en un sitio como Image Hosting, sólo le damos "browse" para buscar la imagen en nuestra computadora, luego seleccionamos la opción "remove size/resolution bar from thumbnail" y luego click en host it. Si quieren cambiar la resolución de la imagen también pueden hacerlo en la opción "resize image". Luego nos mandará a una página que contiene el link directo de la imagen.



Dentro del recuadro, entonces escribrimos lo siguiente:

[p align="center"][a href="LA DIRECCIÓN DEL SITIO" height="numero" width="numero"][img src="LA DIRECCION DONDE ESTA LA IMAGEN"/][/a][/p][center][/center]

Pueden cambiar la altura y el ancho de la imagen usando el comando width="numero" y height="numero", respectivamente, y los escriben despues de donde escriban la dirección del sitio web que quieren que haga link la imagen.

El comando center es para centrar la imagen en el contexto donde vaya a estar.

Por último, sustituyan los brackets "[]" por signos "<>", respectivamente.

Y listo, eso debería de ser suficiente para mostrar su imagen con cualidad de ligar a un website en particular.

Yo hice eso con la imagen de VIVA LA EVOLUCIÓN que está en la cabecera de mi blog.

Si tienen dudas o comentarios sólo háganmelo saber. Si ocupan más códigos o comando que interesen, háganlo saber también.

Saludillos!!

4 comentarios:

rotcives dijo...

ya sta , gracias por el tutorial, solo que no pude eliminar la leyenda con las dimensiones.

Danny Biolokko dijo...

Sólo tienes que seleccionar donde dice "remove size/resolution bar from thumbnail" justo abajo de donde dice "resize/remove". Dale una checada y verás que sí puedes, es cuestión de repetir la operación.

rotcives dijo...

Excelente!!ya quedó, muchas gracias.

Danny Biolokko dijo...

No problem, si te interesa puedes checar el nuevo post que redacté y como podrás ver te tengo en mi top de sitios de interés.

Saludillos!

Publicar un comentario

Nature

Science

Molecular Biology and Evolution - current issue

Genes & Development