3 oct. 2010

(Blogger) Personnaliser le design de vos réponses aux commentaires

Une astuce pour distinguer vos réponses des commentaires postés par vos visiteurs.

Un exemple sur cette saisie d'écran :


Vous allez dans Présentation > Modifier le code HTML > vous cochez Développer des modèles de gadgets
On commence par la partie configuration : vous recherchez - Edition > Rechercher dans le menu de votre navigateur - ce passage qui concerne les commentaires de l'auteur du blog :
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
Les lignes importantes sont en bleues. Au mileu, peu importe si vous avez d'autres lignes.

Vous rajoutez à la suite :
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/> 
Ensuite, vous devez avoir :
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
Là encore, les lignes importantes sont en bleues et au mileu, peu importe si vous avez d'autres lignes.

Vous rajoutez à la suite :
</b:if>
On passe maintenant à la partie design, vous recherchez :

]]></b:skin>
qui marque la fin du CSS et juste avant, vous collez
.comment-body-author {background: #000;color: #fff;border: 1px solid #ff0000;padding:5px}

A vous de personnaliser le design :
  • le fond : background
  • la couleur de la police : color
  • la bordure : border
  • les marges : padding
  • etc ...

16 commentaires:

  1. merci du conseil annak, peut être cela me servira t'il

    RépondreSupprimer
  2. Bonjour,
    merci pour cette astuce que je me suis empressé d'installer.
    Ca fonctionne nickel, tout comme le fil d'ariane au passage.
    bonne continuation.

    RépondreSupprimer
  3. Bonjour,
    Merci pour ce tutoriel et tous les autres ^_^

    Je suis en train d'essayer celui-ci, mais il ne semble pas marcher. Peut être que je ne place le code au bon endroit. Pourtant, je place bien le texte en rouge après la dernière balise (bleu foncé) aux deux endroits (après < /dt > et < /dd >.

    Je continue de chercher en espérant trouver d'où le problème vient.

    RépondreSupprimer
  4. Bonjour Hikikomori :) Le problème est que je ne peux pas voir la structure de ton blog. Par contre, dans ton CSS, je vois
    .comment-author {
    border-top: 1px dashed #BFBFBF;
    padding-top: 20px;
    }
    .comment-author.blog-author {
    background-color:#E3E3E3;
    border-top:1px solid #BFBFBF;
    }
    As-tu essayé de personnaliser ces lignes ? Elles semblent correspondre aux commentaires de l'auteur du blog. Je n'ai pas trouvé tes commentaires pour tester.

    RépondreSupprimer
  5. Merci pour cette réponse rapide ^.^

    En faite, je me suis justement rabattu sur ces deux lignes de CSS. J'ai ajouté un "background" sur le deuxième afin de différencier légèrement les commentaires.

    Finalement, ça fera l'affaire pour l'instant =p

    RépondreSupprimer
  6. Merci beaucoup pour ce tutoriel que je viens d'installer et qui marche à merveille !!! Cette fonction me manquait vraiment. Je la trouve indispensable.
    Je garde ton blog dans mes tablettes, car tu y postes des "mines d'or" !
    Merci !!

    RépondreSupprimer
  7. Ben moi je n'arrive jamais à installer ces machins! Pourtant je fais tout ce qu'il faut, mais peu importe les sites, ça marche jamais, je ne comprend pas!

    RépondreSupprimer
  8. Je n'ai pas tout bien compris non plus =( pourtant j'ai fais tout ce qu'il est demandé de faire =(

    RépondreSupprimer
  9. Merci, c'est super bien expliqué! :) j'ai pu faire ce que je voulais

    RépondreSupprimer
  10. Wahouuuu super ça marche bon ok c'est pas les couleurs que j'avais choisies mais bon ça va le faire.
    Merci pour le tuyau.

    RépondreSupprimer
  11. sauf que je n'ai pas le "a dit" est-ce normal?

    RépondreSupprimer
  12. Moi pareil et rien ne marche , par contre j ai constaté dans les commentaires que vous disiez que ça marche alors que sur vos blog il n y a aucune difference...

    RépondreSupprimer
  13. Bonjour Anna,
    je voudrais personaliser le fond de mes commentaires mais ça ne pas quand je clique sur modifié le modèle!!
    Merci de m'aider!!
    Lien de mon blog: http://u2-france.blogspot.fr/

    RépondreSupprimer
  14. Bonjour Anna K...un grand merci pour tes tutos..mais j'ai besoin de ton aide, car tout ce que j'essaie de faire pour modifier le Template concernant le fond des commentaires auteur (je souhaite changer la couleur, et mettre une bulle, et un encadré..) rien ne fonctionne avec mon modèle..je suis là-dessus depuis des jours et ça m'énerve un max..merci de me dire ce que tu peux faire pour m'aider...

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)