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

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.

Regardez c'est ici : http://www.bloggerbuster.com/2009/09/profile-avatars-for-blogger-comments.html

test

Wow je suis très impressionner Soufiane, blogger buster qui fait un lien vers ton blog.

oui j'allais oublier merci pour tutoriel ça marche nickel, chrome ....

Je suis vraiment jalouse tu devrais avoir pleins de visites. mais pourquoi tu n'as pas mis un traducteur.

Merci soufiane

@ YeahS

Merci.

@ YeahS
Sur ton conseil j'ai ajouter un Traducteur, mais que pour cette page. Donc merci ...

Ce commentaire a été supprimé par l'auteur.

Salut Soufiane...
Good 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

@ NicTeam
Merci 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

@Soufiane LeBlogger

lollll...
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
Tu 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

@ NicTeam
Ah 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
ce 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(

ok soufiane merci je vais essayer

soufiane 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

ou 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

@ ADMINAZ
j'ai vraiment pas le temps, maintenant Aziz je verais ça plustard.

ok :(( merci ~x(

@Soufiane LeBlogger

Oui, 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
J'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

Oui 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

Bonjour,
Je 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
Un 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(

Ola Soufiane

tout 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
Merci 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 :((

La rançon de la GLOIRE !!! toutes mes félicitations !!!

En ce qui concerne blog Buster, c'est justement celui dont je parlaispour l'anglais.


Pour l'avatar anonyme, c'est fait à l'instant.

@ Hugo
J'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 :((

@ ADMINAZ
Ajoute moi en tant qu'admin...

ok inscrit toi sur la page d'accueille il y a inscription connexion fait inscription

@ ADMINAZ
je 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

thank you so much for this solution :)

.

Ok Soufiane,

dans l'immédiat votre nouvel avatar anonyme me convient très bien
je viens de le mettre à jour

orbigado .

@ Zons
Thank 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 :(( :(( :(( :((

merci beaucoup pour tous tes articles ! ils deviennent incontournables pour faire la mise en page sur blogger !

testing

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif

@ ADMINAZ
Je 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,

ti mouffi roujir

@ Peter
So it's working ??
you look so beautiful in that picture hahahahah

soufiane sayer je t'ai mit 2eme admin

@ ADMINAZ
Je 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

test

tes with url

hi, i have question, how to show avatar if i use name/url?,
i see on your blog you use http://www.leblogger.com/ and avatar shown

thanks

@ Kelpo
To 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

dsl 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

Ce commentaire a été supprimé par l'auteur.

@ ADMINAZ
Je 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

@ Philippe oui je compte bien, mais ça a pas mal de défaut quand même...

@ ADMINAZ
C'est bon c'est fait .....

OK merci soufiane beaucoup beaucoup

Ce commentaire a été supprimé par l'auteur.

Ce commentaire a été supprimé par l'auteur.

soufiane 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 ;))

@ ADMINAZ
Merci 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 ;))

Salut 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?
pour 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
le 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.
pas d'idee?

@ Pabouch
C'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
merci a+

ok j'ai trouvé d'ou venait le soucis, merci soufiane pour ton temps a bientot!

@ Pabouch
tu 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!

@
Je 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.

C'est du chinois pour moi !!!

Chinois peut-être mais grand merci : j'ai enfin compris comment envoyer un commentaire... Pas facile de s'initier seule aux technologies modernes à mon age...

@ Cath84
Olala, 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.
Grâ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.

s

@Cath84
62 ans c'est très très jeunzzz :))

@Assurance mutuelle
Pour créer un blog, va dans Blogger.com =))

ça va pa marché j c pa pr koi

ochek-allayl.blogspot.com

Hi from Indonesia. Thanks for this great tutorial :)

But 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
Search 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.

Apparently 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 &#123 and &#125 :D

I 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 "&#123 and &#125" mean ;)
The 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:
Change 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 ! ;)

=)(

test

j'ai ajouter le code dans mon template mais il y un problème
regarder 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. :(

@Lou
Ah bon ;)

après 23 jour no réponse!!!

Sofiane un grand merci à toi pour toutes tes astuces ,ca marche nickel !!!

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

1. 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
Merci pour le commentaire, je ne me rappel plus si j'ai testé la classe avatar-hovercard ....

Merci Soufiane

thanks, this work perfectly.

@Ret-net
You'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/
Les 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

je teste...

wow c'est du travail!, je vous remercie ...

essai ?

test

Super, merci pour cette astuce Soufiane !
Je 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

test

Ce commentaire a été supprimé par l'auteur.

Bonjour Soufiane,

j'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

Ce commentaire a été supprimé par l'auteur.