Como numerar os comentários de seu blog

em 6 de abril de 2011

numerar comentários no blog Desde quando comecei a mexer no template que uso em meu blog (sim, jamais mudei de template) eu adicionei um recurso muito legal e que faz tempo queria ensinar: como numerar automáticamente todos os comentários do blog.
Daí, outro dia, a Giu Lopes, do Espaço da Giu e a Ana Paula Santiago, do Inventando casa, pediram que eu ensinasse comofaz e eu prometi. Promessa é dívida, então vamos lá?

Talvez você se pergunte pra que serve numerar os comentários do blog… Eu uso para os sorteios que faço. Mas tem muitas outras utilidades, claro. E por ser automático você faz uma vez e esquece. Prático, né?

Para começar eu quero que você repita comigo: sou corajoso/a e não temerei nada.
Repetiu? Agora faça backup de seu blog para ter mais segurança. Agora pode confiar em mim e mãos à obra:

Abra o painel de seu blog e clique em Editar html. Quando abrir a página com o código-fonte de seu blog marque a caixinha Expandir modelos de widgets. Agora localize este trecho:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>        
<b:loop values='data:post.comments' var='comment'>         
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>         
<a expr:name='data:comment.anchorName'/>         
<b:if cond='data:comment.authorUrl'>         
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>         
<b:else/>         
<data:comment.author/>         
</b:if>         
<data:commentPostedByMsg/>         
</dt>         
<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>         
<dd class='comment-footer'>         
<span class='comment-timestamp'>         
<a expr:href='data:comment.url' title='comment permalink'>         
<data:comment.timestamp/>         
</a>         
<b:include data='comment' name='commentDeleteIcon'/>         
</span>         
</dd>         
</b:loop>         
</dl>

E substitua todo ele por este outro:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'> <script type='text/javascript'>var CommentsCounter=0;</script>        
<b:loop values='data:post.comments' var='comment'>         
<div class='' expr:id='data:comment.id'>         
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>         
<a expr:name='data:comment.anchorName'/>         
<b:if cond='data:comment.authorUrl'>         
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>         
<b:else/>         
<data:comment.author/>         
</b:if>         
<data:commentPostedByMsg/>         
<span class='comment-number'>         
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>         
<script type='text/javascript'>         
CommentsCounter=CommentsCounter+1;         
document.write(CommentsCounter)         
</script>         
</a>         
</span>         
</dt>         
<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>         
<dd class='comment-footer'>         
<span class='comment-timestamp'>         
<a expr:href='data:comment.url' title='comment permalink'>         
<data:comment.timestamp/>         
</a>         
<b:include data='comment' name='commentDeleteIcon'/>         
</span>         
</dd>         
</div>         
</b:loop>         
</dl>

Você concluiu a parte mais difícil. Agora vamos dar estilo ao seu numerador de comentários. Encontre esta tag:

]]</b:skin>

E acima dela cole este código:

.comment-number {        
float: right; /ALTERE A POSIÇÃO DOS NÚMEROS         
background: #cccccc no-repeat; /ALTERE A COR DE FUNDO         
width:20px; /ALTERE A LARGURA DO FUNDO         
height:20px; /ALTERE A ALTURA DO FUNDO         
margin-right: 15px;         
margin-top: -25px; /*comments-counter position*/         
text-align: center;         
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif; /ALTERE A FONTE         
font-size: 18px; /ALTERE O TAMANHO DA FONTE 
}            
.comment-number a:link, .comment-number a:visited {           
color:#445566; !important; 
text-decoration: none !important;           
}            
.comment-number a:hover, .comment-number a:active {      
color: #FF9933 !important;           
text-decoration: none !important;           

Onde eu marquei em  com este sinal # são os códigos das cores. O primeiro se refere ao fundo onde aparecerão os números. E os outros 2 se referem à cor dos números.Este código pode ser modificado para mudar as cores conforme você desejar.Para conhecer todos os códigos das cores siga o link: Tabela de cores.

Caso deseje alterar a fonte dos números mude onde está escrito font-family. Se quiser alterar o tamanho dos números altere em font-size. Clique em Visualizar e se não apresentar erro, salve.

Importante:
A numeração de comentários só estará visível quando você clicar em um título de qualquer postagem. Daí abre a página da postagem e você verá os comentários numeradinhos, bonitinhos. Também fica visível se seus comentários são do tipo que aparecem embaixo dos posts.


Quer aprender mais uma coisa legal?
Existem atualmente 3 tipos de formulário de comentários no Blogger.
  1. Janela pop up► é a que eu uso aqui atualmente.
  2. Página inteira► ao clicar para comentar abre uma outra página, “fora” do blog.
  3. Postagem abaixo incorporada►mostra o formulário de comentários abaixo do post a ser comentado. Nesta os comentários numerados aparecem de cara. Nas outras 2 precisa estar na página do post para ver.
Caso queira trocar a posição de seu formulário de comentários do blog vá em Configurações e clique em Comentários. Role a página até achar isto:
image
Escolha a opção que deseja e salve. Nesta página também é possível escolher se seu blog aceita ou não comentários anônimos, e muitas outras coisas. Bom, né?

Importante:
Há um tutorial mais moderno, para os modelos de design do Blogger.
Leia aqui:

Como numerar os comentários do blog e manter o recurso Responder


Gostou, quer ter em seu blog mas não tem tempo/paciência para fazer?
Entre em contato comigo e eu faço para você!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

47 comentários , comente também!

  1. Ai Elaine eu amo suas dicas sabia masssss infelizmente continuo medrosa
    Em breve vou usar de seus serviços pois sou uma pata e morro de medo de errar mesmo fazendo backup
    Vou deixar em suas mãos que acho muito mais seguro rsrs
    Vc é uma fofa!!
    Beijo

    ResponderExcluir
  2. oi

    Gostei da dica do contador de comentários e posts, estava atrás e um simples assim.

    Com relação ao formulário de contato eu prefiro o que vem incorporado ao texto, acho mais prático, menos abas pra abrir.

    Um Abraço

    @anakint

    ResponderExcluir
  3. Oi Elaine!
    Por mais que eu queira é preciso mais que coragem! Parece sopa de letrinhas! Brincadeirinha...mas confesso que ver tantos códigos assim assusta!
    Obrigado pela dica! Mas essa eu vou deixar passar.rsrsrs
    Beijos, Renata
    palpitandoemtudo

    ResponderExcluir
  4. Meu Deus,eu não sou corajosa,nem vou tentar,e olha que para mim seria muito util,pois tem um sorteio rolando no meu blog,mas é muito dificil,quem sabe um outro momento...valew pela dica,me visita
    htp://samybiscuitarteira.blogspot.com

    ResponderExcluir
  5. Oi Elaine!!

    Eu apenas passo por aqui para dizer o meu MUITO OBRIGADA pela pessoa que você é e por compartilhar essas coisas todas, essas informações todas. E também para te parabenizar pelo OSCAR!!! Todos os meus melhores parabéns pra você, você merece, viu?

    Beijos

    Carla

    ResponderExcluir
  6. Ai Elaine

    A toupeira aqui quase se matou. rsrs
    Comecei a tentar numerar os comentários mas acho que fiz "cáca", mesmo depois de 2 horas.
    E procura que procura e não acho nada. E ficou daquele jeito. sniff
    Não dou prá coisa mesmo. Queria tanto que ficasse bonitinho, apesar da cor ter ficado como eu queria, mas ficou no lugar errado, eu acho.

    O que eu faço?
    Se cuida aí querida e toma xaropinho direito.

    Bjs no coração!

    Nilce

    ResponderExcluir
  7. ai amiga eu ñ consegui entender como contar e numaerar os comentes ñ....
    me explica de novo pode ser?
    tipo: vc colocou esses sódigos aí........eles estão nessa oredem? é só eu recorta-los e calor o q vc sugere? ou tem q ser manualmente, ou seja, um a um?
    na verdade eu nem consegui localiza-lo. olhei tudinho mas ñ achei naum.
    aff!
    mas pelo menos consegui fzer o bckup.
    Estou no aguardo, amei as dicas.;

    ResponderExcluir
  8. ^n consegui entender nadica amiga....
    aff!

    ResponderExcluir
  9. Muito0 legal!!Novamente, vou tentar quando der tempinho e se der certo te falo!Obrigado!beijos,chica

    ResponderExcluir
  10. Bom dia, que bom voce esta sempre nos ajudando e contigo estou aprendendo, as vezes estou sem tempo e só dou uma passadinha, mas comcerteza irei voltar para aprender mais...bjin e fique com DEUS!

    ResponderExcluir
  11. Adorei a expressão usada para inspirar coragem... Para quem tem os conhecimentos na área é fácil para para os leigos na hora das mudanças a coragem costuma realmente falhar... como muitas vezes é o meu caso...rsrss

    Um beijo carinhoso e o meu desejo de que você tenha um ótimo dia!

    ResponderExcluir
  12. Ealinita!
    Era isso que queria!
    lembra que te pedi quando vc mudou meu bloguito? mas eu acho que não soube te explicar direito o que eu queria ah ah ah
    A noite e em casa, vou tentar mudar.

    Obrigada!

    bjs

    ResponderExcluir
  13. Oi Elaine,

    Obrigada por nos ajudar com essa dúvida! Confesso que irei ler e reler algumas vezes, tentarei fazer num blog de testes, e depois arrisco lá no blog. Porque é bem delicado, né? haha

    Beijos

    ResponderExcluir
  14. Ai, amiga, quero muito fazer isso, mas este post só vai ser útil se a Elis fizer, pois eu nunca, NUNQUINHA, vou mexer num montão de letras dessas.

    Vou passar o link pra ela, vamos ver se entre uma fornada de pão e outra ela mexe nesta cumbuca, hehe

    beijooo

    ResponderExcluir
  15. Aii não adianta sou medrosa, até tentei mas acho que fiz coisa errada. Tentarei novamente se der certo te falo.

    BJS!

    ResponderExcluir
  16. Você é perfeita! Explica tão bem, super detalhado.
    O problema é comigo, rsrs.
    Já comecei a suar só de ver estas códigos e a coragem não veio...

    Beijos e lindo dia!

    ResponderExcluir
  17. Oi, tia Elaine, minha mãe até que tentou, mas ficou toda enrolada com esse negócio de substituir código. Sei lá, acho que ela é meio atrapalhada! Não esqueça do nosso bloguinho!
    Beijinhos,
    Sofia

    ResponderExcluir
  18. Elaine, meu anjo da guarda cibernético, você pode mandar um e-mail explicando como faço para mandar os 5 da rifa? eu vou querer sim que você faça esse negócio para mim. Há tempos estou querendo sortear meu livro (agora são dois) pelo blog e andava meio perdido. Eis que vem você com suas asas celestiais me salvar. rsrs. Adorei a idéia. Meu abraço. paz e bem.

    ResponderExcluir
  19. Tenho um contador no meu blog, bem simples, não sei se tem a mesma função do seu ...
    Mas vou guardar esse para quando precisar. Valeu! Beijos.

    ResponderExcluir
  20. Amiga, vou deixar o meu como está, mais, adorei sua dica, me desculpe, que entrei sem bater, eu já te sigo há tempo e, como voce deixa a porta sempre aberto, vira e mexe eu apareço. Sempre gostei do teu blog, e, aproveitando a passadinha por aqui, quero te convidar para ser um cristal de, "coisasdecristal" para se tornar um cristalzinho e ser energizada, pela energia positiva do meu blog, dá uma espiadinha lá, ele tá cheiinho de NOVI.

    Tenha uma boa semana
    bjs cristalinos

    ResponderExcluir
  21. Oi Elaine, tudo bem?

    Legala as dicas, mas dá mesmo mesmo de fazer tantas alterações, srsrsr.

    Olha só, é amanhã o dia da Blogagem #culpazer certo?

    Nãos ei se ainda está de pé, mas como já tinha preparado o post, vou programar ´para amanhã mesmo.
    Beijos

    ResponderExcluir
  22. Muito boa a dica Elaine, espero que possa colocar aqui mais dicas assim...e tem postagem nova no meu Blog, passa lá pra rir um pouco!! bjs

    ResponderExcluir
  23. Elaine, vc não é do Bope mas "missão dada, missão cumprida"!!! kkk
    Brigada, amiga, e obrigada pelo link, viu, vô lá tentar fazer. bjs

    ResponderExcluir
  24. Oi elaine, há um tempinho que eu consegui por os n° nos comentários, mas confesso que seguindo as suas explicações, me pareceu mais fácil do que quando eu coloquei. Bjs, Rose;D

    ResponderExcluir
  25. Yesssssssssss
    eu consegui!
    Tá feito...lindoooo!

    beijos e obrigada!

    bjs

    ResponderExcluir
  26. Meu Deus!!! Tremi Elaine, (toda vez que mecho no html é essa novela mexicana rsrsrs), mas repeti com você "sou corajosa e não temerei nada!" e consegui!!!

    Númerei meus comentarios kkkkk... Tou rindo a toa... consegui \o/ Haaaaa e a torcida do Santa Cruz vai ao delirioooooooooooo!!!! rsrs

    Obrigada pela dica, só você mesmo para ensinar desse jeito, entendendo o psicologico de suas alunas \o/ Adoro \o/

    ResponderExcluir
  27. ELAINE QUERIDA...
    VOU USAR SEU ENSINAMENTO..MAS ASSIM QUE POSSIVEL..
    ESTOU MUITO CANSADA...
    TE MANDO O TEXTO PRO CONCURSO ATÉ SEGUNDA FEIRA, TÁ??
    COMECEI MAS ME PERDI NO TEXTO..
    VOU COMEÇAR DE NOVO.
    TEU BLOG FICOU LINDO DEMAIS.
    BJUIVOS QUERIDA, DESCULPE A AUSENCIA, NÃO ESTOU AQUI O QUANTO GOSTARIA...MAS O AMOR É O MESMO.RSR
    BJUIVOS NO SEU CORAÇÃO.

    ResponderExcluir
  28. Consegui por! Estava a mto tempo querendo isso, muito obrigada *-*

    ResponderExcluir
  29. Vixi, não consegui, acho que fui a única, rs.

    Cosméticos On
    http://cosmeticoson.blogspot.com

    ResponderExcluir
  30. Fiz, fechei os olhos e cliquei em salvar. Ou seria o contrário?
    Só sei q deu certo e eu não quis nem saber de configurar os números! rs
    Brigada de novo!
    Bjs
    Ale

    ResponderExcluir
  31. Amigaaaaaaaaaaaaa, eu adorei!! Acabei de fazer no cantinho. Hoje tem sorteio e aí fica mais fácil, né? rsrs O que seria da minha vida de blogueira sem vc... rs
    Mas eu com a minha "chatice"... kkkkk tenho que perguntar mais... sabe o que eu notei (depois que fiz tudo?) que as fotos das pessoas não aparecem mais... =( fiz alguma coisa errado, né? rsrs Tenho como colocar de volta ou não? rsrs "miajuda???" kkkkkkkk
    Bjks!

    ResponderExcluir
  32. Elaine
    Estou feliz igual a pinto no lixo! rsrs Deu certinho! Coloquei no meu blog de variedades.
    Beijocas!

    ResponderExcluir
  33. Depois do "Tilt" do blogger parou de funcionar e dá erro quando tento colocar de novo... =(
    "Alegria de pobre dura pouco,,," rsrsrsrs
    Bjks

    ResponderExcluir
  34. Agora foi...kkkkkkkkkkk
    de novo!!! =)
    Aff! Depois de todos os coments de hoje, se não fosse, eu "me matava"!!!! kkkkkkkkkkkkk
    Bjks!!!

    ResponderExcluir
  35. Ah! Eu não consegui fazer não!!!:( Tá valendo ainda os 5,00 para a rifa solidária?????

    Bjs

    ResponderExcluir
  36. Yeeeees! Acho que deu! Procurei em um monte de lugares, mas só consegui fazer com a tua explicação... queria ter número pra sorteio na BC da Fernanda Reali, agora funcionou! Obrigada por explicar!!! Abs.

    ResponderExcluir
  37. Elaine, bom dia!

    Segui todo o roteiro e consegui colocar o numerador. Porém não consigo alterar fonte, margem e cor. Vc pode dar uma olhada pra mim? Fico no aguardo. Gracie - Meu email é vera@santosmodal.com.br

    ResponderExcluir
  38. Boa Noite! adorei seu post,sou nova por aqui,eu faço postagens novas,mas na lista de blogs dos meus seguidores,aparece como 3 semanas,não atualiza para eles.O que fazer?se puder me ajudar,te agradeço.Um abraço!

    ResponderExcluir
  39. ai,ai,ja repeti mul vezes a frase....mais nao achei o começo...vou pedir pro filhote fazer pra mim,obrigada por partilhar um grande beijo Cris!!!!

    ResponderExcluir
  40. TEntei mas não deu certo....e não achei essa parte ]] ... bjus

    ResponderExcluir
  41. Oi Eliane, o que não e falta é coragem...
    Tentei muitas vezes li e reli os codigos até que achei, fiz tudo que vc mandou e não obtive sucesso, ai pedi para o meu marido que trabalha na area de informatica e ainda sabe ingles que ajuda muito, ele mexeu tirou e pos, por um minuto até apareceu os numeros mas depois sumiu.
    Quero fazer o sorteio mas sem os numeros nos comentarios vai ser punk, me ajuda ? qt custa ?
    schandrajulia@gmail.com

    ResponderExcluir
  42. Amanhã tem sorteio ;o) vim direto aqui, porque vc como sempre só facilita nossa vida!

    Beijos imensos de obrigada ♥

    ResponderExcluir
  43. Oi Elaine!
    Como faço para agregar uma linha divisória entre os comentários como a que vc usa?
    Obrigada!! :)
    Silvana

    ResponderExcluir
    Respostas
    1. Silvana, nesse tipo de numeração não dá pra fazer.
      Experimente ler esse outro artigo:
      http://www.elainegaspareto.com/2012/11/como-numerar-os-comentarios-do-blog-e-manter-o-recurso-responder.html
      beijos

      Excluir
  44. Oi Elaine,
    tentei, mas tremi e morri de medo!!!
    Não achei os códigos no meu igual no seu!
    Não sei o que aconteceu!
    Mas prefiro que vc faça isso pra mim!
    Deixei um recadinho em contratar serviços.
    BjãooO

    ResponderExcluir
  45. Elaine, querida, fiz o backup.
    Qdo fui procurar em "Editar html" o "Expandir modelos de widgets", só encontrei "Reverter modelos de widgets para o padrão".
    Não é a msm coisa, é?
    Obrigada!
    Bjs!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…