79

Hacer que una imagen funcione como link

Me lo han preguntado varias veces y es muy sencillo de conseguir.
En primer lugar hemos de obtener la url de la imagen que funcionará como link, para ello la subimos a un alojamiento de imágenes o al propio Blogger.
Una vez obtenida la url de nuestra imagen, la colocamos en este sencillo código, donde dice URL_DE_IMAGEN y en el mismo código, colocamos la página que queremos linkar, es decir, la dirección web que se abrirá al pinchar sobre la imagen, en URL_DE_WEB:

<a href="URL_DE_WEB"><img src="URL_DE_IMAGEN"></a>

Ejemplo

<a href="http://eternamentecabreada.blogspot.com">
<img src="http://img373.imageshack.us/img373/4449/89653287xy8.png"></a>





Para que el enlace al pinchar en la imagen se abra en página nueva, añadiremos el target="_blank" al final del enlace:

<a href="URL_DE_WEB" target="_blank"><img src="URL_DE_IMAGEN"></a>

Entradas Relacionadas:

79 comentarios:


Felicituri

Gracias Rosa.

Liliana

¡Hola,soy muy nuevita en esto de los blogs, para cuando te encontré, ya llevaba unos cuantos meses de buscar, soy una persona bastante "mayor" y todo cuesta el doble. Me gustaría que visities nuestros Blogs y nos ayudes un poquito más. http://lagallineta.blogspot.com

andrespepo

Depuntazo dice: Gracias Rosa por el consejo, ya li hice y me gustó, pero tengo otra inquietud, hay alguna forma para quitar la barra de blogger o de personalizarla?, un saludo y de nuevo gracias!!!

Anónimo

Depuntazo, mira en estos tres posts que hablo sobre eso...

http://elescaparatederosa.blogspot.com/2007/05/navbar-personalizada.html

http://elescaparatederosa.blogspot.com/2007/03/navbar-barra-blogger-mgica.html

http://elescaparatederosa.blogspot.com/2007/01/ocultar-que-no-quitar-la-barra-de.html

Anónimo

lagesio, bienvenida, te visitaré!

Unknown

Gracias por este dato, lo tenía mal en mi blog y ya lo corregí.
También te dejé un regalo en mi blog, no es por devolverte la mano solo es en agradecimiento por tus ayudas para mejorar mi blog. Un gran abrazo Pau

Fricky

Hola Rosa, gracias por tus sugerencias son de verdad ùtiles.
Buena suerte.

Tango

Hola Rosa. También sería bueno ofrecer la posibilidad de la imagen con link externo con el famoso target=_blank.

Mi humilde sugerencia :P

Un abrazo

bromito

Noelia Cabo

Gracias por este post! La verdad es que soy nueva en esto y llevaba ya un buen rato buscando la forma sin conseguirlo :s Un saludo, y felicidades por un blog tan útil!

Alejandro Sánchez Fuentes

Amigos, estoy empesando con mi blog, y me gustaria que me ayudaran en saber como poner una imagen en "añadir un elemento a la pagina" ya que me sale el nombre de la pag pero no se como ponerle una imagen, muchas gracias y espero su respuesta, seguire intentando

Anónimo

Alejandro, veo que ya lo has conseguido, aunque sigue saliendo el título del blog ¿es porque así lo quieres o es que no sabes como quitarlo?...

AGUSTIN

Hola Rosa, como te va?estoy armando el blog de una ONG y tengo varias consultas para hacerte...asique hoy voy a hacerte una..he leido mucho de tu blog pero todavia no si si es que no esta o no veo la explicacion de como hacer para que una imagen sea usada como link, pero, una imagen que yo subo desde mi pc y la añado al sidebar se entiende? añado un elemento a la pagina, elojo subir una imagen, desde mi pc y esa quiero usarla como link a otra web..como logro esto? desde ya muchisimas gracias, saludos.
Agustin

Anónimo

Agustin, acabo de publicar una entrada con la respuesta, he pensado que tal vez le interesaría a alguien más...:-)

Anónimo

hola e utilizado tus ayudas pero ahora quisiera saber si podriamos intercambiar links el mio es
http://superelectronika.blogspot.com/
en mi blog encontrras la imagen para que me linkees ojala aseptes

Anónimo

que pen por aberlo puesto tantas veses es que lo undi mucho y no me di cuenta

Anónimo

ola rosa gracias por tus ayudas me han servido bastante ya que recien estoy empresando en el mundo del blog no me a resultado esta cosas de los codigo nose porque pero al pinchar me da erro sabes que pued pasar he hecho todos los pasos correctos saludos rodrigo te dejo mi msn dipox_19@hotmail.com

Anónimo

rodrigo, lo más fácil es que hayas olvidado colocar alguna de las comillas...

Anónimo

Hola,

Ante todo dar las gracias por esta página, a la que he acudido innumerables veces en busca de ayuda.

Tengo un problema con hacer que una imagen sirva de enlace a mi blog. Cuando pongo en la barra lateral el código con mi página seguido del código con la imagen que deseo usar, siempre me aparece la fotografía, pero lo que quiero es que aparezca el código HTML en texto, como he visto en muchos sitios, para que los que así lo deseen puedan copiarlo y pegarlo directamente en su página.

Muchas gracias por todo.

Julio
www.findelmaltratoanimal.blogspot.com

Anónimo

Julio, pincha arriba en el menú de etiquetas, donde dice "Botón de enlace" ahí hay varias entradas que te ayudarán seguro.

Fin Maltrato Animal

Hola de nuevo Rosa,

acabo de leer ahora mismo tu respuesta aunque sea del día 24 - mucho Blog y poco tiempo por desgracia -. Pues siguiendo tu consejo por a pinchar en ese botón y espero encontrar allí una entrada que me ayude.

Muchas gracias por todo.

Salud.

Julio

Anónimo

Hola Rosa necesito tu ayuda lo que pasa es que hago los pasos y no me sale me sale es un cuadrito con una X, Ayudameeeee....... Y Subo La Imagen Y nada y formato o adonde la subo no c ayudamme

Gracias

Nienca

Hola Rosa, que tal? Desde que entre en tu blog la verdad que he podido hacer del mio un show!
Ha comenzado como un proyecto para la universidad y se ha transformado en mis ganas de que sea el mejor.
Quisiera consultarte, hace mucho que me gustaria hacer dos cosas:
1- poner como opcion esto, que nos dejen comentarios en el blog como estoy haciendo ahora y que figueren como un listado en el mismo cuerpo del blog.
2- crear una imagen .gif (o sea, con movimiento) en el titulo del mensaje, ya que he encontrado como cambiar ese titulo.
Ojala me puedas ayudar con esto.
Gracias!

Anónimo

Andres, si subes la imagen en formato jpg a cualquier alojamiento no tendrías que tener ningún problema...

Anónimo

Nienca, como ves en mi blog los comentarios están expandidos debajo de la entrada solo en las página secundarias, no en la principal, lo que si he hecho, es aplicar un pequeño "truco" para que cuando alguien pinche en "comentarios" este enlace le lleve a la página de etiquetas, donde verá la entrada completa con sus comentarios expandidos debajo. Puedes ver como hacer esto, aquí:
http://elescaparatederosa.blogspot.com/2007/10/sistema-de-comentarios-sin-ventanas.html

En cuanto a la otra consulta, no entendí exactamente que es lo que quieres, mira en esta entrada si es algo así:
http://elescaparatederosa.blogspot.com/2007/05/imagen-antes-del-ttulo-de-las-entradas.html

lichazul

rosa

porfavor
como puedo poner una imagen
en el buscador o reemplazar la "B" de bloguer
así como tú tienes esa señora en la silla frente al computín y luego la http://y tu url en chiquitito allá arriba

tengo esta imagen
http://www.muchografico.com/avatares/_avatar_created.php?color=9&name=mis+escritos&font=01&size=10&color_r=0&color_g=0&color_b=0&HexInput=

no sé si sirva:-)
help me plisssssss:-)

gracias

Anónimo

Elisa, mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html

Producción

Hola Rosa, encuentro increible tu blog, de mucha ayuda, lamentablemente yo llevo muy poco en esto y sigo tus instrucciones para cualquier cosa y no me sale... tienes alguna entrada que me ayude a ponerme al dia con este lengüaje... desde ya muchas gracias

Anónimo

Producción, todas las entradas te serán de ayuda, simplemente probando y con paciencia, irás descubriendo que comienzas a entender...

Unknown

Hola...me gustaria saber si me podrias exar un cable...

El problema que tengo es ke me gustaria hacer que la imagen de mi cabecera de mi blog, sea un link a la pagina principal del mismo blog...

Probe cosas, pero me daba error...

Gracias

Anónimo

Jona, tu imagen de cabecera está incluida directamente en el css de la plantilla, aquí:
#header-wrapper {
background: #e0e0e0 url(http://i331.photobucket.com/albums/l467/futbollerfc/bannerII.png) no-repeat left;

Por eso ahí no es posible añadirle el enlace...

¿Has probado a subirla desde Blogger? de está manera el enlace se incluye de forma automática.

Solgadie De Papel

Hola Rosa, quisiera saber si es posible de alguna forma cambiar la pantalla de inicio del blog, mi blog es nuevo y tengo pocas entradas y lo estoy arreglando todos los dias pero para llegar a lo que quiero me falta un poco, entonces ... hay alguna forma de cambiar la primera pantalla del blog??? gracias denuevo

Anónimo

Soluciones Gráficas Gadie, si te refieres a cambiarle "el aspecto" del diseño al que ya tienes, pues has de ir poco a poco, buscando cosillas para ir modificando, arriba en mi menú, en la etiqueta "Plantillas" hay muchas entradas sobre cambiar diseños, como aplicar imagen a los títulos o bordear las entradas...etc.

Si te refieres a hacerlo de una vez, pues cambiando la plantilla por otra que te agrade más y ya está.

Solgadie De Papel

hola otra vez, y una pregunta mas, como puedo cambiar el color del texto de mi menu de etiquetas (los botones)ya ke puse los que tenias tu, pero, con el color de fondo no van muy bien y kisiera ponerlas en rojo o negro... porfa, responde ... gracias

Anónimo

Soluciones Gráficas Gadie , si te refieres a cambiar el color del texto del boton o su tamaño, eso se hace en el código, el tamaño donde dice:
font-size:80%;

Y el color del texto, donde dice:
color:
Se cambia el código que va después de color: por el código del color que quieras.

Si te refieres a cambiar el color de las pestañas en el paso 6 de la entrada pone el enlace a los otros modelos.

Unknown

Gracias Rosa por solucionarme el problemilla este de la cabecera...

Solgadie De Papel

hola rosa, me sirvio de mucho tu ayuda, ahora me aqueja otra duda: como puedo poner una de mis entradas para que sea la primera que visiten, o sea, cuando pongan la direccion http://.....blogspot.com se vea la entrada que yo quiero, atentamente y siempre agradecido.

Mauricio

Anónimo

Soluciones Gráficas Gadie , cualquier entrada a la que pongas la última fecha de publicación se verá siempre la primera, para hacer que la entrada que tu quieras se vea en primer lugar aunque sigas publicando nuevas entradas, la única opción es cambiarle la fecha por una fecha posterior a la que acabas de publicar...

Es decir, tu puedes editar una entrada, cambiarle la fecha, colocarle una fecha posterior a la última que has publicado y entonces esa entrada "subirá" al primer lugar.

Si lo que quieres es hacer una especie de texto de bienvenida o incluir una información relevante para tus visitas y que siempre esté sobre la primera entrada sin tener que modificar nada, entonces te recomiendo usar un elemento "Texto" y colocarlo sobre las entradas (arrastrando en la parte de edición).

Unknown

muchas gracias por el dato me ha servido mucho, me rompia la cabeza tratando de hacerlo
denuevo muchas gracias

Anónimo

Hola rosa.. como va? la verdad q exelente blog.. estoy viendo como se puede hacer, para q las entradas tengan imagenes con link (SIN TEXTO).. lo vi en este blog (en la parte izquierda "entradas antiguas") http://chilemoviezz.blogspot.com/
mi idea es hacer algo parecido.. estaba pensando en subir las imagenes y a cada una ponerle el link de entrada .. pero.. queria saber si hay alguna otra manera.. Gracias.. ;)

Anónimo

GuiShop! , creo que te refieres a esto:

http://elescaparatederosa.blogspot.com/2007/03/iconos-de-navegacin.html

Anónimo

exelente rosa! muchisimas gracias ;)

ELPLANETADELCELULAR

gracias rosa no se que seria de mi blog sin el tuyo,todo me es de gran utilida

pasa por mi blog y mira el enlace que puse del tuyo

graciasssssss
http://elplanetadelcelular.blogspot.com

ELPLANETADELCELULAR

rosa como hago para subir la foto a internet por que la abro pero me pone el nombre de mis documentos o algo asi como la subo????

http://elplanetadelcelular.blogspot.com

Anónimo

EL PLANETA, mira aquí:
http://elescaparatederosa.blogspot.com/2008/10/usando-la-url-correcta-en-imageshack.html

ELPLANETADELCELULAR

gracias rosa por la info pero apenas deje el comentario me di cuenta que en la entrada decia una pagina de la foto de cabreada y la saque de hay soy el primo de facundo(el dueño de elplantadelcelular)
mi primo solo tiene 13 años y aveces no entiende algunas cosas

vean su pagina:
http://elplanetadelcelular.blogspot.com

o su perfil

Anónimo

EL PLANETA, tranquilo no pasa nada, puede preguntar las veces que necesite.:-)

Ruahidy Lombert

Hola puedes chequear mi blog http://ruahidylombert.blogspot.com/. Todavia lo trabajo.

Unknown

Rosa, cómo puedo poner una imagen de este tipo:
http://img36.imageshack.us/img36/523/printx.gif como link para que un usuario pueda imprimira la página? Ya vi tu ayuda en http://elescaparatederosa.blogspot.com/2007/02/imprimir-pgina.html pero no lo encontré, saludos :)

Anónimo

Jared No entiendo bien...si es sustituir el texto del enlace "Imprimir página" por esa imagen, lo único que has de hacer es eso, eliminar el texto y en su lugar colocar la llamada a la imagen:

<img src="http://img36.imageshack.us/img36/523/printx.gif "/>

Sabri Aides

Hola Rosa, como hago si esa imagen del link quiero que quede mas pequeña ? hay alguna forma de incluir esa orden en el codigo que pasaste?
desde ya gracias!
Sabrina

Anónimo

Sabrina Aides Lo más lógico sería usar una imagen al tamaño que quieres.
Aunque también puedes condicionar en el código el alto y ancho de la imagen:
<a href="URL_DE_WEB"><img src="URL_DE_IMAGEN&quot width="50px" height="50px";></a>

Sabri Aides

Gracias Rosa por tu respuesta. Y una pregunta mas, espero que no te moleste. Quisiera alinear la imagen a la derecha o centrada (actualmente me aparece a la izquierda). Como pongo este código? gracias!!

Anónimo

Sabrina Aides "Mete" el código en un div, así:

<div style="text-align: center;>
aqui el código
<div>

Así irá al centro, para la derecha cambia center por right

Evangelina

Hola Rosa, quisiera saber cómo insertar una imagen con link externo, pero que abra en otra pestaña o ventana. Probé de varias formas, pero aún no lo he logrado. Mi blog es: http://conserlenguaje.blogspot.com
Gracias de antemano ;)

Anónimo

Evangelina Es justo lo que esta entrada explica :o

Anónimo

hola le escribia si me podia ayudar con eso del blogger....es para mi mama pero no entinedo

este e smi correo clarinasolyluna@hotmail.com
mellamo sachiko soy de japon hasta luego y gracias

Ariel Mode

hola rosa mira tengo un problema que puse unos link con imagenes pero, lo malo que me salen con un fondo negro al pasar el raton hay posibilidad de quitar ese efecto, me serviria muchisimo si se puede hacer gracias de ante mano saludos

CMYK Diseño Grafico y Publicidad

:D me encanto es muy sencillo

Anónimo

rosa ami me pasa lo mismo que a andres me sale u cuadro y no me abre la imagen

Anónimo

rosa ya lo logre estaba cogienod mal el url de la imagen gracias

goles y mujeres

gracias ,pero como lo puedo colocar link a las fotos de mis entradas? por fa ayuda gracias

Rosa

mujeres woman Cuando subes la imagen a la entrada si pinchas en la pestaña HTML del editor ves ahí su código... hay una url en el a herf= del código, borra esa url y coloca la que quieras para esa imagen.

waio

Hola rosa, queria saber en que parte del xml ingreso el codigo para linkear la imagen. Muchas Gracias!

Anónimo

waio Pues en un gadget HTML/Javascript por ejemplo...

Anónimo

Hola Rosa
Gracias por tu informaciòn en serio que la necesitaba..
me sirvio mucho.. solo tengo una pregunta.quiero utilizar varias imagenes con link pero al utilizar tu còdigo me salen con un espacio entre cada imagen.. quisiera saber si hay otra forma para que me salgan una despuies de la otra y que salgan unidas pero con diferente enlaces,, algo asi como un menu de imagenes.. mil gracias

saludos

Anónimo

Haru Tendrías que clocar el código de todas seguido, como si todo fuese una misma línea.

Massiel Eugenia Cascante Villagra

Ayuda tengo problemas quiero enlazar varias imagenes con links distintos y no puedo... Me podrias dar algun consejo?

Anónimo

MEC1992 Es exactamente esto que explico aquí, para cada imagen este código con sus urls correspondiente.

Supernovas

Hola de nuevo Rosa, ¿que seria de mi blog sin ti???
Veras, tengo un problema y no sé como puedo solucionarlo.
En el blog tengo el truco de "impedir guardar imagen". En alguna ocasion, cuando he querido que alguien pudiera ver una imagen he creado un enlace pero con letras, es decir, poniendo "pincha aqui", pero en esta ocasion quiero hacerlo con las imagenes. Al pinchar con el boton izquierdo no se abren y me gustaria que se pudiera. Lo que he hecho ha sido subir la imagen a otro blog de pruebas y crear un enlace con la imagen. Hasta aqui todo ha ido bien, pero el problema viene porque quiero hacer dos enlaces con dos imagenes y no me deja, siempre aparece el ultimo enlace.
Enntonces, mi pregunta es... ¿no se puede crear varios enlaces con varias imagenes?? Si pudieras ayudarme...

Anónimo

Supernovas No entiendo demasiado bien que quieres decir... pero si son dos imágenes con un enlace cada una lo harías tal como aquí:
<a href="URL_DE_WEB" target="_blank"><img src="URL_DE_IMAGEN"></a>

Eso para una imagen y lo mismo para la otra...

Supernovas

ah!! creo que lo he solucionado. Es que estaba haciendolo a traves de enlaces con la imagen, que otras veces lo he hecho, pero con dos imagenes no me dejaba.
Muchas gracias!!

Trast-Ascrasi

Muchas gracias Rosa, tus explicaciones son para mí de gran ayuda y utilidad.
Besotes!
Trast
http://trasteando-trasteando.blogspot.com/

D4R3

muchas gracias

Yarabaya

saludos Rosa, tengo un problema con lo de insertar imágenes en las entradas , cada vez que inserto una imagen me aparece enmarcada y con un fondo blanco, como puedo hacer para poder subir imágenes tal cual , o gifs de fondo transparente sin que me tenga que salir este marco. http://arequipatradicional.blogspot.com/

gracias de antemano

Anónimo

Yarabaya Localiza esto en tu plantilla:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {

Y elimina la etiqueta del comienzo:
.post-body img,

Usa Vista previa antes de guardar para ver si ya no está el borde...

Yarabaya

Muchísimas gracias rosa saludos de Perú

Christroad

:D Graicas Rosa muy sencillo pero SUPER UTIL, Muchisimas gracias ese detalle es super original.

BENDICIONES

atte: Christian (Christroad)

Anónimo

Hola Rosa, tengo un sitio de fondos para escritorio, y me gustaría que cuando hagan clic sobre las imágenes; estas abran en una nueva pestaña.
Y me gustaría que me ayudaras en esto.

http://backgroundultimate.blogspot.com

Anónimo

BackgroundUltimate Cuando subes una imagen desde el editor de Blogger a una entrada, el código resultante es algo así:
<a href="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TR2uLRayETI/AAAAAAAAIfE/qc3ORzUROw4/s1600/Dibujo.JPG" target="_blank" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="200" width="174" src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/TR2uLRayETI/AAAAAAAAIfE/qc3ORzUROw4/s200/Dibujo.JPG" /></a>

Fíjate en negrita que he marcado lo que tienes que poner, donde y como, para que se abra en pestaña nueva...

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S