5 oct. 2010

(Blogger) Ajouter une bulle avec le nombre de commentaires

Une jolie astuce trouver sur un site anglais pour rajouter une bulle à droite du titre de l'article. Dans cette bulle, le nombre de commentaires présents dans l'article.

Un exemple :


D'autres bulles sont disponibles sur ce site, BdLab.

Pour ceux qui ne comprennent pas l'anglais, voici comment réaliser cette astuce.

Vous allez dans Présentation > Modifier le code HTML > Vous cochez Développer des modèles de gadgets.

Vous recherchez la ligne (Edition > Rechercher dans le menu de votre navigateur)
]]></b:skin>
qui marque la fin du CSS et juste avant vous collez

.comment-bubble {float : right;width : 48px;height : 48px;background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;font-size : 18px;margin-top : -15px;margin-right : 2px;text-align : center;
position:float;}

Si vous choisissez une autre image, vous modifierez son adresse qui est en rouge et peut-être ses dimensions en bleu.

Ensuite, on passe à la partie configuration : toujours dans Présentation > Modifier le code HTML, vous recherchez (Edition > Rechercher dans le menu de votre navigateur)
<b:if cond='data:post.link'>
que vous remplacez par
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>

Vous cliquez sur Enregistrer le modèle et c'est tout. Ce n'est pas très compliqué à réaliser et le résultat est sympa.

17 commentaires:

  1. hello Annak, sympa cette astuce je l'avais déja vu sur un blog ami mais il était sous wordpress et je croyait que cela fonctionnais pas sous blogger, en tout cas merci a toi de partager celle-ci

    RépondreSupprimer
  2. bonjour c'est ça que j'imaginais dans ignition ... est ce que c'est prévu ou pas ?

    RépondreSupprimer
  3. Dans le CSS d'Ignition, la bulle est placée dans le titre de l'article. Selon moi, elle est décorative et n'a pas pour but de faire apparaître le nombre de commentaires.

    RépondreSupprimer
  4. Bonjour annak
    moi j'ai un petit probleme pour centrer le chiffre

    Merci pour ton aide

    RépondreSupprimer
  5. Bonjour HepCat, dans la ligne de CSS
    .comment-bubble {float : right;width : 48px;height : 48px;background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;font-size : 18px;margin-top : -15px;margin-right : 2px;text-align : center;
    position:float;}
    tu joues avec les marges pour le centrer :
    margin-right, margin-left,margin-top,margin-bottom
    (droite,gauche,haut,bas)

    RépondreSupprimer
  6. Bonsoir,

    Je viens d'essayer mais ça ne fonctionne pas, cela me donne un message d'erreur :
    "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 : XML document structures must start and end within the same entity."
    Peux tu m'aider ? Merci


    Mon blog : http://mescrearienquamoi.blogspot.com

    RépondreSupprimer
  7. Bonjour :) ton formulaire de contact est en page pop-up et non intégré à ton blog, le problème vient peut-être de là.

    RépondreSupprimer
  8. Génial ! La bullel n'apparaît que sur certains articles et pas sur d'autres bien qu'il y ait des com'.... merci c'est génial sinon.... et dans les com' je n'arrive pas à la faire paraître ! Merci de tes conseils précieux.

    RépondreSupprimer
  9. Super ça marche ! c'est juste que je n'avais pas mis de titre aux articles auprès desquels la bulle n'apparaissait pas ! donc si ça peut servir à d'autres. Merci pour l'astuce, c'est sympa.... maintenant il faut que je puisse mettre la bulle au niveau des com'

    RépondreSupprimer
  10. Bonsoir Annak,

    Mon blog est le suivant: http://www.ltpaterson.com/
    J'ai essayé votre astuce seulement aprés avoir modifier le code html, aucune bulle n'apparait mais seulement un chiffre à côté du titre de l'article. Pouvez m'aidez s'il vous plait.
    En tout cas je vous remercie pour le travail que vous fournissez sur ce blog. Il m'aide à personnaliser le mien jusqu'au bout des doigts.

    RépondreSupprimer
  11. Bonjour Anna ! ESt-ce que cette méthode a un équivalent Overblog ?

    RépondreSupprimer
  12. Bonjour,
    Cela fait deux fois que j'effectue vos directives pour obtenir la bulle des commentaires à droite mais je n'obtiens aucun résultat bien que tout semble correctement effectué ? Y a t-il des changements ?
    D'avance, merci

    RépondreSupprimer
  13. Merci pour les astuces. Je viens de mettre mes bulles et tout fonctionne.
    Merci beaucoup pour ce blog riche en conseils!
    A très vite!

    RépondreSupprimer
  14. Bonjour, merci pour ce bel article et le partage de ton savoir.
    ...mais ça ne marche pas sur notre blog.
    (http://grrrf.blogspot.fr

    Merci pour ton aide !

    RépondreSupprimer
  15. Bonjour, très beau travail, très utile. BRAVO.
    Je souhaiterai supprimer le liens X commentaires en bas de mes messages étant donné que j'utilise cette superbe astuce pour signaler le nombre de commentaires. Comment puis-je faire?
    Merci de ton aide.

    RépondreSupprimer
  16. Bonjour, Merci pour cette astuce ! Par contre est-ce normal que la bulle de commentaire n'apparaisse que sur la version mobile de mon blog ?
    Merci d'avance.
    Mily

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)