Poner icono en los enlaces visitados

29 de diciembre de 2009 46 comentarios ,
AVISO
Los navegadores modernos ya no reconocen estos estilos, tales como dejar un color de fondo, una imagen, etc. en los enlaces visitados, a fin de proteger la privacidad de los usuarios y evitar que cualquier otra persona pueda saber el historial de enlaces a los que el usuario ha ingresado.

Hace algunas semanas vimos cómo poner una imagen animada debajo de los enlaces, ahora haremos algo parecido en los enlaces que ya han sido visitados.
Esta vez vamos a poner un pequeño ícono que aparecerá junto al enlace una vez que el usuario haga click sobre él. Esto es para que el lector pueda identificar más fácil qué vínculos ya ha visitado.
Para ver un ejemplo haz clik en el siguiente enlace y vuelve a esta entrada para ver el cambio:


Enlace


Para darle esta decoración a los enlaces visitados de tu blog entra en Diseño > Edición de HTML y busca esta línea:
a:visited {

Debajo de ella agrega lo siguiente:
text-decoration:none;
background:url(http://1.bp.blogspot.com/_dsEG33PDaHw/TJvlU3oI_nI/AAAAAAAAAXw/7NJcZedCz7E/s1600/check.gif) no-repeat 100% 50%;
padding-right:18px;


Puedes cambiar de ícono si lo deseas, sólo sustituye la URL de la imagen. También puedes controlar la distancia del ícono respecto al texto, eso se controla en padding-right:18px;

Es una modificación muy sencilla que hará que tus links visitados se vean más atractivos y más fáciles de distinguir por tus lectores.


46 comentarios en:

" Poner icono en los enlaces visitados "

  1. Muchas gracias por todo y Feliz Año Nuevo.

    ResponderEliminar
  2. Gracias a ti por tu visita.
    Que tengas un exitoso y feliz año nuevo!
    Saludos!

    ResponderEliminar
  3. Interesante, y elegante.

    Aprovecho para desearte felices fiestas y un feliz año nuevo.

    ResponderEliminar
  4. Ciertamente lo es.
    Muchas gracias e igualmente te deseo un feliz año nuevo.
    Saludos!

    ResponderEliminar
  5. POR LA PAZ EN EL MUNDO FELICIDADES

    ResponderEliminar
  6. Muy buen efecto, muy bueno
    la verdad me gusto lo vi con Rosa, pero no me llamo la atencion del todo
    pero aqui contigo si, como que estoy pensando en colocarlo
    no lo se
    pero ya vere
    ok
    de todos modos GRACIAS
    y feliz año Nuevo ok que se cumplan todos tus deseos

    ResponderEliminar
  7. Muy bueno, muy bueno.
    Seguro k algun dia lo usare, ya vere en que.
    Pero igual esta muy bueno.
    Saludos , cuidate y un Feliz 2010.

    ResponderEliminar
  8. Hola el potro muy buen truco me gusto seguro que lo utilizare muy pronto en mi blog tengo una duda sobre como alojar los scripts en algun servidor recuerdo que una vez lo explicaste pero no encuentro el post

    ResponderEliminar
  9. Hola Clan Russo
    Te contesto por el Potro
    Digo si te parece
    aqui esta el post
    yo igual te lo recomiendo mucho lo uso y sale muy bien
    aqui te dise paso a paso que hacer
    http://ciudadblogger.com/2009/04/alojamiento-de-archivos-gratis.html

    ResponderEliminar
  10. hola . . . mi maestro preferido!!!
    pase a dejarte mi cariño, que tengas un bello comienzo de año, y que fundamentalmente no pierdas tu enorme luz, y tu gran generosidad.-
    Muchos cariños!!!!

    ResponderEliminar
  11. PepeX, igualmente, feliz año nuevo!

    Clan Russo, eso mismo que te ha explicado Alex :)

    Alex, igualmente deseo tengas un feliz año nuevo, por cierto que ayer caí, jaja.

    Anne, muchas gracias preciosa, mis mejores deseos para ti y los tuyos. Besos!

    ResponderEliminar
  12. Muy bueno.
    Te deeseo un feliz año nuevo.
    Gracias por todos los trucos que nos has regalado a lo largo de este 2009 y espero que el 2010 sea un año igual o mejor.
    Saluods.

    ResponderEliminar
  13. Me parece muy buenoo!!
    exelente si son muchos links parecidos porque uno aveces se pierde :)


    Saludos

    ResponderEliminar
  14. bernardo28, qué bueno que te gustó. Saludos!

    El Venado, muchas gracias, igualmente te deseo un año nuevo lleno de éxitos. Saludos!

    Mathias, como bien dices, a los blogs con muchos links les viene muy bien. Saludos!

    ResponderEliminar
  15. Tu página s genial.
    Me ha ayudado muchísimo para mejorar mi blog.
    Pero tengo un problema con un post antiguo.
    Ya coloque el comentario en el.
    Es el post de entradas estaticas. Este:
    http://ciudadblogger.com/2009/05/paginas-estaticas-y-ocultar-entradas.html


    Podrías si no es mucha molestia pasarte a checarlo :S
    Gracias.

    ResponderEliminar
  16. Hola G.L.L,

    Ya he respondido ahí a tu comentario.
    Saludos.

    ResponderEliminar
  17. holaa (A) jaja

    queria hacerte una pregunta, como veras confio mucho en tu buen gusto y se me ocurrio una idea con lo de los segudores y el tema de que no aparecen con el tema del script que no recuerdo el nombre

    bueno, mi idea es colocar dos imagenes, una de los seguidores que contiene actualmente "x" blog y la otra imagen que sea del boton seguir enlazada hacia el id del blog "http://www.blogger.com/follow-blog.g?blogID=2963011918216595839"

    cosa que sea una especie de simulacion bien real de los seguidores :P, no se que opinaras de mi idea, ya que firefox lleva varias actualizaciones y sigue sin solucionar el problema

    bueno espero que entiendas mi idea y feliz año nuevoo

    ResponderEliminar
  18. Hola Ezequiel,

    Cuando vimos el post de la solución y alternativa a la lista de seguidores hubo quienes hicieron algo similar, es decir, hicieron una captura de su lista de seguidores y la usaron como enlace.
    Supongo que también se podría hacer un poco más elaborado como mencionas, incluyendo un botón que lleve al enlace; podrías hacer las pruebas para ver si queda.
    Yo por mi parte ya me resigné a que no se vea y tampoco veo mucho interés de Blogger por solucionarlo, ya que no es sólo en Firefox, sucede con todos los navegadores.

    Ni hablar, mientras Blogger no se decida tendremos que seguir ideando alternativas como la tuya.

    Feliz año nuevo igualmente!!!

    ResponderEliminar
  19. graciias me funciono , disculpame que te pregunte ! .. pero osea no tiene nada qe ver con el tema este , pero quiero preguntarte algo , como hago para descargar el photoshop intente de todas maneras y no pude lo necesito para mi trabajo o algun programa similar al photoshop que sea Bueno porque lo necesito para mi laburo en una campana publicitaria , desde ya si pudieras ayudarme te lo Agradesco!

    Saludos Cordiales

    Atte: Bernal Oeste

    ResponderEliminar
  20. Hola Bernal Oeste,

    No sabría decirte, yo el mío lo compré desde la página de Adobe. Hay una aplicación de Photoshop online que es gratuita sólo que al ser online es muy limitada en las funciones, no estaría mal que te dieras una vuelta para ver si te funciona.
    http://pixlr.com/editor/

    Saludos!

    ResponderEliminar
  21. Muy buen blog, si tienes tiempo mira mi blog de humor http://choucaskeylofer.blogspot.com/ gracias me interesa tu opinion

    ResponderEliminar
  22. no hice mas q ponerlo y ahora todo me sale con el checkmark verde xD no hay una parte del blog q no haya recorrido aigoo jaja ia me volvi fan xDD

    ResponderEliminar
  23. David, muy buen humor, me encantó el video de Bisbal, jaja, saludos y éxito!

    Ram-Z Phantomhive Doll, cuando limpies los cookies de tu navegador desaparecerán ;)

    ResponderEliminar
  24. Wow bro... que interesante, la verdad que nunca lo había visto. Espero hayas pasado buenas fiestas!

    Un abrazo!!!

    ResponderEliminar
  25. Gracias brother, feliz inicio de año!
    Un abrazo!

    ResponderEliminar
  26. Ahorita la versión CS4 está en US $699.00, si ya tienes una versión anterior la actualización está en US $199.00

    Saludos.

    ResponderEliminar
  27. No me funcionó... ¿Me ayudas?
    Me serviría porque tengo estudiantes de informática básica.

    :(

    http://profejuanc.blogspot.com/

    ResponderEliminar
  28. En tu plantilla no tienes esa línea que menciono pero puedes ponerla debajo de a:hover { text-decoration:underline }
    Agrega la línea que menciono en esta entrada así como el segundo código donde se indica.

    Saludos.

    ResponderEliminar
  29. se puede cambiar el color del icono garcias

    ResponderEliminar
  30. Es una imagen, tendrías que editarla para cambiarla de color.

    ResponderEliminar
  31. Hola Potro
    Una duda q tengo hace tiempo, como pongo enlace en las imagenes ??
    Grax
    Saludos...

    ResponderEliminar
  32. Con este código:
    <a href="URL del enlace"><img src="URL de la imagen" /></a>

    Sólo cambia la URL del enlace y la URL de la imagen.
    ¡Saludos!

    ResponderEliminar
  33. grax...va perfecto con mi nuevo blog de música

    ResponderEliminar
  34. Yo habia agregado este truco, Funciona muy bien pero me aparecen varias palomitas verdes en los post cuando visito 1 enlace (se marca la foto, el enlace y el titulo del post a la misma vez), y se ve un poquito mal, habra manera de evitar que al visitar 1 link se marquen tres cosas a la vez ???

    ResponderEliminar
  35. Hola potro buen script
    Ayuda porfa..pasa que lo quiero añadir solo a ciertos enlaces de las entradas como en esta ▼
    http://ecua-sagas.blogspot.com/2011/09/muteki-kanban-musume-x-mediafire-y.html
    que el script aparesca solo en la lista de enlaces
    Gracias de Antemano :D

    ResponderEliminar
  36. Hola L,

    Este no es un script sino un código CSS.
    Si quieres que haga efecto sólo en una parte específica, en este caso, esa lista, necesitas ponerle una clase a cada enlace, por ejemplo:

    <a class="nombre" href="URL del enlace">

    Luego, en la parte de los estilos pondrías esto:

    .nombre a:visited {
    text-decoration:none;
    background:url(http://1.bp.blogspot.com/_dsEG33PDaHw/TJvlU3oI_nI/AAAAAAAAAXw/7NJcZedCz7E/s1600/check.gif) no-repeat 100% 50%;
    padding-right:18px;
    }

    Donde dice nombre puedes ponerle otra palabra, la que desees.

    ResponderEliminar
  37. Como siempre Potro... muchas gracias Gracias!
    ya ahora le añado el css

    ResponderEliminar
  38. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  39. Hola potro, disculpa, como hago para colocar este efecto del icono en una sola página, no quisiera que apareciera en todos los enlaces de mi Blog por que dañaría la estética o no se le daría una imagen de no muy seria, me gustaría adherir este efecto solo en una página que tengo como para mostrar el Mapa del Sitio... me entiendes verdad?

    Te lo agradezco!!!... ;)

    ResponderEliminar
    Respuestas
    1. A proposito!...
      No pude ver el efecto del icono en esta entrada por que no está funcionando, no se si debas revisarlo y corregir algo o es mi navegador (Chrome)! de todas maneras gracias por adelantado!... Bay!..

      Eliminar
    2. Hola Joan, usa una condicional antes de </head> para que sólo se apliquen a la página que quieres:

      <b:if cond='data:blog.url == &quot;URL de la entrada&quot;'>
      <style>
      ...Aquí los estilos...
      </style>
      </b:if>


      Saludos.

      Eliminar
    3. Por cierto, lo olvidaba. Aquí ya no se ve el ejemplo (y quizá ya no funcione en los blogs) porque los navegadores ahora por proteger la privacidad de los usuarios no reconocen este tipo de estilos, es para que los demás no puedan saber qué enlaces has visitado. He olvidado actualizar la entrada pero siempre lo olvido, ahora mismo lo haré :)
      Saludos.

      Eliminar
  40. Uppsss.... Ok.....!

    Entonces creo que mejor no pondré este efecto, pero sabes que me resolviste otra duda con lo de las condicionales en las páginas se me ocurre otra idea con eso!...

    Amigazooo gracias! suerte y éxitos con tu fabuloso Blog...

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger