Affichage Photos commentateurs et couleur de fond différentes

En 2007, nous avions enseigné une technique pour afficher les photos des commentateurs qui disposent d’une photo de profil sur Blogger. Mais, depuis quelques temps, Blogger permet d’afficher les photos des commentateurs même sur les blogs qui ont choisis d’intégrer un formulaire des commentaires à la fin des articles, ce qui a rendu notre première astuce à moitié hors service. Bien que les bulles qui encadrent les commentaires s’affichent encore et qu’il y a moyen de différencier les commentaires des lecteurs de celui du proprio du blog par la couleur de fond, les photos elles ne s’affichent plus.

Avant de voir comment remédier à ce problème, expliquons les méthodes fournies par Blogger pour afficher les photos de profil sur les commentaires (quelqu'un m'avait contacté pour écrire cet article il y a 3 semaines, mais depuis plus aucun signe de vie malgré mon accord).

Si vous désirez afficher les photos des commentateurs sur un Blog Blogger, rien de plus simple. Il suffit d’aller sur « Paramètres », puis sur « Commentaires » et là, cocher sur "oui" pour l’option «Afficher les photos de profil sur les commentaires ».

Au cas où les photos ne s’affichent pas du tout malgré l’activation de l’option citée ci-haut, utilisez cette méthode de Soufiane :

1. Aller sur « Modifier le code html » et trouvez l’une  de deux lignes suivantes :

<dl id='comments-block'>

Ou

<div id='comments-block'>

2. Remplacez la ligne que vous trouverez par 

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Notez que si vous remplacez le <div id='comments-block'>, il vous faudra chercher le </div> qui clôture celui-ci et le remplacer par </dl>

Au cas où vous ne trouvez pas les premières lignes indiquées, cherchez plutôt la troisième. Si elle existe, passez à l’étape suivante.

3. Trouvez la ligne suivante :

<a expr:name='data:comment.anchorName'/>

Remplacez-la par celle-ci :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='50px' style=' margin: 25px 0 0 0;' width='50px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Ajouter une bulle avec différentes couleurs de fond pour les commentaires

Pour avoir une bulle entourant les commentaires avec couleur de fond différent pour les commentaires de l’auteur du blog et ceux des visiteurs :

1. Dans le css de votre blog, mettre les codes suivants et effacez ceux similaires qui existaient avant (voir la nomination en gras)

.comment-body { background: url(http://chenkaie.googlepages.com/bg_comment.gif) no-repeat 35px 0px; padding-top:1px; }
.comment-body p { background:#d0d0d0; margin: 5px 0 0px 0; border: 6px solid #e5e5e5; line-height: 1.6em; padding: 7px 7px 7px 13px; }
.comment-body-author { background: url(http://chenkaie.googlepages.com/bg_comment.gif) no-repeat 35px 0px; padding-top:1px; }
.comment-body-author p { background:#ccdacc; margin: 5px 0 0px 0; border: 6px solid #e5e5e5; line-height: 1.6em; padding: 7px 7px 7px 13px; } .comment-author { margin: 0px 0px 0px 0px; padding: 0 10px 0 40px; color: #777; font-size: 16px; font-weight:bold; background: url(http://www.blogblog.com/tictac/comment_arrow.gif) no-repeat 20px 7px;}

* html .comment.favicon { /*IE only*/

  margin: 30px 0 0 0;

}

2. Juste après le code suivant

<b:loop values='data:post.comments' var='comment'>

Mettre

<!-- kaie added for comment-body-author highlight begenning1-->
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<!-- kaie added for comment-body-author highlight ending1-->
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if> <!-- kaie added for comment-body-author highlight -->

3. Enregistrez votre modèle et youpi !

Vous avez vos commentaires qui s’afficheront avec photos de leurs auteurs en plus d’une différenciation des commentaires du proprio du blog de ceux des visiteurs par la couleur de fond.