 |
| Foto cortesía de Acens |
Hay a quien le gusta personalizar los enlaces del blog, bien que aparezca un subrayado, que cambie el color o el tamaño al pasar el cursor del mouse o añadirle sombra. Sea como fuere, con este truco cambiar los atributos de los enlaces es coser y cantar.
Primero hay que tener en cuenta lo que nos ofrece Blogger en la plantilla.
a:link el modo como se ven todos los links de la página antes de hacer click en ellos.
a:visited la apariencia de los links después de hacer click en ellos.
a:hover el efecto que da al pasar el mouse sobre un link.
Tras cada una de estas líneas aparecerán los atributos (color, tamaño, letra...). Para modificarlos y crear diversos efectos, hay que proceder a añadirlos debajo de cada línea que nos interese cambiar:
underline: muestra el subrayado.
none: quita el subrayado.
blink: link parpadeante (no funciona en Internet Explorer ni Google Chrome).
font-weight:bold; hará que el link se vea en negrita.
font-style:italic; hará que el link se vea en cursiva.
font-size:16px; cambiará el tamaño del texto del link.
background:#fe6700; cambiará el fondo aotro color (modificable cambiando el código en rojo)
background-image:url(LINK IMAGEN); mostrará una imagen en el link.
Un ejemplo:
a:link {
color:#FC8D40;
text-decoration:none;
}
a:visited {
color:#FFF9E7;
text-decoration:blink;
}
a:hover {
color:#1C94B9;
text-decoration:none;
font-weight:bold;
font-style:italic;
background-image:url(https://lh4.googleusercontent.com/-f08e4RgGe2o/UElCugaAILI/AAAAAAAABys/Uf2GQTOcf54/s25/comillas.png);
}
color:#FC8D40;
text-decoration:none;
}
a:visited {
color:#FFF9E7;
text-decoration:blink;
}
a:hover {
color:#1C94B9;
text-decoration:none;
font-weight:bold;
font-style:italic;
background-image:url(https://lh4.googleusercontent.com/-f08e4RgGe2o/UElCugaAILI/AAAAAAAABys/Uf2GQTOcf54/s25/comillas.png);
}
