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.
11 commentaires:
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
bonjour c'est ça que j'imaginais dans ignition ... est ce que c'est prévu ou pas ?
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.
Bonjour annak
moi j'ai un petit probleme pour centrer le chiffre
Merci pour ton aide
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)
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
Bonjour :) ton formulaire de contact est en page pop-up et non intégré à ton blog, le problème vient peut-être de là.
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.
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'
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.
Bonjour Anna ! ESt-ce que cette méthode a un équivalent Overblog ?
Enregistrer un commentaire
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)