6 oct. 2010

(Blogger) Numéroter les commentaires

Après avoir vu comment personnaliser vos réponses aux commentaires et ajouter une bulle dénombrant les commentaires, voici comment numéroter vos commentaires.


Une astuce assez rapide à réaliser :

On commence par la partie CSS, 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
.comm-num a:link, .comm-num a:visited {color: white !important;text-decoration: none !important;background: url(http://i46.tinypic.com/nntcue_th.png) no-repeat;width: 64px;height: 64px;float: right;display: block;margin-right: 5px;margin-top: -15px; /*comments-counter position*/text-align: center;font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;font-size: 15px;font-weight: bold;padding-top:15px}
.comm-num a:hover, .comm-num a:active {color: gray !important;text-decoration: none !important;}
http://i46.tinypic.com/nntcue_th.png est l'adresse de votre bulle
width: 64px;height: 64px : ce sont ses dimensions

Passons maintenant à la partie configuration, toujours dans Présentation > Modifier le code HTML > Vous cochez Développer des modèles de gadgets.

Vous recherchez (Edition > Rechercher dans le menu de votre navigateur)
<b:loop values='data:post.comments' var='comment'>
et vous collez juste avant
<script type='text/javascript'>var CommentsCounter=0;</script>
Vous recherchez maintenant (Edition > Rechercher dans le menu de votre navigateur)
<data:commentPostedByMsg/>
et vous collez juste après
<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
Vous enregistrez le modèle et admirez le résultat.

J'ai utilisé la même bulle que pour les titres, Dblab, qui propose cette astuce, expose d'autres modèles à sauvegarder.

17 commentaires:

  1. et bien que de choses sympa a savoir sur ton blog
    franchement tu est dans le haut de mes favoris section astuces de blogs
    merci Annak

    RépondreSupprimer
  2. Bonjour
    Je n'arrive pas à le faire mais je suis over-blog est-ce normal
    merci
    http://www.relookette.com

    RépondreSupprimer
  3. Bonjour Véronique :) oui, c'est normal, c'est une fonction réservée à Blogger et je n'ai jamais rien vu de tel pour OverBlog :(

    RépondreSupprimer
  4. Bonsoir Anna
    Merci pour toutes ces astuces. Peux tu me dire comment mettre la bulle avec le n° du commentaires plus à gauche.
    Merci à toi

    RépondreSupprimer
  5. Bonjour Viclanel,
    il suffit de rajouter une marge à droite dans les 2 lignes :
    .comm-num a:link, .comm-num a:visited {margin-right:200px;}
    .comm-num a:hover, .comm-num a:active {margin-right:200px;}
    C'est pour quel blog ? car les commentaires ne se présentent pas sous cette forme sur http://viclanel.blogspot.com/

    RépondreSupprimer
  6. Merci aussi pour cette astuce ^_^
    Je n'ai eu aucune soucis avec celle-ci. J'essayerai de modifier l'image et les dimensions.

    RépondreSupprimer
  7. Super pour la numérotation ! mais je n'arrive pas à avoir la bulle ? Merci.......

    RépondreSupprimer
  8. Bonjour merci pour cet aide, mais moi ça me fait un truc tres moche à la place de la bulle ! je ne sais plus comment faire !
    Pouvez vous m'aidez SVP SVP :(

    RépondreSupprimer
  9. L'image de la bulle n'existe plus à cette adresse.
    IL faut changer le lien, mais je ne sais pas par quoi le remplacer pour le moment.
    Quelqu'un le saurait-il ?

    RépondreSupprimer
  10. Avant "]]>", j'ai mis le texte suivant et ça marche !! :-)

    .comm-num a:link, .comm-num a:visited {color: white !important;text-decoration: none !important;background: url(http://4.bp.blogspot.com/_RpcwHx8W2XM/TSV4W7R9EfI/AAAAAAAABDQ/5sw9e9G7lNk/s1600/Blogger%2Bcomment%2Bbubble%2B%252816%2529.png) no-repeat;width: 50px;height: 64px;float: right;display: block;margin-right: 5px;margin-top: -15px; /*comments-counter position*/text-align: center;font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;font-size: 15px;font-weight: bold;padding-top:5px}
    .comm-num a:hover, .comm-num a:active {color: gray !important;text-decoration: none !important;}

    Merci Anna !

    RépondreSupprimer
  11. Comment me faire une belle bannière??? la mienne est moche et je n'arrive pas à cadrer le dessin. Merci de tous ces renseignements;
    Lafeedulogis43.over-blog.fr/

    RépondreSupprimer
  12. Extra ton site !

    merci car j'étais très mal suite à un changement involontaire de modèle, j'avais perdu la numérotation classique des commentaires

    RépondreSupprimer
  13. en fait je rencontre un problème. La nuémrotation repart à 1 dès qu'on change de page (>200 commentaires, >400 comenbtaires etc...)

    vous avez une solution ?

    Merci pour votre aide

    RépondreSupprimer
  14. l'adresse de mon site est cftchp.blogspot.com

    RépondreSupprimer
  15. bon, j'ai trouvé une solution en récupérant un de mes vieux codes, je n'ai plus les bulles mais le résultat est ok.

    RépondreSupprimer
  16. bonjour,

    Le code ne fonctionne pas sur mon blog vous savez pourquoi?
    Pourtant je suis à la lettre votre code

    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)