Couleur de fond différente pour les commentaires de l'auteur du blog

J'avais dernièrement publié un article sur la possibilité d'afficher les photos des auteurs des commentaires avec une couleur de fond différente pour les comentaires du proprio du blog. Seulement, cette astuce était basée sur l'insertion d'une image comme fond avec seulement la même couleur verte, ce qui fait beaucoup ne pouvaient incorporer cette astuce dans leurs blogs car difficile à marier avec le reste du design.

C'est pourquoi, aujourd'hui nous allons voir une astuce simple qui permet, sur n'importe quel modèle blogger, d'avoir une couleur de fond et des textes différent pour les commentaires de l'éditeur du blog.

1. Se connecter à Blogger, aller sur "mise en page" puis sur "modifier le code html". Cocher sur la case "développer des modèles de gadget"

2. Juste avant la balise ]]></b:skin>, mettre le code suivant :

.comment-body-author {
background: #E6E6E6; /* couleur de fond*/
color: #000; /* couleur du texte*/
}

Pour avoir une image faisant office de couleur de fond, mettez plutôt le code suivant :

.comment-body-author {
background: #E6E6E6 url("http://url-de-limage.gif"); /* Image de fond, couleur s'affiche si image pas disponible*/
color: #000; /* couleur du texte*/
}

Remplacez http://url-de-limage.gif par le lien vers l'image que vous aurez hébergée quelque part sur le net.

Pour le reste du code css, les margins, paddings et autres, je vous conseille de vous référer au css de vos commentaires, copiez juste les données restantes avant le } et ce sera bon.

3. Insérer les codes en rouge à l'emplacement indiqué :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

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

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

4. Enregistrez le modèle puis allez admirer le résultat.

@+