Blog and Web

  • Inicio
  • Foro
  • Nosotros
  • Publicidad
  • Plantillas Blogger
  • Categorias
    • Adsense
    • Blogandweb
    • Blogger
    • Blogs
    • CSS
    • Diseño
      • Fuentes
      • Iconos
      • Logos
    • Dominios
    • Geek
    • HTML
    • Javascript
    • México
    • Notas rápidas
    • Photoshop
      • Brushes
    • PHP
    • Plantillas Blogger
    • Productos Google
      • Firefox
    • Recursos en linea
    • Red
    • SEO
    • Software
    • Tutoriales
    • Uncategorized
    • Web 2.0
    • Widgets para Blogger
    • Wordpress
      • Plugins
      • Themes
  • Suscríbete vía RSS
« Plantilla Blogy-Tierra
Plantilla Blogy-Lindodía »

Dar estilo a los links visitados con CSS

Mayo 27th, 2007  |  Publicado por Francisco en CSS  |  4 Comentarios

Como muchos saben, mediante CSS es posible manejar la apariencia de los links, ya sean activos, al pasar el mouse encima y los visitados. Y en este artículo te mostraremos algunas opciones de estilos para los links ya visitados en nuestro sitio y de este modo ayudar a nuestro usuarios a diferenciar lo que ya vio de lo que no.

Efecto: Tachado
Ejemplo: Link visitado
Código:

a:visited {
text-decoration: line-through;
}

Es un efecto sencillo pero efetivo.

Efecto: Subrayado personalizado
Ejemplo: Link visitado
Código:

a:visited {
border-bottom: 1px dotted #6c6c6c;
text-decoration: none;
}

Sencillo y personalizable.

Efecto: Icono lateral
Código:

a:visited {
padding-right: 12px;
background: url(http://bp0.blogger.com/_Zuzii37VUO4/RliVkJya0kI/AAAAAAAABks/zwQFwD937-g/s1600/icono-visitado.gif) no-repeat 100% 50%;
}

Es una forma más gráfica y muy personalisable.

Efecto: Texto indicativo.
Ejemplo: Link visitado YA VISITADO
Código:

a:visited:after {
content: " (YA VISITADO)";
font-size: 60%;
text-transform: uppercase;
color: #777;
}

Este método usa pseudoelementos, por lo que no funciona en las versiónes anteriores de IE7.

Son métodos faciles de utilizar y muchas veces muy utiles.

Encuentra más sobre esto en maratz

Artículos relacionados

  • Los mejores diseños ‘revista’ para Wordpress
  • En Theme Playgound han realizado una recopilación de 10 de los mejores...

  • Brushes estilo web 2.0
  • Este es un paquete de 8 brushes para crear elementos estilo web...

  • Quitar el borde punteado a los links cuando se les da click
  • Automaticamente todos los links de imagen y texto cuando se da click...

Respuestas

Feed | Dirección de Trackback
  1. Nachio...:

    Mayo 27th, 2007 a las 1:53 am (#)

    Si, pero te has olvidado donde colocar al código!

  2. Francisco:

    Mayo 27th, 2007 a las 3:09 am (#)

    Lo que pasa es que este código no es sólo para Blogger, sino para cualquier sitio o blog. Va en la hoja de estilos y en el caso de blogger, sobre

    ]]></b:skin>

    Igualmente gracias por el apunte.

  3. SpamLoco:

    Mayo 27th, 2007 a las 4:42 am (#)

    En Blogger de todas formas siempre exíste la posibilidad de diferenciar con colores los links visitas y los que no.

  4. Francisco:

    Mayo 27th, 2007 a las 5:03 am (#)

    Claro, es la forma más usual y es efectiva, están son algunas unas opciones más ;)

Deja tu comentario

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios no estén fuera tema, no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán eliminados. Recuerda que puedes usar nuestro foro para otros temas y preguntas.

Blogger templates, layouts, themes, plantillas Ser Turista Foros del Blog Web a 2.0

Categorías

  • Adsense
  • Blogandweb
  • Blogger
  • Blogs
  • Brushes
  • CSS
  • Diseño
  • Dominios
  • Firefox
  • Fuentes
  • Geek
  • HTML
  • Iconos
  • Javascript
  • Logos
  • México
  • Notas rápidas
  • Photoshop
  • PHP
  • Plantillas Blogger
  • Plugins
  • Productos Google
  • Recursos en linea
  • Red
  • SEO
  • Software
  • Themes
  • Tutoriales
  • Uncategorized
  • Web 2.0
  • Widgets para Blogger
  • Wordpress

¿Porqué tienes un blog?

Ver resultados

Loading ... Loading ...

Patrocinadores

  • Anúnciate aquí
  • ¿Quieres aprender sobre casinos?
  • Foros del Blog
  • Web a 2.0
  • BTemplates
  • Ser Turista
  • Blog ingeniería

Blogroll

  • Infected-FX
  • Blogmundi
  • Adseok
  • Zona Cerebral
  • Sigt
  • Loogic
  • Blog en serio
  • Isopixel
  • Vecindad Gráfica

Entradas Recientes

  • Videos del Congreso de WebMasters 2007 en España
  • Recomendaciones de Hosting de expertos
  • Vida más allá de Blogger: Bligoo
  • Ventajas y desventajas
  • Guía de desarrollo de sitios web v2.0 del gobierno chileno

Comentarios Recientes

  • CHucky en Reacciones, nuevo sistema de votación de entradas en Blogger
  • Diego en Domize, buscador de dominios instantáneo
  • juanjo en Vida más allá de Blogger: Bligoo
  • coy en 10 Cosas que debes hacer después de abrir un blog en Blogger
  • Francisco en Recomendaciones de Hosting de expertos

Archivos

  • Agosto 2008
  • Julio 2008
  • Junio 2008
  • Mayo 2008
  • Abril 2008
  • Marzo 2008
  • Febrero 2008
  • Enero 2008
  • Diciembre 2007
  • Noviembre 2007
  • Octubre 2007
  • Septiembre 2007
  • Agosto 2007
  • Julio 2007
  • Junio 2007
  • Mayo 2007
  • Abril 2007
  • Marzo 2007
  • Febrero 2007

©2008 Blog and Web - Bajo WordPress. Diseño basado en grindlite.
Condiciones de uso | Política de privacidad