Modifier l'apparence des liens dans blogger

Un petit tuto pour modifier l'apparence des liens grâce au css. Voyons d'abord comment ils s'écrivent dans notre feuille de style (css).

a:link {
color: #6699cc;
}

a:visited {
color: #ff7722;
}

a:hover {
color: #5B739C;
}

a:active {
color: #5B739C;
text-decoration: none;
}

a.aide-blogger {
margin-top: -5px;
Background-color: #880022;
color: #ffffff;}


Détaillons un peu, je vous ai déjà parlé (ICI) de classe de style séparées de la balise à laquelle elle s'applique par un point (c'est le cas à la fin de mon exemple de .aide-blogger). Nous allons parler dans le cas de la manipulation des liens de pseudo classe. Pour manipuler les liens (dont la balise html est: a) on utilise 4 pseudo classes:

- :link , c'est l'état du lien "au repos" tel qu'il apparaît dans le texte (par défaut texte bleu, souligné)

- :visited , c'est l'apparence du lien déjà visité (par défaut sur les navigateurs, texte violet, souligné)

- :hover , c'est l'aspect du lien au "survol" de la souris. C'est celui qui intéresse le plus les bidouilleurs de code cela donne un aspect dynamique à la page et agrémente la navigation.

- : active , moins manipulé c'est l'aspect du lien quand celui ci est prêt à être activé (pour mieux comprendre naviguez sur cette page avec la touche tab, tabulation).

Les principaux attributs (c'est à dire ce qui est entre les accolades) de a, sont:

• font-family: sans-serif, arial; (par exemple).


• text-decoration: underline; (texte souligné, mettez none si vous ne souhaitez pas le souligner)


• text-color: #ff0000; (pour afficher en rouge par exemple)


• border: solid 1px red; (pour encadré le lien d'une bordure rouge d'1 pixel)


• padding: 5px; (le padding c'est le décalage entre le contenu (ici le texte) et la bordure)


• background-color: #ff0000; (couleur de fond du texte du lien)

Voilà pour les principaux attributs qui me vennent à l'esprit, en cherchant un peu vous trouverez surement d'autres "effets" et attributs utiles pour obtenir un rendu "clean". Pensez à une chose, les débutants web pourraient être dérouté par des effets trop travaillés. prenez exemple sur les liens dans votre panneau de configuration, blogger n'a pas fait d'effet de style superflus.

allez voici un petit exemple commenté de ce que pourrait être un codage du style de vos liens:

a:link {
text-color: #6699cc; /*couleur ton de bleu*/
text-decoration: none; /*le lien ne sera pas souligné*/
}

a:visited {
color: #ff7722; /*une couleur orange pour le lien visité*/
}

a:hover {
color: #5B739C; /*un ton de bleu au survol*/
text-decoration: underline; /*et le lien souligné*/
}

a:active {
color: #5B739C;
background-color: #fcfcfc; /*pour lien actif prêt à être cliqué, un background gris clair*/
padding: 2px; /*le background sera décalé de 2 pixel autour du texte*/
}


Je fais confiance à votre créativité pour trouver d'autres combinaison.

Une très bonne ressource pour approfondir vos connaissances css: openweb