Solution pour afficher l’avatar des commentateurs dans les commentaires Blogger - Blogspot

Tout d’abord connectez-vous à Blogger, Allez dans "Paramètres", cliquez sur "Commentaires" puis cochez la case "Oui" pour "Afficher les images du profil sur les commentaires".
Maintenant, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant:
<dl id='comments-block'>Remplacez le par :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>Maintenant recherchez :
<a expr:name='data:comment.anchorName'/>(si vous ne trouvez pas cette ligne, recherchez <b:loop values='data:post........> (c'est la deuxième ligne après le <dl id='comments-block'> ) et juste après, ajoutez le code qui est en dessous)
Et remplacez le avec :
<b:if cond='data:comment.favicon'>C’est tout, vous devez normalement voir un avatar à coté des commentaires de votre blog, y compris les anciens.
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
Pour les commentaires effectués avec un compte Google sans Image de profil (ou avec OpenID, Wordpress, LiveJournal, Typepad, AIM), une petite icône Blogger est affichée comme Avatar et pour les commentaires Anonymes rien ne s'affiche.

Donc pour afficher une image pour les commentaires Anonymes (ou Nom URL), il suffit d'ajouter un petit bout de code à votre Template.
Connectez-vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant:
]]></b:skin>Et juste avant copiez ces lignes:
/* Avatar */(cela va également redimensionné la petite Favicon Blogger (de 16x16x à 35x35) qui s'affiche pour les commentaires effectués avec OpenID, Wordpress, LiveJournal, Typepad, AIM.....)
.avatar-image-container img {
background:url(http://blogspot.leblogger.com/divers/avatarb.png);
width:35px;
height:35px;
}
Pour tester cette Astuce, laissez un commentaire dans ce blog et vous allez voir un Avatar à coté de vote Nom.
Publié le
vendredi, septembre 18, 2009

Je suis très heureux et très fière de vous annoncer que Amanda du célèbre Blogger Buster a cité mon blog en référence dans son post sur cette nouveauté blogger.
RépondreSupprimerRegardez c'est ici : http://www.bloggerbuster.com/2009/09/profile-avatars-for-blogger-comments.html
test
RépondreSupprimerWow je suis très impressionner Soufiane, blogger buster qui fait un lien vers ton blog.
RépondreSupprimeroui j'allais oublier merci pour tutoriel ça marche nickel, chrome ....
RépondreSupprimerJe suis vraiment jalouse tu devrais avoir pleins de visites. mais pourquoi tu n'as pas mis un traducteur.
RépondreSupprimerMerci soufiane
RépondreSupprimer@ YeahS
RépondreSupprimerMerci.
@ YeahS
RépondreSupprimerSur ton conseil j'ai ajouter un Traducteur, mais que pour cette page. Donc merci ...
Ce commentaire a été supprimé par l'auteur.
RépondreSupprimerSalut Soufiane...
RépondreSupprimerGood job pour les tutos... ;)
J'avais fais de nombreuses modifs pour les com's...
L'avatar se mettait à gauche, en dehors de la colonne des commentaires. Cela était dû à ma configuration personnelle puisque j'avais supprimé certaines balises (officielles)... que j'ai remplacé par les miennes...
Je ne voulais pas remettre les balises originales, alors j'ai utilisé une méthode de positionnement -->
-----------------
[span style='display:scroll;position:absolute;margin-right:5px;'][data:comment.authorAvatarImage/][/span]
-----------------
Ce qui a pour effet de la localiser en haut à 5 pixels à droite du commentaire...
Seul inconvénient, le texte passe en-dessous de l'image... Pour cela, j'ai modifié la marge intérieure-droite dans les propriétés css...
--> # comments-block [ padding-right: 26px; ]
Voilà voilà... J'espère que ça pourra aider certain et donner des idées aux autres... ;)
Bonne continuation et encore bravo pour les tutos...
ps: [] = <>
merci soufiane mais j'ai un probleme j'ai mit le code comme tu as dit sur le tuto mais je ne voix pas les images tu peux m'aider une autre fois stp et merci
RépondreSupprimer@ NicTeam
RépondreSupprimerMerci c'est honneur pour moi.
Ton explication a l'aire très très intéressante, merci.
Je n'ai pas pu vérifier ce que ça donne sur ton blog parce que je n'ai pas trouvé où sont les commentaires !!!
soufiane j'ai fait la manip de ce site http://www.bloggerbuster.com/2009/09/profile-avatars-for-blogger-comments.html et je quand je poste un commentaire je ne le voix pas tu peux m'aider stp
RépondreSupprimer@Soufiane LeBlogger
RépondreSupprimerlollll...
C'est vrai que j'en n'ai pas des tonnes...
Je n'ai pas encore eu le temps de motiver les gens à poster... (priorité au contenu) ;)
http://nicteam-legende.blogspot.com/2009/04/jean-ferrat.html
Regarde pas trop le code-source, c'est le "désordre"... :))
@ ADMINAZ
RépondreSupprimerTu fais la manip de l'autre site et tu me demandes de t'aider ????
Déjà avec mes propres tutoriel, c'est pas facile.
Bon, qu'est ce que tu as fait au juste ?
est ce que tu as trouvé a expr:name='data:comment.anchorName
oui je l'ai trouver
RépondreSupprimer@ NicTeam
RépondreSupprimerAh oui c'est un grand "Bordel", le blog en entier s'affiche bizarrement, je ne vois pas la partie article, ni vidéo et je ne peux pas envoyer de commentaire parce que la partie pour saisir le captcha ne s'affiche pas ....
Mais en général le désigne est très réussi, tu as dû y passer des heures, Bravo...
@ ADMINAZ
RépondreSupprimerce que je te propose c'est de supprimer ce que tu as fait avec l'autre lien et de suivre mes instruction (en entier et pas la deuxième partie uniquement).
N'oublie pas de remplacer dl id='comments-block'
tu peux m'aider stp ~x(
RépondreSupprimerok soufiane merci je vais essayer
RépondreSupprimersoufiane dsl mais sa ne marche pas tu veux que je te donne mon mail et mot de passe et tu me le fait toi meme stp
RépondreSupprimerou prend mon code voici le lien http://mydatanest.com/files/adminaz/12956_ykne8/code_adminaz.txt merci de ton aide a moi soufiane beaucoup beaucoup
RépondreSupprimer@ ADMINAZ
RépondreSupprimerj'ai vraiment pas le temps, maintenant Aziz je verais ça plustard.
ok :(( merci ~x(
RépondreSupprimer@Soufiane LeBlogger
RépondreSupprimerOui, c'est possible que certaines parties s'affichent mal...
C'est sûrement dû à la lourdeur des codes... (faut que je fasse le grand nettoyage =)) )
Je suis aussi entrain de remanier la partie "widget blog1"...
C'est ce qu'il y a de plus délicat sur blogger et je n'ai pas encore fait les corrections nécessaire pour IE... (j'suis en mode firefox) ;)
Capture commentaires -->
http://lh5.ggpht.com/_oRgYjgpt3wE/SrUYeXJu1cI/AAAAAAAAFLo/aLdVOqiIQxo/capture01.jpg
Après ça, je testerai ton astuce pour les img des anonymes... ;)
@ NicTeam
RépondreSupprimerJ'y vois un peu plus claire maintenant, Tu as vraiment tout modifier, c'est impressionnant, chapeau.
Je teste en ce moment quelque code CSS pour personnaliser l'affichage de l'Avatar, sans passage en force bien sur.
Mais c'est très très barbant ...
@Soufiane LeBlogger
RépondreSupprimerOui tu as raison, c'est barbant...
Blogger a fait un truc spécial pour qu'on ne puisse pas trop le modifier...
Je m'y suis cassé les dents en vain pour pouvoir changer les dimensions, les bordures, etc.
Pour ma part, je vais y réflèchir à tête reposée... (mal de crane)
Si je trouve quelque chose d'interessant, je te le passe... ;)
Oui, j'ai tout modifié, j'ai refait intègralement le template...
Après un certain temps, on apprend a connaître le principe d'organisation de blogger et on peut se permettre d'aller plus loin en faisant des choses plus compliquées...
J'ai un truc qui peut peut-être t'interesser... Je ne sais pas si c'est nouveau, en tout cas c'est la première fois que je vois ça...
-->
[ b:if cond='data:top.showStars']
[ div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='59' g:type='RatingPanel' g:width='166'/]
[ /b:if]
A placer dans la partie "post -footer -line -1" (2 ou 3)
Je n'ai vu ça chez personne, et personne n'en n'a parlé... ;)
soufiane es ce que tu as MSN stp
RépondreSupprimerBonjour,
RépondreSupprimerJe suis Parsifal32 du blog Idee per Computer ed Internet
Je vous remercie pour l'excellent travail au nom de moi et mes lecteurs. Je vous souhaite un bon week-end!
P.S. J'ai aussi mis le lien vers cet article
@ parsifal32
RépondreSupprimerUn grand merci à toi pour le lien parsifal.
On dirait que tu parles Français ! c'est vrai!
bon week-end à toi aussi.
salut Soufiane tu peux m'aider stp aujourd'hui car c'est tres urgent merci :(( ~x(
RépondreSupprimerOla Soufiane
RépondreSupprimertout d'abord un grand merci pour travail ,c'est une vrai mine d'or !!!!!!!!!!!!!!!!!!
après l'arrêt de "bloggez au bout des doigts"
c'est le Must en conseil blogger !!!!
Fini de chercher des solutions en anglais, que j'ai toujours un peu de mal à traduire .....
Et pour ce post , absolument génial comme astuce,
je l'ai à l'instant intégré dans mon blog photos Croqueur d'images !!!
à très bientôt !(je vais continuer de personnaliser mes blogs)
Longue vie à votre blog !
Bonne journée
@ Hugo
RépondreSupprimerMerci c'est très sampas, je connais déjà ton blog, il est très beau.
Et, tu peux afficher une images pour les commentaires anonymes (ou avec URL/Nom). c'est la deuxième au code toute à la fin du tutoriel.
Grâce aux liens de Blogger Buster, mon blog a été cité dans plusieurs "Gros" blog (même un blog chinois ... ) je suis vraiment tout content...
C'est pour ça que j'ai ajouté le traducteur que dans cette page...
stp soufiane aide moi :((
RépondreSupprimerLa rançon de la GLOIRE !!! toutes mes félicitations !!!
RépondreSupprimerEn ce qui concerne blog Buster, c'est justement celui dont je parlaispour l'anglais.
Pour l'avatar anonyme, c'est fait à l'instant.
@ Hugo
RépondreSupprimerJ'ai vu ça,
je viens juste de changer l'ancien Avatar pour les commentaire anonyme, je trouve que celui là est un peu plus cool.
Faut juste changer l'URL de l'image.
Bien sur tu peux mettre l'image 35x35 que tu veux.
:(( soufiane stp aide moi c'est très urgent :((
RépondreSupprimer@ ADMINAZ
RépondreSupprimerAjoute moi en tant qu'admin...
ok inscrit toi sur la page d'accueille il y a inscription connexion fait inscription
RépondreSupprimer@ ADMINAZ
RépondreSupprimerje ne peux pas tout faire à ta place
tu veux que je te passe mon adresse et mot de passe et tu te co avec me coordonner c'est plus facile commeca je croix
RépondreSupprimerthank you so much for this solution :)
RépondreSupprimer.
Ok Soufiane,
RépondreSupprimerdans l'immédiat votre nouvel avatar anonyme me convient très bien
je viens de le mettre à jour
orbigado .
@ Zons
RépondreSupprimerThank you very much for commenting and for your backlink.
:(( salut soufiane voici le lien de mon code html http://mydatanest.com/files/adminaz/13056_xeeko/code_html_adminaz.txt stp aide moi et désole si je t'ai fait chier :(( :(( :(( :((
RépondreSupprimermerci beaucoup pour tous tes articles ! ils deviennent incontournables pour faire la mise en page sur blogger !
RépondreSupprimertesting
RépondreSupprimerhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif
@ ADMINAZ
RépondreSupprimerJe me suis inscris que ton blog maintenant il faut me passer en deuxième admine pour que je puisse voir le code HTML.
Merci Shehrazad,
RépondreSupprimerti mouffi roujir
@ Peter
RépondreSupprimerSo it's working ??
you look so beautiful in that picture hahahahah
soufiane sayer je t'ai mit 2eme admin
RépondreSupprimer@ ADMINAZ
RépondreSupprimerJe t'ai envoyer un email ???
Il faut pas charger cette page ....
oui soufiane j'ai reçu ton mail mais les commentaires ne marche pas je les recois par mail
RépondreSupprimertest
RépondreSupprimertes with url
RépondreSupprimerhi, i have question, how to show avatar if i use name/url?,
RépondreSupprimeri see on your blog you use http://www.leblogger.com/ and avatar shown
thanks
@ Kelpo
RépondreSupprimerTo replace the blank space for Anonyous and Name/URL comments with a 35x35 image, i added these lines of CSS (for example, just before ]]></b:skin> ):
/* Avatar */
.avatar-image-container img {
background:url(http://i860.photobucket.com/albums/ab162/LeBloggerTemplate/AvatarBlogger.png);
width:35px;
height:35px;
}
(This will resize the small favicon (from 16x16 to 35x35) displayed for OpenID, Wordpress, LiveJournal, Typepad, AIM, the OpenID...)
salut!!! soufiane t'as pas une solution pour moi stp
RépondreSupprimerdsl je c'est que je te fait chier mais je doit le reparer car il y a des gens qui me laisse des commentaires pour les liens morts etc stp aide moi et merci
RépondreSupprimerCe commentaire a été supprimé par l'auteur.
RépondreSupprimer@ ADMINAZ
RépondreSupprimerJe vais t'installer un service de commentaire externe a Blogger, DISQUS
tiens ça m'intéresse aussi pour unautre blog disqus, si tu pouvais faire un article
RépondreSupprimer@ Philippe oui je compte bien, mais ça a pas mal de défaut quand même...
RépondreSupprimer@ ADMINAZ
RépondreSupprimerC'est bon c'est fait .....
OK merci soufiane beaucoup beaucoup
RépondreSupprimerCe commentaire a été supprimé par l'auteur.
RépondreSupprimerCe commentaire a été supprimé par l'auteur.
RépondreSupprimersoufiane dsl pour ton dérangement pour moi mais j'ai réparer les commentaires original de blogger et j'ai enlever les autres j'ai re télécharger mon thème et j'ai chercher le code html des commentaires merci grâce a toi je c'est manipuler blogger merci mais maintenons tu peux me mettre les images dans les commentaires c'est tout et merci beaucoup beaucoup ;))
RépondreSupprimer@ ADMINAZ
RépondreSupprimerMerci d'envoyer 5 commentaires par second et de les supprimer aussi rapidement...
Des commentaires sans rapport avec l'article ...
et merci a toi aussi de m'avoir aider a résoudre tout mes problème tu peux quand tu fera sa avec les articles tu me le fera si tu veux et merci pour tout ;))
RépondreSupprimerSalut Soufiane, merci pour cette astuce vraiment sympa, cependant j'ai eu qlq difficultés a le mettre en place. C'est fait mais il reste un petit hic, les images d'avatar ne s'affichent pas mais le logo de blogger est-ce normal?
RépondreSupprimerpour info j'ai mis le code au dessus de:
[a expr:href='data:comment.authorUrl' rel='nofollow'
data:comment.author]
merci :) si tu peux m'aider a bientot!
@ Pabouch
RépondreSupprimerle logo de blogger (Favicon) s'affiche si le commentateur n'a pas mis d'image dans son profile Blogger....
Regard l'article d'introduction : http://www.leblogger.com/2009/09/image-profil-commentateur-commentaire.html
salut j'avais bien lu l'article, mais le fait est que chez toi j'ai une image (il suffit de voir ce commentaire) et pas chez moi ou j'ai ce logo de blogger, et de toute facon, qd on en a pas, comme j'ai installé ton petit code CSS, c'est bien le petit bonhomme qui apparait, ca ca marche bien.
RépondreSupprimerpas d'idee?
@ Pabouch
RépondreSupprimerC'est de quel blog tu parles, il y en beaucoup dans ta page de profil ....
Est ce que tu as cochez la case pour "Afficher les images du profil sur les commentaires" dans paramètres de blogger ???
Laisse moi l'adresse de ton blog et je vais regarder ça .....
oui c'est vrai que j'en ai qlq uns, c'est le pabouch blog auquel tu as gentiment laissé un message, comme tu as pu le constater, il n'y a pas d'images de ton profil qui ne s'est affiché, http://pabouch.blogspot.com/2009/10/la-batmobile-1million-de.html
RépondreSupprimermerci a+
ok j'ai trouvé d'ou venait le soucis, merci soufiane pour ton temps a bientot!
RépondreSupprimer@ Pabouch
RépondreSupprimertu as fais comment ????
en fait le soucis vient de scripts que j'utilise pour afficher le google map et des videos, et surement aussi du lightbox, du coup je prefere garder mes scripts et attendre une autre methode pour afficher les avatars! merci en tout cas pour ton aide!
RépondreSupprimer@
RépondreSupprimerJe doute que ça soit le cas, mais bon .....
ah bon? parce que qd je bloque ses scripts la (tout ceux qui sont sur la page hébergées par blogspot), les avatars s'affichent, j'ai pas vraiment cherché plus loin en fait.
RépondreSupprimerC'est du chinois pour moi !!!
RépondreSupprimerChinois peut-être mais grand merci : j'ai enfin compris comment envoyer un commentaire... Pas facile de s'initier seule aux technologies modernes à mon age...
RépondreSupprimer@ Cath84
RépondreSupprimerOlala, tu as quel age??? c'est jamais trop tard....
est ce que tu as un blog blogger? parce que je vois que tu n'utilises pas ton compte google.
n'hésite pas à demander si tu as besoin d'aide....
blog blogger ? compte google ? Mais non je n'ai rien de tout ça : j'essayais juste d'envoyer un commentaire sur le blog de ma belle fille partie en Nouvelle Zélande.
RépondreSupprimerGrâce à toi j'y suis arrivée, merci encore.
J'ai 62 ans et non 84
Quoique, si tu m'expliques comment créer un compte google, je pouurai envoyer des photos plus facilement
:P je voudrais aussi crée ma propre blog avec des photos personnalisés.
RépondreSupprimers
RépondreSupprimer@Cath84
RépondreSupprimer62 ans c'est très très jeunzzz :))
@Assurance mutuelle
RépondreSupprimerPour créer un blog, va dans Blogger.com =))
ça va pa marché j c pa pr koi
RépondreSupprimerochek-allayl.blogspot.com
Hi from Indonesia. Thanks for this great tutorial :)
RépondreSupprimerBut I still have problem with Anonymous and URL/Name avatar. Avatar not appear on my blog.
This is my blog http://coratcoretblog.blogspot.com/2010/01/cara-copy-paste-di-compiler-dan-command.html?showComment=1264924431662#c1084303374823830799
@AnggaRifandi
RépondreSupprimerSearch for ]]></b:skin> and just before it add this code:
/* Avatar */
.avatar-image-container img {
background:url(http://blogspot.leblogger.com/divers/avatarb.png);
width:35px;
height:35px;
}
It will show a default image for anonymous comments ....
tel me if it's alright :))
(Indonesia ;) the same as Abu Farhan ;) nice to meet you brother ....)
Hi again. Finally I solved my problem.
RépondreSupprimerApparently there are two this code in my template
<dl id='comments-block' class='comments-block'> and only one that I replace with this one
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
Oh yes, I want to ask about the CSS opening code using ( ) or &123; &123;?
Thank you :)
Sorry, I mean { and } :D
RépondreSupprimerI think this tutorial will helpful for my friend in Indonesia, so I want to make this tutorial using Indonesian language and I will put your blog link in my credit :D
Thanks :)
what does the "{ and }" mean ;)
RépondreSupprimerThe CSS marker for avatars is .avatar-image-container
there's other markers for advanced customization ....
Wow Thanks for the further link :)
Check out this new Blogger Features:
RépondreSupprimerChange Template without losing Widgets.
Hide the sidebar, footer and enlarge post width on Blogger Pages
Look how this post look like:
http://www.leblogger.com/2009/06/template-modele-blogger.html
merci énormément pour ce tuto ! ca a marché nickel sur mon blog ! ;)
RépondreSupprimer=)(
RépondreSupprimertest
RépondreSupprimerj'ai ajouter le code dans mon template mais il y un problème
RépondreSupprimerregarder c'est image
http://img442.imageshack.us/img442/1729/commentpk.gif
j'ai pas trouver le code
expr:name='data:comment.anchorName'/>
voici le code après modifier
http://img256.imageshack.us/img256/9823/comment2p.gif
ça n'a pas l'air de marcher. :(
RépondreSupprimer@Lou
RépondreSupprimerAh bon ;)
après 23 jour no réponse!!!
RépondreSupprimerSofiane un grand merci à toi pour toutes tes astuces ,ca marche nickel !!!
RépondreSupprimerLe seul problème c'est que pour les personnes qui n'ont pas d'image associée à leur profil, Blogger affiche d'office une icone de 16px sur 16px. Avec ce système elle est redimensionnée en 35px sur 35px et forcement dégradée. Voici ma solution:
RépondreSupprimer1. télécharger une icône Blogger assez grande, la redimensionner en 35px sur 35px et l'uploader sur son serveur.
2. Rajouter ces lignes dans le code CSS
.avatar-image-container .avatar-hovercard img {
display: none;
}
.avatar-hovercard {
display: block;
width: 35px;
height: 35px;
background: transparent url(CHEMIN DE L'ICÔNE SUR LE SERVEUR);
}
Ca a l'air de bien fonctionner chez moi
@Eric T. Lurick
RépondreSupprimerMerci pour le commentaire, je ne me rappel plus si j'ai testé la classe avatar-hovercard ....
Merci Soufiane
RépondreSupprimerthanks, this work perfectly.
RépondreSupprimer@Ret-net
RépondreSupprimerYou're welcome °__°
Je viens chercher de l'aide ici. Dernier recours. Je n'en-peux-plus. Je suis pas douée pour tous ces trucs informatiques... J'ai ce template pour mon blog: http://btemplates.com/2008/blogger-template-notepad/
RépondreSupprimerLes avatars ne s'affichent pas dans les commentaires. J'ai essayé de suivre étape par étape le tuto mais je ne trouve même pas le code "dl id='comments-block'". Par contre j'ai "dl id='comments'" tout court. Bref, si la première étape ne marche pas, je ne parle même pas de la suivante. J'espère vraiment, vraiment que tu sauras m'aider ! Merci d'avance ! :-)
Rectification: j'ai réussi à tout mettre comme il faut dans le code html. J'ai même mis le bout de codes qui permet d'avoir une image pour les commentaires anonymes. Mais je n'ai pas d'avatar à côté des commentaires malgré tout... Help. xD
RépondreSupprimerje teste...
RépondreSupprimerwow c'est du travail!, je vous remercie ...
RépondreSupprimeressai ?
RépondreSupprimertest
RépondreSupprimerSuper, merci pour cette astuce Soufiane !
RépondreSupprimerJe cherchai à le faire depuis un petit moment sans jamais réellement m'y attaquer.
Ca marche nickel.
Je vais me lancer plus sérieusement dans l'apprentissage du langage CSS, Java, HTML5 et le reste, et ton blog reste vraiment une mine d'or ^_____^.
test
RépondreSupprimertest
RépondreSupprimerCe commentaire a été supprimé par l'auteur.
RépondreSupprimerBonjour Soufiane,
RépondreSupprimerj'ai bien tout suivi à la lettre mais lors de l'enregistrement du code HTML modifié selon tes indications, je n'arrive pas à le sauvegarder. Un message d'erreur apparaît.
Comme tu peux voir, ma photo ne s'affiche pas à côté du commentaire (depuis une semaine) mais le lien en cliquant sur mon nom fonctionne correctement. Que puis-je faire ???
Merci beaucoup pour ton aide !
Anyzovka
*
SupprimerCe commentaire a été supprimé par l'auteur.
RépondreSupprimer