Personalizar enlaces en Blogger

En el siguiente tutorial enseñaré a personalizar mediante CSS los enlaces del blog. Para ello debemos conocer cual es la sintáxis para generar un enlace:

<a href='http://blog.blogspot.com/fecha/mes/post.html'>Nombre enlace</a>

Como puedes apreciar, el valor </a> es el designado para los enlaces (Links).

Tienes que saber también que necesitas modificar 3 patrones:

• a:link (Corresponde al enlace en sí).
• a:visited (Corresponde al enlace visitado).
• a:hover (Corresponde al enlace resaltado con el cursor).

Sabiendo esto podemos proseguir a darles formato y estilos a los enlaces. Para que no sea complicado familiarizarse con CSS he hecho los patrones correspondientes a los 3:

a:link { /* Enlace normal */
color:#306070; /* Color de los enlaces*/
text-decoration:none; /* Sin decoración*/
}

a:visited { /* Enlace Visitado*/
color: #306070; /* Color de los enlaces visitados*/
}

a:hover {/* Enlace resaltado */
color: #306070; /* Color de los enlaces resaltados*/
text-decoration:underline; /* Decoración de subrayado*/
}

Nota: Las descripciones entre /* y */  son comentarios que no afectan en lo absoluto los estilos.

Vamos a explicar los valores:

• El atributo color permite añadir un color personalizado al enlace.
• El atributo text-decoration permite elegir la decoración del enlace. Como puedes apreciar en el enlace normal la decoración está en none (No decoration), mientras que el enlace resaltado está con underline (Subrayado).

Una vez listo el código, lo pegaremos antes de la siguiente línea en la plantilla:

]]></b:skin>

Importante:

• Si los 3 patrones ya existen en la plantilla (Es decir a:link, a:visited, a:hover), deberás eliminarlos o de lo contrario serán redundantes y no habrán cambios.
• Los colores están en formato hexadecimal, si necesitas una lista con colores en este formato te invito a utilizar la herramienta Colores Web.