Styler le trackback du blog

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

Avant de vous lancer, merci de lire le mode d'emploi des codelets.

Mode d'emploi des codes

Où insérer les codes ?

Les codes fournis doivent être insérés dans la fenêtre de saisie qui apparaît quand on clique, en mode "Admin", sur Paramètres > Insérer dans le header.

Modifier le header en admin

Il faut ensuite appuyer sur le bouton d'enregistrement situé sous la fenêtre de saisie pour que les codes soient enregistrés.

Pour voir les effets du code appliqué à votre site, il faut repasser en mode "Visiteur" pour rafraîchir la page.

Peut-on utiliser plusieurs codes ?

Oui, les codes peuvent être combinés, à condition que vous soyez cohérents dans votre choix : ainsi, si vous combinez le code qui empêche l'affichage du trackback des liens avec celui qui permet d'en changer la couleur, il y aura assurément un problème d'incompatibilité !

Que faire en premier ?

Peu importe le nombre de codes que vous comptez insérer ; vous devez commencer par noter ces deux déclarations dans la fenêtre de saisie. Vos codes seront copiés-collés entre ces deux éléments :

<style type="text/css">

/* C'est ici que vous insérez le(s) code(s) */

</style>

Il ne vous reste plus qu'à choisir les codes dont vous avez besoin et à les copier-coller entre ces deux balises.

Flèche vers le haut

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 code :

/* Bloquer l'affichage du trackback */

div#trackback
{
display:none;
}
Flèche vers le haut

Styler les trackbacks des billets

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

Capture du trackback

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 codes :

Modèle n°1

Pour que les trackbacks se fassent un peu plus discrets :

Capture du trackback relooké

... 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;
}
Flèche vers le haut

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;
}
Flèche vers le haut

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;
}
Flèche vers le haut

Modèle n°4

Pour obtenir ce résultat discret :

Capture du trackback relooké

... 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 : 2
  • #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

  • #2

    Isabelle (vendredi, 04 octobre 2013 21:23)

    Merci à toi !

Ruban