Codelets pour changer le trackback

Voici la liste des codelets postés sur cette page :

Ne pas afficher le trackback des billets
Styler les trackbacks des billets

Pour savoir quoi faire de ces codelets, reportez-vous au mode d'emploi détaillé ici.

Ne pas afficher le trackback à la fin des billets

Le mieux, c'est assurément de ne pas activer les trackbacks dans le paramétrage du blog (dans l'admin de votre site). Le problème, c'est qu'une fois qu'on les active, on ne peut pas désactiver les trackbacks... Seule solution donc : les cacher, ne pas les afficher grâce à ce codelet :

/* Bloquer l'affichage du trackback */

div#trackback
{
display:none;
}

Styler les trackbacks des billets

Ben oui, il faut se rendre à l'évidence, les trackbacks ne sont pas très glamour au naturel :

On va voir comment modifier leur apparence à travers 4 exemples. A chaque fois, dans le code, j'ai indiqué ce qu'il fallait changer pour adapter le code à votre besoin (au niveau des couleurs notamment). Il suffit donc de suivre les indications pour personnaliser ces modèles aux couleurs de votre design. A cet effet, ce sélecteur vous sera d'une grande utilité. Il vous donnera le code hexadécimal des couleurs à insérer dans les codelets :

Flash colorpicker

Modèle n°1

Pour que les trackbacks se fassent un peu plus discrets :

... on va utiliser ce code :

/* Style du trackback */

a.trackbackUrl, 
a.trackbackUrl:link,
a.trackbackUrl:visited,
a.trackbackUrl:hover,
a.trackbackUrl:active
{
        background:#EEEEEE none repeat scroll 0% 0%;   /* Pour changer la couleur du fond, remplacer #EEEEEE */
        border:1px solid #ccc;  /* Pour changer la couleur de la bordure, remplacer #ccc */
        color:#aaa; /* Pour changer la couleur du texte, remplacer #aaa */
        padding:2px;
        text-decoration:none;
}

Modèle n°2

Pour obtenir ce genre d'affichage des trackbacks :

... c'est ce code qu'on insère :

/* Style du trackback */

a.trackbackUrl, 
a.trackbackUrl:link,
a.trackbackUrl:visited,
a.trackbackUrl:hover,
a.trackbackUrl:active
{
        background:#E8F7FF none repeat scroll 0% 0%;  /* Pour changer la couleur du fond, remplacer #E8F7FF */
        border:1px dotted #66ADFF;  /* Pour changer la couleur de la bordure, remplacer #66ADFF */
        color:#66ADFF; /* Pour changer la couleur du texte, remplacer #66ADFF */
        padding:2px;
        text-decoration:none;
}

Modèle n°3

Pour obtenir cet affichage :

... copier-coller ce codelet :

/* Style du trackback */

a.trackbackUrl, 
a.trackbackUrl:link,
a.trackbackUrl:visited,
a.trackbackUrl:hover,
a.trackbackUrl:active
{
        background: #FF7F00 none repeat scroll 0% 0%;   /* Pour changer la couleur du fond, remplacer #FF7F00 */
        border:0px; 
        color:#fff; /* Pour changer la couleur du texte, remplacer #fff */
        padding:8px;  /* Pour que le rectangle soit plus large, remplacer 8px par une valeur supérieure (ex : 10px) */
        text-decoration:none;
}

Modèle n°4

Pour obtenir ce résultat discret :

... on copie-colle ce code :

/* Style du trackback */

a.trackbackUrl, 
a.trackbackUrl:link,
a.trackbackUrl:visited,
a.trackbackUrl:hover,
a.trackbackUrl:active
{
        background:none;
        border:0px;
        color:#aaa;  /* Pour changer la couleur du lien, remplacer #aaa */
        text-decoration:underline;  /* Pour enlever le soulignement du lien, remplacer "underline" par "none" */
}

Courrier des lecteurs

écrire commentaire

Commentaires: 1

#1
joellecm (vendredi, 25 novembre 2011 15:59)

Bonjour
je suis pas douée en informatique, et des fois je souhaite des trucs qui ne sont pas possibles à faire.
Mais pour cacher ces 2 lignes, grâce à cette astuce, c'est possible!!! Donc MERCI!!!!
cm