Changer la couleur des liens et des Tags de façon ponctuelle

25 novembre 2010

Changer la couleur des liens et des Tags de façon ponctuelle

Sans_titre_1

Dernièrement j'ai fait un tuto pour changer la couleur des Tags, mais je viens de m'apercevoir...(mieux vaut tard...) que ce n'était pas compatible avec ce satané Internet Explorer !

Oui toujours le même...

Voici une autre méthode pour changer la couleur des liens de façon ponctuelle et aussi par la même occasion la couleur des Tags.

Cette fois c'est compatible sur les deux navigateurs...Firefox et Explorer.

Commençons par les Tags :

Collez le script suivant dans votre page d'accueil, la page des archives et aussi la page des messages entre la balise <head> et </head> (rien ne vous empêche de le mettre aussi dans votre profil ou encore les pages des albums photos...).

<style type="text/css">

</style>

Ne validez pas tout de suite...

Repérez sur cette même page le bloc des Tags qui ressemble à ça :

<div class="title">LES TAGS</div>
<ul class="tagcloud">
<CBTags>
<a href="<$BlogTagURL$>" style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a>
</CBTags>
</ul>

Pour attribuer aux tags la couleur qui se trouve dans le script plus haut, vous devez ajoutez le code suivant :

class="type1";

Dans cette ligne de codes, comme ceci :

<a href="<$BlogTagURL$>" class="type1"; style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag">

Au final votre bloc des Tags sera comme ça :

<div class="title">LES TAGS</div>
<ul class="tagcloud">
<CBTags>
<a href="<$BlogTagURL$>" class="type1"; style="font-size:<$BlogTagFontSize$>;" title="<$BlogTagCount$> message(s)" rel="tag"><$BlogTagName$></a>
</CBTags>
</ul>

Voilà pour les tags...

Maintenant pour les liens dont vous voulez changer la couleur par ci par là...on va ajouter dans le code de notre lien ceci :

class="type2"

Si vous voulez mettre les même couleurs pour vos liens que pour vos Tags, vous devez ajouter le même code que pour vos tags : class="type1"

Voilà ce que ça donne :

<a class="type1" href="http://lestuto2demolite.canalblog.com/">Les tuto 2 Demolite</a>

Ce lien sera de la même couleur que les tags.

<a class="type2" href="http://lestuto2demolite.canalblog.com/">Les tuto 2 Demolite</a>

Ce lien sera différent, il aura les couleurs du a.type2 dans script :

Il suffit donc d'ajouter à vos liens le code class="type1" pour qu'ils prennent les couleurs du a.type1.

Le hover correspond à la couleur du lien au passage de la souris.

Vous pouvez ajoutez au script des lignes comme ceci :

a.type3 { color: #ffffff; }
a.type3:hover { color: #000000; }

Pour donner à d'autres liens des couleurs encore différentes...sans oublier d'ajouter class="type3" dans le code de vos liens.

Posté par Demolite à 13:59 - Commentaires […] - Permalien [#]

Tags: couleur, Canalblog, Mode Avancé, tag, liens

Partager cet article

Vous aimez ?

0 vote

Changer le mot "Commentaires" dans le pied des articles

Mettre une barre de défilement (Scrollbar) sur votre blog

Commentaires