Imágenes con enlace en Blogger y HTML

Es muy común en los Bloggers y los desarrolladores web hacer que las imágenes que se muestran en sus Sitios web tengan un enlace de redireccion, el cual nos lleva a una pagina diferente, puede que sea del mismo Sitio o de un sitio diferente, en Blogger cuando se hace click sobre una imagen de las entradas, esta se aparece en forma de ventana modal o en algunos casos según la configuración nos dirige a una pagina donde solo se muestra la imagen completa.

En esta entrada aprendemos como hacer que nuestras imágenes tengan un enlace el cual nos dirigirá a cualquier lugar de la web que deseemos.

Imágenes con enlace en  HTML:

HTML es la columna vertebral de los sitios web, y es lo que debemos saber para poder hacer que nuestras imágenes tengan un enlace, a continuación mostraremos los códigos para hacer un enlace y poner una imagen respectivamente:

Código para poner un enlace:

<a href='dirección de enlace'> Texto con enlace</a>

Código para poner una Imagen:

<img src='Ubicación de la Imagen'/>

Estos son los códigos básicos que debemos saber para poner enlaces e imágenes ahora para que nuestra imagen tenga un enlace solo debemos juntar la funcionalidad de las etiquetas y nuestro Código quedaría de la siguiente manera:

Código para poner una Imagen con enlace:

<a href='dirección de enlace de la imagen'>
<img src='Ubicación de la Imagen'/> 
</a> 

Ahora cuando pongamos este código la imagen que se muestra tendrá una dirección que se especifica en el href de la etiqueta <a>.

Ejemplo:

Si hacemos click notaremos que la imagen nos redirecciona a la pagina principal de este Blog, de esta forma podemos hacer que nuestros enlaces, tengan un atractivo mayor al darle una imagen de referencia en lugar de un texto común. Ahora que ya sabemos como funciona el código HTML veremos como funciona en Blogger:

Imágenes con enlace en Blogger :

Para poner un enlace a nuestras imágenes en Blogger es sumamente mas sencillo ya que no tenemos que estar codificando nada; solo basta con usar la herramienta enlace que el Editor de entradas de Blogger trae como opción:

Al igual que en los textos, se usa la misma opción para las imágenes, lo único que hacemos es seleccionar la imagen y dar click en la opción enlace y colocar la dirección a la cual nos dirigirá la imagen al hacer click en ella. Si se dan la molestia de entra al HTML de la entrada y ubicar el código de la imagen notaran que antes de este esta la etiqueta <a> con la dirección que le asignaron en la opción enlace, de esta forma nos damos cuenta que el resultado es el mismo que al hacerlo manualmente. 

Espero que les aya sido de mucha utilidad esta entrada. Cualquier duda o aporte hacerlo por Comentarios. Gracias por su Tiempo!

¿Tienes alguna otra idea de que hacer con los enlaces? compártela !!