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