Seguramente habrás visto en algún sitio web alguna imagen o banner que llamó tu atención, hiciste clic en él y te abrió una página o sitio web diferente, bueno pues eso es lo que justo estás buscando hacer en tu sitio web o foro; poner en una imagen un link para que la gente que haga clic en él lo lleve directo a la página.
Datos importantes a considerar:
📌 No existe por el momento, un método con el cual, a una imagen .JPG le añadas un link y puedas enviarlo a donde sea.
📌 Deberás tener tu imagen en formato .JPG ya lista.
📌 Este método sirve únicamente para sitios web o foros donde puedas insertar un código HTML y la imagen quedará con un link que redirige a un sitio web como en el siguiente banner.
Link en Imagen
Primero abrimos un bloc de notas. El bloc de notas se abre dando clic derecho sobre algún espacio de la carpeta o bien en el escritorio, elegimos Nuevo > Documento de texto. Para guiarnos escribiremos 2 puntos:
1. Link que se abrirá al dar clic en la imagen.
2. Código HTML de la imagen.
Ya que tengamos estas dos anotaciones, procedemos a escribir debajo del punto número 1. el Link/URL del sitio web que deseamos se abra cuando la gente haga clic en la imagen. Quedando de esta forma:
1. Link que se abrirá al dar clic en la imagen.
https://www.youtube.com/channel/UCskpYU6_JADsUanUNyiPjpQ/
Obtener código HTML
Después debemos obtener el código HTML, por lo cual debemos entrar a la siguiente página: https://es.imgbb.com/ . Hacemos clic en Comienza a subir > elegimos la imagen > Abrir > Subir. En la opción Enlaces de visualizador > Elegimos HTML completa enlazada.
Nos dará el código HTML y cuando pasemos el cursor por ese código nos aparecerá la opción de copiar, o en la esquina del recuadro dice copiar, hacemos clic en copiar.
Crear el código HTML para imagen
Abrimos el bloc de notas y procedemos a pegar debajo del número 2, el código HTML de la imagen que nos ha brindado la página. Quedando de esta forma:
2. Código HTML de la imagen.
<a href=”https://ibb.co/L8tszRF“><img src=”https://i.ibb.co/W6yRW5h/Banner-Post.jpg” alt=”Banner-Post” border=”0″></a>
Ahora, de ese código HTML del punto 2, vamos a borrar el texto (que está en formato negrita) el cual se encuentra entre las comillas ‘’ ‘’. En el código de mi ejemplo sería lo siguiente: https://ibb.co/L8tszRF. Una vez borrado, el código quedará de esta forma:
<a href=” “><img src=”https://i.ibb.co/W6yRW5h/Banner-Post.jpg” alt=”Banner-Post” border=”0″></a>
Regresamos al punto número 1 de nuestro bloc de notas, y vamos a seleccionar el link debajo, lo copiamos y posteriormente lo pegaremos en el punto número 2 en medio de las comillas de donde borramos texto anterior. Quedando de esta forma:
<a href=”https://www.youtube.com/channel/UCskpYU6_JADsUanUNyiPjpQ/“><img src=”https://i.ibb.co/W6yRW5h/Banner-Post.jpg” alt=”Banner-Post” border=”0″></a>
¡Listo! Ha quedado nuestro código HTML de un banner o imagen, el cual podemos insertar en algún sitio web, foro etc.. donde se acepte el código HTML y se podrá ver la imagen que después al hacer clic en ella les llevará al link que pusieron. Acá te puedo mostrar cómo colocarlo en WordPress.
Cómo poner el código HTML de una imagen con link en WordPress
Entra a Editar una entrada en Wordprees, después colócate en un renglón para colocar un bloque. Y escribe HTML (saldrá HTML personalizado), elige esa opción y simplemente tendrás que pegar el código HTML que ya creamos. Le das Enter y ya aparecerá, ahora solo queda actualizar la entrada y ver la entrada.
Como mencioné al inicio, esto sirve unicamente para colocar en un sitio web o foro donde se admita el código HTML, evidentemente no sirve para Facebook, ni para Twitter, ni Whatsapp. Para Whatsapp se puede hacer de otra manera.
