Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Personnaliser les avatars des commentaires sous Blogger

Tout d'abord... Bonne année à tous ! J'espère que vous avez passé des très bonnes fêtes, et que cette nouvelle année vous apporte encore plus de joie que l'année dernière :)

On commence 2015 avec des nouveaux tutoriels pour personnaliser les commentaires de son blog ! Ils seront en plusieurs parties vu la quantité de choses que l'on peut changer. Je vous propose de commencer avec les avatars des commentaires, ensuite on verra comment changer les fonds et la forme de commentaires, puis les polices des différentes parties.
Si vous ne l'avez pas vu, j'ai également fait un tutoriel pour changer les liens et les titres Commentaires ;)

Personnaliser les avatars des commentaires sous Blogger

C'est parti pour les explications !

Faire une sauvegarde du blog

Attention : Si vous utilisez le système de commentaires Google+ ce tutoriel ne fonctionnera pas car il n'est pas possible de modifier l'apparence des commentaires Google+.

Premièrement faites, comme toujours, une sauvegarde de votre thème avant d'y apporter des modifications. Vous pourrez ainsi revenir en arrière si vous faites une erreur.

Cliquez sur Modèle à partir de votre tableau de bord, puis sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez ensuite sur Télécharger le modèle complet et sauvegardez le fichier sur votre ordinateur :

Personnaliser les avatars des commentaires sous Blogger

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier :)Personnaliser les avatars
Il est possible de changer les forme des avatars, ou d'ajouter une bordure par exemple, en changeant un peu de code CSS.

Cliquez sur Modifier le code HTML :

Personnaliser les avatars des commentaires sous Blogger

Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :

Personnaliser les avatars des commentaires sous Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte. Passez à l'étape suivante.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.

Donner une forme ronde aux avatars

Pour donner une forme ronde aux avatars, collez le code suivant dans la boîte de code :
#comments .avatar-image-container img {
Et appuyez sur Entrer.
Vous devrez tomber sur :

Personnaliser les avatars des commentaires sous Blogger

Remplacez le code par ceci :
#comments .avatar-image-container img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
Ce qui donne :

Personnaliser les avatars des commentaires sous Blogger

Ajouter une bordure aux avatars

Pour ajouter une bordure aux avatars, ajouter les lignes suivantes au même code :
border-style: solid;   /* Style de la bordure */
border-color: #EEEEEE;   /* Couleur de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */
Comme ceci :
#comments .avatar-image-container img {
border-style: solid;   /* Style de la bordure */
border-color: #EEEEEE;   /* Couleur de la bordure */
border-width: 4px;   /* Epaisseur de la bordure */
}
/!\ Attention ! Si vous ajoutez une bordure, il faut ajouter un autre code pour agrandir la taille des avatars. Sinon une partie de la bordure sera coupée.
Cherchez le code suivant :

.avatar-image-container {
Il devrait se trouver juste au-dessus du premier code :

Personnaliser les avatars des commentaires sous Blogger

Ajoutez les lignes suivantes :
max-height: 44px !important; /* Hauteur final de l'avatar avec la bordure */
width: 44px !important;   /* Largeur final de l'avatar avec la bordure */
Comme ceci :
.comments .avatar-image-container {
margin: .2em 0 0;
max-height: 44px !important; /* Hauteur final de l'avatar avec la bordure */
width: 44px !important;   /* Largeur final de l'avatar avec la bordure */
}
Dans mon exemple, j'ai ajouté une bordure de 4 pixels autour de l'image. Par défaut les avatars font 36 pixels de large et 36 pixels de haut. En ajoutant 4 pixels de bordure de chaque coté, elle fait maintenant 4+36+4=44 pixels de haut et 44 pixels de large. Vous me suivez ?

Personnaliser les avatars des commentaires sous Blogger

Il suffira de changer la valeur en pixels (44px) en fonction de la taille de l'avatar avec la bordure, en suivant la petite formule :

36 + (2 x taille de la bordure) = taille finale en pixels
36 + (2 x 4) = 44 pixels
En plus de cela, ajoutez la ligne suivante :
margin-left: -4px;
Comme ceci :
.comments .avatar-image-container {
margin: .2em 0 0;
max-height: 44px !important;
width: 44px !important;
margin-left: -4px;   /* Décalage à gauche */
}
Ceci permet de rectifier le décalage de l'image vers la droite quand on ajoute une bordure.
Changer la valeur (-4px) par la largeur de votre bordure en négatif (important !).

Ce qui donne :

Personnaliser les avatars des commentaires sous Blogger

N'oubliez pas de sauvegarder en cliquant sur Enregistrer le modèle.
Et voilà pour les avatars !

Rendez-vous au prochain tutoriel pour savoir comment changer la couleur de fond et la forme des commentaires ;)
Bon blogging !

Autres articles

49 commentaires:

  1. Oh génial! Depuis le temps que je cherche! Tu tombes pile au bon moment, je vais refaire le design du blog!
    Bisous et merci!

    RépondreSupprimer
  2. Je te dis vraiment un grand MERCI pour tous ces tutoriels. Ils sont très très bien expliqués et faciles à suivre (alors qu'il y a encore quelques semaines, je ne connaissais absolument rien au code HTML). J'en profite également pour te souhaiter une très belle année 2015 ♡

    RépondreSupprimer
  3. Bonjour Lady Bird ! encore un article génial ! voila j'ai remis mon blog en ligne ! (je t'avais demandé quelques conseils je ne sais pas si tu te souvient) , je ne suis pas totalement satisfaite car il y a encore de nombreuses choses que je ne sais pas faire comme ajuster la largeur de mon menu et mettre des images ( dentelle , dans mon cas autour de mon blog le body je crois) . Je voulais te remercier encore une fois pour tes articles géniaux ! mon petit blog est un peu plus mignon grâce a toi ! Je te souhaite aussi une très merveilleuse année ♥

    RépondreSupprimer
  4. Oh et du coup mon blog c'est http://ohmydearestdarling.blogspot.fr

    RépondreSupprimer
  5. Encore merci pour tes tutoriels, tu es ma petite fée !! :)

    RépondreSupprimer
  6. Coucou,

    Je suivais beaucoup de tes astuces auparavant et tout fonctionnait toujours nickel. Mais ici j'ai télécharger un template tout fait que j'apprécié et j'ai changé 2/3 trucs. Ici je veux changer l'avatar des commentaires comme tu l'explique mais quand je tape dans CTRL+F ce que tu dis, il ne me le trouve pas du tout ... Pourrais tu m'aider ?

    RépondreSupprimer
    Réponses
    1. Salut,
      J'ai regardé ton blog et le problème c'est que tu utilise maintenant le système de commentaires Google Plus au lieu du système de commentaires par défaut de Blogger. Je crois qu'on ne peut pas modifier l'apparence des commentaires Google Plus.
      Désolée :/

      Supprimer
    2. Ah d'accord ça doit être pour ça alors. Puisque je n'ai pas du tout le même que toi .. En tout cas merci d'avoir répondu :)

      Supprimer
  7. Tes tutoriels sont toujours aussi claires :) merci mile fois!!!

    RépondreSupprimer
  8. Ah au fait

    Je voulais te demander, pourrais tu nous donner une liste de plugin intéressant pour Blogger ? En effet, j'en ai trouvé quelques un pas mal mais tous pour Wordpress et je suppose qu'on ne sais pas les utiliser

    Merci bonne journée

    RépondreSupprimer
    Réponses
    1. En fait Blogger propose quelques plugins de base, mais ils ne sont pas très intéressant...
      Tu peux les trouver dans Modèle > Ajouter un gadget > Plus de gadgets.
      Wordpress est un système beaucoup plus riche et propose donc plus d'outils intéressants et performants. Pour Blogger il faut trouver des tutoriels en ligne car il n'y a pas de plugin que tu peux installer en un clic comme sur Wordpress.
      Je peux quand même y jeter un œil, mais la majorité des informations pour Blogger sont en Anglais. C'est en partie pour cela que j'ai fait ce blog ;)

      Supprimer
  9. Et voilà, grâce à toi, mon blog a de jolis avatars tous ronds. Encore merci pour toutes ces astuces.
    Du coup, je le demandais si il est possible de changer l'avatar qui s'affiche par défaut quand une personne commente en anonyme ou en laissant seulement son nom? Pour le remplacer par une image dr mon choix?

    RépondreSupprimer
    Réponses
    1. Salut Cavali'Erre,
      C'est une bonne question, je me penche sur le sujet et je vois ce que je peux faire ;)

      Supprimer
  10. Bonsoir Lady Bird! Je voulais savoir si il y avait un moyen de modifier séparément l'avatar de l'auteur et l'avatar du lecteur?
    Et comme Cavali'Erre si tu trouve un moyen de modifier l'image par défaut ce serait extra!
    Au passage merci pour ton super blog et ces supers tutos! Je suis très fan et c'est un des rares blogs que je suis assidument!

    RépondreSupprimer
    Réponses
    1. Je ne crois pas que ça soit possible mais je vais regarder :)
      Et merci ! :D

      Supprimer
  11. Je découvre par hasard ton blog. Et c'est EXACTEMENT ce que je cherche. Explications claires et précises. Maintenant que les avatars des commentaires sont rond je vais modifier d'autres éléments de mon blog.
    Merci beaucoup beaucoup.

    Belle soirée.

    Anne Charlotte

    RépondreSupprimer
  12. Je suis en train de refaire mon habillage de A à Z et je me sers de tes explications une à une :) Celle-ci comme les autres est super bien expliquée :) Les avatars des commentaires, c'est fait :)

    RépondreSupprimer
  13. Coucou ! Alors je ne comprends pas trop pourquoi ça ne marche pas chez moi bouuu) J'ai déjà bidouillé avec les codes html sans trop de soucis, mais là rien ne se passe, mes avatars de com' reste carrés, as tu une idée ? merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Salut Elofancy,

      Il te manque un signe } avant la ligne :

      #comments .avatar-image-container img {

      Du coup, le code qui se trouve juste avant n'est pas "fermé" et par conséquent le code suivant, pour l'avatar, n'est pas reconnu.
      Rajoutes simplement un } juste au-dessus du code pour l'avatar, comme ceci :

      }
      #comments .avatar-image-container img {

      Et voilà ! ;)

      Supprimer
  14. Bonjour et merci pour cet article, je voudrais stp te poser une question quinté revient souvent, serait il plus facile pour le lecteur de commenter un article si on désactive les commentaires Google +? Car sur le mien ils sont activés et les lecteurs gelèrent à chaque fois pour trouver où commenter. Mille merci j espère que tu auras ce message

    RépondreSupprimer
    Réponses
    1. Bonjour Ines,
      Peut-être. Personnellement je préfères le système de commentaires de base de Google. Je n'aime pas trop le système Google +. Mais je crois que tes commentaires Google + n’apparaîtront pas dans le système basique une fois le changement fait :/

      Supprimer
  15. Bonjour Catherine,
    Je viens de parcourir ton blog qui est vraiment très bien fait au design bien agréable.
    J'ai une petite question concernant le cadre dans lequel on tape son commentaire. A plusieurs reprises, j'ai essayé de le modifier en vain. J'aurais aimé modifier la typo, et aussi la couleur du bouton publier par exemple... enfin, modifier son apparence de manière générale. Si jamais tu as un truc, ce sera avec plaisir que je le prendrai!
    Merci par avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Céline,
      C'est normal que tu n'y parviennes pas, il est géré par Blogger et non par ton thème. C'est la seule chose qui n'est malheureusement pas modifiable sur Blogger :/

      Supprimer
  16. Bonjour,
    Déjà, je te remercie pour cet article, depuis le temps que je cherche !
    Par contre j'ai un problème : j'ai beaucoup coller le code (#comments .avatar-image-container img {) dans la boîte de code, quand j'appuie sur "entrer", rien ne s'affiche, hormis un interligne de plus... Est-ce que tu saurais comment faire pour que ça fasse comme il est mis dans ton tutoriel ?
    Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Julie, il faut colle ce code dans le champ de recherche et non dans le code.
      si tu appuies sur Entrer dans la boîte de code s'est normal que cela créé un saut de ligne.

      Supprimer
    2. Bonjour,
      D'accord, c'est ce que j'ai fait, mais toujours rien : aucune partie n'est surlignée dans la page du code HTML. Saurais-tu, du coup, comment cela se fait ?
      Merci d'avance et désolée de t'embêter. ^^'
      Julie

      Supprimer
    3. Dans ce cas, rajoute le code juste avant la ligne :

      /* Comments

      Supprimer
  17. Coucou Cathy,

    Est ce que c'est possible de supprimer complètement l'avatar ?
    Merci beaucoup pour tout ces tutos qui sont géniaux.

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie,
      Tu peux cacher les avatars en ajoutant le code CSS suivant :

      .avatar-image-container, #comments .avatar-image-container img {
      display: none !important;
      }

      Supprimer
  18. Coucou Catherine!!

    C'est encore moi...bon ça ne marche pas, je ne trouve pas le code :
    comments .avatar-image-container img

    Y'a t-il un autre code qui corresponde à mon blog?
    Mon blog: www.mademoisellepatisse.com
    Merciiiiiiiiiii

    RépondreSupprimer
    Réponses
    1. Bonjour Adeline,
      Si tu ne le trouves pas tu peux l'ajouter manuellement ;)

      Supprimer
    2. Merciiii Catherine!
      J'y suis arrivée :)))

      Supprimer
  19. Oh my god ! Merci beaucouuuuuuup pour ce tutoriel tout simplement génial !!

    RépondreSupprimer
  20. Bonsoir :)

    J'aurais voulu savoir comment augmenter la taille des avatars dans les commentaires :) Car malgré ton explication avec la bordure, je n'y suis pas arrivé..

    Merci beaucoup pour les tutoriels que tu proposes, ils sont top et on peut toujours les utilisés pour une autre catégorie etc, merci encore :)

    Bonne soirée! :)

    RépondreSupprimer
    Réponses
    1. Bonjour Alexis,
      Peux-tu me donner le lien vers ton blog pour que je puisse voir le problème ?

      Supprimer
  21. Bonjour Catherine,

    Merci pour ce tuto très bien construit !
    Moi j'ai un petit souci car il y a déjà un avatar par défaut et je ne sais pas comment l'enlever !
    C'est l'avatar de blogger avec le fond orange et le B en blanc...
    Peux-tu m'aider stp ?

    Merci.

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Pour changer ton propre avatar, il faut ajouter une image à ton compte Google dans les paramètres de ton compte.
      Il est possible de modifier l'avatar des commentaires par défaut de Blogger, je note pour en faire un tutoriel ;)

      Supprimer
    2. Bonjour,

      J'ai le même soucis que Marion. Pourtant j'ai changé mon avatar sur mon compte google. Il s'affiche bien, même quand je me connecte, mais quand je poste sur mon blog, c'est toujours le B de blogger qui s'affiche. C'est normal ?
      Il faut du temps pour que ça soit pris en compte ?

      Supprimer
    3. Bonjour Mélaïna,
      Essaies d'accéder à ton compte Google en cliquant sur ton nom qui apparaît au-dessus de tes commentaires. Tu devrais tomber sur ton profil Blogger. Modifies ici ton image ;)

      Supprimer
    4. Oh merci, c'était tout bête comme solution ! Je n'avais pas trouvé où modifier ça ! :)
      Il me reste plus qu'à personnaliser le truc maintenant ;)

      Supprimer
    5. Désolée pour le doublon !

      J'ai réussi à mettre mon avatar, à faire la bordure.
      Du coup, j'ai testé pour voir en postant un commentaire anonyme et rien ne s'affiche (à part le bordure qui fait un mini carré)
      http://leparadisdesmots.blogspot.fr/2017/05/test-2.html

      C'est possible de mettre une image par défaut aux commentaires anonymes ? Car du coup, ça fait pas très joli.

      Et petite question, même si c'est pas du design... C'est pas possible d'autoriser pour les commentaires anonymes de mettre un pseudo ? Car mon blog est un blog de lecture, donc je pense pas qu'il y ait beaucoup de gens avec un compte google, et ça va juste mettre "anonyme" à chaque fois. Difficile de répondre aux commentaires de façon individuelle si je ne sais pas si c'est des personnes différentes qui écrivent...

      Supprimer
    6. Bonjour Mélaïna,
      C'est assez rare que qu'un lecteur laisse un commentaire en tant qu'anonyme. Généralement ils sont connectés automatiquement sur leur compte Google.
      Néanmoins je peux faire un tutoriel pour changer l'image par défaut des utilisateurs anonymes et Blogger qui n'ont pas de photo de profil ;)

      Supprimer
    7. Ha oui, si tu le fais, ça m'intéresse beaucoup ! Je suis ton blog et je l'utiliserai :)

      En fait, c'est un blog de lecture / écriture, qui va être relayé sur facebook. Du coup, je ne pense pas qu'il n'y ait que des commentaires google !

      Merci en tout cas, et j'ai hâte de voir le tuto quand tu auras le temps :)

      Supprimer
  22. Whouahou c'est super merci beaucoup j'adore!

    RépondreSupprimer
  23. Bonjour Catherine, c'est encore moi^^

    J'ai collé le premier code pour rendre l'avatar rond mais quand j'enregistre il ne se passe rien. Pourtant j'ai bien mis } à la fin ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      S'il ne se passe rien essaies d'ajouter !important, comme ceci :

      #comments .avatar-image-container img {
      -webkit-border-radius: 50% !important;
      -moz-border-radius: 50% !important;
      border-radius: 50% !important;
      }

      Si ça ne change rien, vérifies les codes CSS qui se trouvent avant ce code, qu'il n'y a pas d'erreur, d'oubli d'un des signes suivants ou un signe en trop :

      { : ; } /* */

      Supprimer
  24. Je n'ai pas de commentaires sous mes articles alors je ne peux pas confirmer, mais je pense que ça a fonctionné ! ;)

    RépondreSupprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger