Creación de enlace con imagen

Para crear un enlace con una imagen, en una entrada de Blogger, seguimos los siguientes pasos: 1.- Vamos a Nueva entrada. 2.- Abrimos la pestaña Redactar. 3.- Hacemos click en el botón Insertar imagen, y bajamos un de nuestro disco duro.

4.- Abrimos la pestaña Edición de HTML para hacer la modificaciones necesarias en el código de la imagen.

El código puede ser como uno de los siguientes, dependiendo de navegador que utilicemos:

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqMLbj2TTmBNfiXr9vrAvyRVu5aZLn6c4stHsjIzhichYDPQhhlQ-XTRvMlRJe4Z8y2QDqyY1n9pG02Ln6wGJSltZS0saKoI6mfsY_36f8otvtQrPFUqOU2YmjlNfwQrsHkLO7rLu5dEY/s1600-h/fondo_cabecera1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" ps="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqMLbj2TTmBNfiXr9vrAvyRVu5aZLn6c4stHsjIzhichYDPQhhlQ-XTRvMlRJe4Z8y2QDqyY1n9pG02Ln6wGJSltZS0saKoI6mfsY_36f8otvtQrPFUqOU2YmjlNfwQrsHkLO7rLu5dEY/ s400/fondo_cabecera1.JPG" /></a> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s1600/Blogger.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Ap5Rl8SzsMHp4uTzqG3qL15vmlUgfx8QEUVhmhSfOqOpTBEYfr5gpKQxs-AO_X9q4ykV6GXhi2PcT9WNjVW4BiF0iIWNrA93AZiCoqUMzfF9D9EvqV0Qic_HrOlwL2at_tjANrzvlWc/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592199810662894994" /></a> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ZCbapoNJ6fqLBqzQe5z2AtU17sDYqnfzG-akluX_TlaA0GjIiIiQIghal5zPkLjtCPol3RNbwh_zx7MysjG6q0_RdEYm-ThQov4EClVvBbFh1kT5kDlHq-sW58wY7y8viXkq1-gWu2A/s1600/Blogger.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 118px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ZCbapoNJ6fqLBqzQe5z2AtU17sDYqnfzG-akluX_TlaA0GjIiIiQIghal5zPkLjtCPol3RNbwh_zx7MysjG6q0_RdEYm-ThQov4EClVvBbFh1kT5kDlHq-sW58wY7y8viXkq1-gWu2A/s320/Blogger.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5592505807323818274" /></a>

5.- La línea resaltada en rojo es la URL de nuestra imagen, por consiguiente al hacer click sobre la imagen volveremos a la misma, entonces debemos reemplazarla por la URL a la cual queremos que nos enlace nuestra imagen 6.- La línea resaltada en azul nos indica el sitio en donde se encuentra la imagen en nuestro blog. No sebe ser modificada. 7.- Resumiendo: El código de la imagen lo encontramos en la edición HTML del editor de entradas, una vez insertada la imagen, y lo único que debemos hacer es cambiar la URLde la imagen por la del sitio que queremos enlazar. 8.- Publicamos la entrada, la vemos, hacemos click sobre la imagen y estaremos en el sitio que hemos enlazado.

Índice Enlaces
URL
Enlaces relativos y absolutos
Enlaces básicos
Enlaces avanzados
Otros tipos de enlaces
Ejemplos de enlaces habituales
Enlaces entre páginas
Creación de enlaces con texto
Creación de enlaces con imágenes

◄Anterior | Siguiente►