Vos commentaires avec bulles et photos

Sur mon blog, quand vous laissez un commentaire, celui-ci se retrouvera dans une bulle, un peu comme sur une Bande Dessinée. En plus, si vous avez mis une photo pour votre profil sur blogger, celle-ci s'affichera avec une flechette qui pointe vers votre nom. Au cas où blogger ne dispose d'aucune photo pour votre profil, une image de remplacement apparaîtra.

Cette fonctionnalité était disponible sur modèle Kubrick que j'ai installé sur mon blog Kanga ngaï photo. J'avais aussi voulu l'avoir sur ce blog, c'est ainsi que je suis allé voir dans son code source et ai déniché les éléments nécessaires pour arriver à cette fin.

Voici ce que j'ai fait :

1. Pour avoir de bulle encadrant mes commentaires, j'ai remplacer tout le code css des commentaires par celui-ci :

/* Comments----------------------------------------------- */

#comments { padding-top: 10px; color: #555; font-family: 'Trebuchet MS'; }
#comments h4 { margin: 0px; padding: 8px 0 0 30px; font-size: 20px; color: #555; background: url(http://www.blogblog.com/tictac/bubbles.gif) no-repeat; height: 29px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ } #comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; } .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;}

.comment-footer { padding: 5px 0px 3px 30px;}
.comments-block .comment-body { background: #fff; }.comments-block .comment-footer{ margin: 0 0 0 -10px; }
.comment-title{ margin: 0 0 0 30px;}
.deleted-comment { font-style:italic; color:gray; }
.description { text-align:center; }

.commentphoto {
margin: 25px 0 0 0;
}
* html .commentphoto { /*IE only*/
margin: 30px 0 0 0;
}


.commentphoto img{
float: left;
padding: 2px;
border: 1px solid #333;
margin: -25px 10px 0px 40px;
}
* html .commentphoto img { /*IE only*/
float:right;
margin: -25px 0 0 0;
}

.commentelem {
}

2. Pour afficher les photos à côté des commentaires, j'ai ajouter les codes en bleu ci-dessous juste après le code en rouge :

]]> </b:skin>

<script src='http://chenkaie.googlepages.com/CommentPhoto.js' type='text/javascript'> </script>
<script type='text/javascript'>
// <![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','commentelem',1,'commentelem','http://chenkaie.blogspot.com',
'black','gray');});
//]]>
</script>

3. Pour que ces modifications s'affichent sur les pages avec commentaires, j'ai recherché le bloc de code commençant par :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>

Et se terminant par :

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

4. J'ai sélectionné tout le bloc ci-haut et l'ai remplacé par celui-ci :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block '>
<b:loop values='data:post.comments' var='comment'>
<div class='commentphoto'/>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentelem'>
<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>
<data:commentPostedByMsg/>

<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<br/><data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</dt>
<!-- 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 -->
<dd class='comment-footer'>
</dd>
</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

NB : Si vous aviez installé le formulaire pour les commentaires à la fin des articles, il faudra le réinstaller après l'opération.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.