Como Destacar los enlaces visitados en los posts

Hace tiempo que usaba este sistema de pequeños iconos en el Escaparate para señalar los enlaces de las entradas que ya habían sido visitados, hoy he vuelto a incluirlo.

Los enlaces solo en el cuerpo de las entradas (post-body) se verán resaltados como muestra la imagen:

Como veis, para el enlace normal (a la vista) no añadiremos ningún código, con lo que mostrará el mismo aspecto que los demás enlaces del blog.
Una vez que alguien haya visitado ese enlace y vuelva después a esa entrada, el enlace se mostrará con un pequeño icono de color gris que avisa de que ya hemos pinchado antes en ese enlace.
Si aún así, pasamos el ratón sobre ese enlace, el icono gris cambiará a uno de color rojo para "reforzar" el aviso.
Por supuesto podéis usar otros iconos distintos a estos, cambiando la url en el código por la de vuestras imágenes.

Y este es el código para los enlaces, que colocaremos en el CSS (antes de ]]></b:skin>) de nuestra plantilla:

/* Posts links
----------------*/
.post-body a:visited {
color:#006699;
padding-right: 13px;
background: url(http://i33.photobucket.com/albums/d100/manas_tripathy/visitedLink.gif) no-repeat 100% 50%;
}
.post-body a:visited:hover {
background: url(http://i33.photobucket.com/albums/d100/manas_tripathy/visitedHoverLink.gif) no-repeat 100% 50%;
padding-right: 13px;
color:#4192e5;
}

color:#006699; Color del enlace visitado.
color:#4192e5; Color del enlace al paso del ratón.
padding-right: 13px; Distancia para dejar espacio al icono (el ancho del icono en pixeles).

Compartir Enlace