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:
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEkQYkU9feJTf9Rkeaq125bSQEYqGxtQQdLvIgFOnlIy3aDIBHm_E6FTWNQfatAd3S0u94uP7_Tjf2GGd9OhJObGOzaaXDy1pvUoLv6n08d_yuQasgKX-bz3dsSuLiYY48IpXxhEz48BoZ/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.
Ciudad Blogger
Muchas gracias por todo y Feliz Año Nuevo.
ResponderEliminarGracias a ti por tu visita.
ResponderEliminarQue tengas un exitoso y feliz año nuevo!
Saludos!
Interesante, y elegante.
ResponderEliminarAprovecho para desearte felices fiestas y un feliz año nuevo.
Ciertamente lo es.
ResponderEliminarMuchas gracias e igualmente te deseo un feliz año nuevo.
Saludos!
POR LA PAZ EN EL MUNDO FELICIDADES
ResponderEliminar¡Feliz año nuevo Vku!
ResponderEliminarMuy buen efecto, muy bueno
ResponderEliminarla 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
Muy bueno, muy bueno.
ResponderEliminarSeguro k algun dia lo usare, ya vere en que.
Pero igual esta muy bueno.
Saludos , cuidate y un Feliz 2010.
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
ResponderEliminarHola Clan Russo
ResponderEliminarTe 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
hola . . . mi maestro preferido!!!
ResponderEliminarpase 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!!!!
PepeX, igualmente, feliz año nuevo!
ResponderEliminarClan 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!
holq
ResponderEliminarbuena entrada
Muy bueno.
ResponderEliminarTe 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.
Me parece muy buenoo!!
ResponderEliminarexelente si son muchos links parecidos porque uno aveces se pierde :)
Saludos
bernardo28, qué bueno que te gustó. Saludos!
ResponderEliminarEl 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!
Tu página s genial.
ResponderEliminarMe 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.
Hola G.L.L,
ResponderEliminarYa he respondido ahí a tu comentario.
Saludos.
holaa (A) jaja
ResponderEliminarqueria 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
Hola Ezequiel,
ResponderEliminarCuando 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!!!
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!
ResponderEliminarSaludos Cordiales
Atte: Bernal Oeste
Hola Bernal Oeste,
ResponderEliminarNo 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!
Muy buen blog, si tienes tiempo mira mi blog de humor http://choucaskeylofer.blogspot.com/ gracias me interesa tu opinion
ResponderEliminarno 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
ResponderEliminarDavid, muy buen humor, me encantó el video de Bisbal, jaja, saludos y éxito!
ResponderEliminarRam-Z Phantomhive Doll, cuando limpies los cookies de tu navegador desaparecerán ;)
Wow bro... que interesante, la verdad que nunca lo había visto. Espero hayas pasado buenas fiestas!
ResponderEliminarUn abrazo!!!
Gracias brother, feliz inicio de año!
ResponderEliminarUn abrazo!
aa OK MUCHAS GRACIAS , y una pregunta cuanto te sale comprarlo por adobe?
ResponderEliminarAhorita la versión CS4 está en US $699.00, si ya tienes una versión anterior la actualización está en US $199.00
ResponderEliminarSaludos.
No me funcionó... ¿Me ayudas?
ResponderEliminarMe serviría porque tengo estudiantes de informática básica.
:(
http://profejuanc.blogspot.com/
En tu plantilla no tienes esa línea que menciono pero puedes ponerla debajo de a:hover { text-decoration:underline }
ResponderEliminarAgrega la línea que menciono en esta entrada así como el segundo código donde se indica.
Saludos.
se puede cambiar el color del icono garcias
ResponderEliminarEs una imagen, tendrías que editarla para cambiarla de color.
ResponderEliminarHola Potro
ResponderEliminarUna duda q tengo hace tiempo, como pongo enlace en las imagenes ??
Grax
Saludos...
Con este código:
ResponderEliminar<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!
grax...va perfecto con mi nuevo blog de música
ResponderEliminarYo 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 ???
ResponderEliminarHola potro buen script
ResponderEliminarAyuda 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
Hola L,
ResponderEliminarEste 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.
Como siempre Potro... muchas gracias Gracias!
ResponderEliminarya ahora le añado el css
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola 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?
ResponderEliminarTe lo agradezco!!!... ;)
A proposito!...
EliminarNo 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!..
Hola Joan, usa una condicional antes de </head> para que sólo se apliquen a la página que quieres:
Eliminar<b:if cond='data:blog.url == "URL de la entrada"'>
<style>
...Aquí los estilos...
</style>
</b:if>
Saludos.
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é :)
EliminarSaludos.
Uppsss.... Ok.....!
ResponderEliminarEntonces 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...