Vos commentaires avec bulles et photos

By
Advertisement


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.



14 commentaires:

  1. Salut Rodney,
    Je ne savais pas qu'on était susceptible dans la blogosphère. Je ne voulais pas te vexer et d'ailleurs je ne critique pas le contenu de ton blog. Ce que je trouve dommage, c'est l'interface graphique de ton, pour un blog qui s'appelle "blogger au bout du doigt".
    Il y a plein de blogs moins "jolis" que le tien et je ne leur laisserai pas un tel commentaire car ils ne s'appelle pas "blogger au bout du doigt", ce nom laisse tellement croire à une maitrise de blogger, alors que ton interface graphique montre le contraire. Alors puisque tu demandes ma proposition à la place de la critique, change ou le nom du blog, ou l'interface graphique, et ne te vexe pas, car ce n'est pas digne d'un bloguer.
    Chaleureusement.

    RépondreSupprimer
  2. Yony, ce n'est pas la critique qui m'énerve. Dans ton premier commentaire tu n'était pas clair, tu parlais d'un désordre sans préciser lequel et proposait ton blog comme solution. J'avais juste cru que tu faisais la pub du tien. Tu conviendras avec moi que ça, ce n'est pas bon.

    Maintenant que tu es plus clair, même si tu la joue un peu trop cherrif, ton commentaire est publié et je te remercie pour le conseil.

    Le but de ce blog est de montrer comment intégrer sur un modèle simple, des fonctionnalités qui n'était pas prévue pas blogger. Tu excusera donc mon blog d'être un exemple.


    Merci pour le conseil, on verra ce qu'on pourra améliorer (je pense surtout à la bannière) pour le reste on verra.


    Bye et bonne chance pour ton blog.

    P.s. : Au moins, tu m'a donné un autre modèle à étudier et voir les fonctionnalité que je pourrais offrir à mes lecteurs.

    RépondreSupprimer
  3. Ia ora na,

    L'idée est super, j'ai essayé de mettre le code pour que les photos s'affichent dans les commentaires et je n'ai toujours rien. Ne manque-t-il pas quelque chose?


    @+

    RépondreSupprimer
  4. D'accord quick, je vais voir ce qui ne vas pas.

    Sinon, je pense à proposer une autre astuce pour afficher les photos.

    Il se pourrait que cela soit l'objet d'un nouveau article. donc, reste en contact avec le blog (souscription rss ou e-mail) et tu sera servi.

    RépondreSupprimer
  5. Marche pas, j'arrive pas a faire afficher les commentaires. C'est toujours dans une fenetres pop up. Ajout d'un lien pointant sur ton blog dans un des sites que j'administre 321bastille.blogspot.com

    RépondreSupprimer
  6. Il semble j'ai omis de mettre une partie de code ici, je vais voir et je met l'article à jour bientôt.

    Il pourrait se retrouver en homepage si cela est fait.

    RépondreSupprimer
  7. Salut Rodney!
    j'ai essayé plusieurs fois d'integrer ce code pour avoir les commentaires avec des bulles mais je n'y arrive jamais. J'ai reçu en réponse ce message:Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
    Message d'erreur XML : Content is not allowed in prolog.
    Peux tu bien m'aider?
    http://doigtaubut.blogspot.com
    http://souleymanedieye.blogspot.com

    RépondreSupprimer
  8. Une astuce sympa, couplé avec les avatars de mybloglog ça peut-être pratique :)

    Sources: singpolyma.net et purplemoggy.blogspot.com ;)

    a+

    RépondreSupprimer
  9. @ tOiNOU : C'est vrai que ça serait vraiement sympa de couplé cette astuce avec les avatars mybloglog.

    Pour les sources que tu met, il n'indiquent rien sur la question (ou comment y par venir).

    Au fait, si tu crois que je n'ai pas cité mes sources, sache juste que je ne me suis pas inspiré de ces articles (que je n'avais même jamais vu jusqu'à aujourd'hui). Tu remarquera des différences significatives entre ceux qu'on y propose et ce que je propose. J'ai eu l'astuce en fouillant dans le modèle Kubrick 3 colonnes que j'utilisais sur mon blog Kanga ngaï photo (maintenant "Zoom"). Je crois qu'elle vient de Chenkai (dont le lien du blog apparaît dans les codes).

    Mais, il est vrai qu'il faudrait vraiment coupler cette astuce avec les avatars mybloglog.

    @ Les autres : L'astuce marche. Preuve, j'ai republier cet article à cette date (Une année après les 7 premiers commentaires)parce qu'à deux reprises je suis parvenu à insérer ces codes dans mon blog en suivant la méthode enseignée.

    RépondreSupprimer
  10. Non non, les sources sont la pour compléter le code et donner plus d'infos :D car apparemment, les lecteurs ont du mal à l'implémenter :S

    Sinon, oui Chenkai s'est inspiré des deux sources que j'ai cité :)

    RépondreSupprimer
  11. @ tOiNOU : C'est vrai je crois que Chenkai s'est inspiré de Purplemoggy, puisque dans les articles il semble avoir été le premier à le composer. Merci pour le tuyaux.

    Cet article fut publié il y a 1 année et après vérification, j'ai vu que tout marche bien.

    Je crois plutôt que les lecteurs avaient du mal à effacer juste le code qu'il fallait pour le remplacer par l'autre. C'est pourquoi j'ai raccourci le code de l'étape 3, afin qu'ils voient bien par quoi commence le code à effacer et par quoi il se termine.

    En mettant les codes enseignés par Singpolyma et Purplemoggy, ils auront certes des photos mais pas dans le même style qu'ici. Mais, bof, si l'essentiel est fait, il n'y a pas de quoi.

    A+

    RépondreSupprimer
  12. Bonsoir Rodney,

    je dis bravo pour votre merveilleux blog et vous remercie chudement pour tout votre travail.Je tenais à vous rassurer sur le fait que votre code fonctionne parfaitement.La preuve s'il en est à ce lien tout en bas de la page ( http://finance-invest-analytical.blogspot.com/2008/03/risc-group-etude-globale.html?showComment=1218440460000#comment-c2165630639703652385 ), je viens de le poser ce soir 13 août à 00h10 et il fonctionne parfaitement.


    Merci encore Rodney et je vous souhaite une très bonne soirée.

    Au revoir.

    RépondreSupprimer
  13. Salut =)
    Félicitations pr ton article il est génial, grâce à toi j'ai pu "relooker" mes commentaires.
    Mais il me reste un petit problème :
    Je n'arrive pas à savoir comment créer un espace entre 2 commentaires différents.
    VOIR ICI --> http://img16.imageshack.us/img16/5503/commentaire.png
    Je voudrais faire un espace entre la date du 1er commentaire et le pseudo du 2ème.

    Merci d'avance pr ton aide ;)

    RépondreSupprimer
  14. Bonjour,

    C'est juste un petit coucou à Rodney pour son superbe boulot. Je ne sais pas comment il fait pour gérer son temps vu la masse de travail qu'il fournit (plusieurs blogs sur plein de sujets différents). Je suppose que c'est pour cela qu'il néglige un peu l'aspect graphique de son blog.

    Encore merci Rodney

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT