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

em 19 de novembro de 2012

numerar comentários no blog
Há tempos atrás eu publiquei aqui no blog um tutorial de como numerar os comentários. Ele continua funcionando para quem usa o formulário de comentário tipo janela pop up. Mas com a Nova interface do Blogger e a novidade dos comentários aninhados, onde você pode responder a cada comentário feito imediatamente abaixo dele  dando um ar mais organizado às postagens, essa forma que eu havia ensinado para numerar os comentários não funciona.

Era preciso escolher entre ter os comentários numerados (o que é uma mão na roda em casos de sorteios, por exemplo) ou ter a opção de respondê-los usando as novidades da Nova interface.
Agora não é mais preciso escolher, você pode ter ambas as funções. E de um jeito muito, muito simples e fácil.

Vou ensinar 2 formas.
A primeira é mais simples, e numera em ordem crescente todos os comentários realizados em cada postagem.
Para começar entre em seu painel do blog e clique na aba Modelo. A seguir clique em Editar html. Caso apareça um aviso de alerta clique em Prosseguir. Agora localize a seguinte linha:

]]></b:skin>
Cole acima dela o seguinte código:

.comments-content {  counter-reset: contarcomentarios;  }
.comment-thread li:before {  content: counter(contarcomentarios);  counter-increment: contarcomentarios;  float: right;  font-size: 24px;  color: #666666;  } 
Caso queira pode alterar:
  •  a flutuação do número: right como está coloca o número do comentário à direita; left o coloca à esquerda.
  • ( o tamanho da fonte em font-size; está em 24px, altere para mais ou para menos se quiser aumentar ou diminuir o tamanho.
  •  a cor do número em color; está em cinza e para alterar substitua o código hexadecimal #666666 pelo código da cor que desejar. Aqui tem uma tabela básica de cores com os respectivos códigos.
Clique em Salvar alterações. Prontinho, simples e fácil.


Agora a segunda possibilidade: nesta opção são numerados os comentários mas as respostas não. Isso pode ser muito útil em casos de sorteios, por exemplo. Caso você responda aos comentários suas respostas não entram na contagem dos comentários, o que pode ser muito interessante na hora de sortear. Comigo já aconteceu de, na hora do sorteio, o comentário sorteado ser justamente o meu, em resposta a algum outro.

Funciona assim, veja no print:



As respostas são numeradas de forma separada, percebe? Assim, o comentário 1, caso tenha resposta, terá a resposta numerada como 1a, e assim com os demais. Legal, né?

 Para inserir essa segunda opção siga  os mesmos passos descritos anteriormente: encontre a tag

]]></b:skin>

mas ao invés do código que dei acima cole este:

 .comment-thread ol {
counter-reset: contarcomentarios;
}
.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #666666;
}

Clique em Salvar alterações e está feito. Como no código anterior pode alterar flutuação, tamanho e cor do número.

Observações:
  1.  Faça backup antes de mexer, é uma segurança a mais. Aprenda aqui como fazer cópia de segurança de seu blog. 
  2. Caso você faça e não goste basta apagar os códigos e tudo voltará ao normal.
  3. Caso seu blog tenha a área dos comentários já personalizada os códigos podem não surtir efeito algum.
  4. Templates externos ao Blogger podem não aceitar os códigos. Testei em vários modelos do Design de modelo e todos deram certo, mas templates modificados em geral não aceitam esses códigos.
  5. Escolha um dos dpis códigos que ensinei para inserir em seu blog. Não insira os dois pois ambos se anularão. Ou o primeiro, ou o segundo.
  6. A posição do formulário de comentários deve ser a Postagem abaixo incorporada. Janela pop up e página inteira não funcionam. 
  7. Os números não aparecem no Explorer, mas funciona perfeitamente no Chrome e no Firefox.

Gostou? Então me conta se fizer. E me ajude a divulgar o artigo, se puder.


Quer ter em seu blog mas tem receio de mexer em códigos?
Sem problema, entre em contato comigo e eu faço pra você!
Valor da instalação: R$10,00 no depósito bancário (acrescente R$1,00 se fizer pelo meu Banco eletrônico usando o PagSeguro)


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.

40 comentários , comente também!

  1. Muito legal sua dica, em breve quero instalar no meu blog.

    Até a próxima.
    Lulu
    Apaixonada por Romances

    ResponderExcluir
  2. Oi, Elaine... eu fiz... colei o segundo código... mas não percebi a mudança :-(
    Será que fiz algo errado??
    bj
    http://larfamiliaecia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eliane, mude a posição do seu formulário de comentários para Postagem abaixo incorporada. Em janela pop up como está vai manter a numeração que eu coloquei quando personalizei seu blog.
      Certo?
      bjsssss

      Excluir
  3. Oi Eliane tudo bem?
    Fazia tempo que estava querendo colocar os números.
    Fiz como vc ensinou mas não apareceu os números, fiz as duas opções.

    Beijos

    ResponderExcluir
    Respostas
    1. Ivone, releia o texto e veja se fez tudo certinho, se colou o código no lugar certo, etc.
      Nos testes que fiz dá certo.
      bjsss

      Excluir
  4. Fala minha "BOMBRIL" preferida!!! =))))
    Tô "toda boba" com meus comentários numerados... respostas 'seguindo' a numeração também, sem ganhar número diferente... Ahhhhhhhhhhhhh!!! Tudo junto!!! Que máximo!!!
    AMEI! =)

    ResponderExcluir
  5. Queridona,vc é uma pessoa extremamente do BEM!!! \0/

    Parabéns por ajudar as pessoas a melhorarem o bloguito.!

    Eu tentei no meu,nao deu certo,mas tudo bem! #tenho medo de mexer e errar! rs

    Esta noite acordei de madrugada e orei pelo teu marido. Tudo vai dar certo!


    saúde,paz boa semana


    Ro Monteiro

    ResponderExcluir
  6. Amo suas dicas Elaine!!!
    Você é uma pessoa iluminada!

    ResponderExcluir
  7. Nossa isso é realmente muito bom, adorei o tuto...
    as vezes quando vou instalar um outro modelo no
    blog acaba que não tem essa opção o que é muito ruim

    desenhodadisney.blogspot.com.br/

    ResponderExcluir
  8. Com entrar aqui e não dizer 'mandou muuuuito bem, outra vez'???

    Vi aqui e corri pro Pitacos de Lua para colocar o código e deu super certo, de primeira!

    Gostei principalmente porque pretendo fazer sorteios/promoções por lá e andava pensando justamente em como fazer se em algum usasse os comentários para o sorteio. Agora com a numeração essa preocupação eu não tenho mais. E essa dica de usar um código (o 2º) que separa os 'responder' é ótima!

    Valeu mesmo. Adorei a dica.

    ResponderExcluir
  9. Olá Elaine, como estão coisas querida? Espero que tudo esteja caminhando bem e o maridão melhor!
    Adorei a dica, apliquei a primeira opção, reduzi o tamanho da fonte e coloquei a cor azul! Ficou show! Obrigada!
    Um beijo e que a paz do Senhor esteja com vocês!

    ResponderExcluir
  10. Oi Elaine, há tempo quero colocar numeração e os códigos que encontro não funcionam,estes funcionaram mas algo estranho ocorreu, fiz em um blog de teste com 5 comentários de teste,sendo 1 resposta,mas todos sairam com número 1,e a resposta saiu com 1A ....?
    Com os dois scripts ocorreu isto, oque poderia ser?
    Beijo no♥!

    ResponderExcluir
    Respostas
    1. Realmente algo estranho aconteceu, porque fiz exatamente o que a Elaine ensinou, só mudei a cor dos números e no meu deu certo... Dá uma olhada neste post http://pitacosdelua.blogspot.com.br/2012/11/da-para-ter-parceria-no-blog-sem-ficar-com-dedo-preso.html#comment-form tem 3 comentários, com 3 respostas, e cada um deles saiu como a Eliane disse que ficariam 1/ 1.a - 2/ 2.a - 3/ 3.a

      Excluir
    2. Lilian, eu não sei o que pode ser porque não conheço o código fonte de seu blog.
      Tem certeza que ocorre isso com ambos os códigos? Porque deveria acontecer apenas com o segundo.
      Faça assim: releia o texto, veja se não pulou nada, se não esqueceu de nada. Tenho certeza que dará certo.
      beijossss

      Excluir
    3. Obrigada Elaine, vou olhar novamente ,com calma!Gosto de fazer este tipo de alteração nas madrugadas em que perco o sono, é quando estou mais concentrada, rsss
      Obrigada, luallessi, vou ver também!



      Beijo no ♥ das duas !
      Lílian -Blog:”Duas Moças Prendadas!”

      Excluir
  11. Oi Elaine, fui fazer um post e na hora de inserir imagens, aparece um aviso dizendo que minha cota já acabou e que tenho que comprar armazenamento, nunca ouvi falar disso é verdade, como proceder najude-me.

    ResponderExcluir
  12. Elaine, fiz e fiquei super satisfeita.
    Vc pediu pra divulgar o post, eu quero saber como posso fazer.
    Obrigada, seu trabalho é lindo.
    Espero q as coisas estejam andando bem com o marido, estou torcendo, positivando e rezando muito sempre, viu?
    bj

    ResponderExcluir
    Respostas
    1. Rosa, boa noite
      Você pode retuitar o post, pode divulgar no facebook caso tenha conta lá, pode colocar um link em seu blog direcionando para o post.
      Obviamente não pode copiar o texto e postar em seu blog, mas linkar me honra muito.

      Marido está bem. Marcamos um especialista particular, mas só tem vaga para janeiro. Até lá temos que esperar. Um dia de cada vez, né?

      beijos e boa noite, muito obrigada pelas orações!!!

      Excluir
  13. Elaine voltei com calma e fiz e deu certo.
    Sei que as vezes a pressa e o cansaço não nos deixa fazer as coisas cm devem ser feitas.
    Agora ficou bom.

    Muito obrigada!

    ResponderExcluir
  14. Muuuito legal!! Fiz e funcionou direitinho! Valeu a dica! Quem quiser conferir o resultado, dá uma espiada: http://riodemetal.blogspot.com
    A propósito... Soube do seu blog por causa da Sheila Mendonça, que conheci no colégio. Desde então, vira e mexe estou buscando umas dicas aqui no teu blog. Show de bola!

    ResponderExcluir
  15. fiz e deu certo
    vivendo e aprendendo com Elaine,rs
    obrigada por compartilhar!bjs

    ResponderExcluir
  16. Fiz tudo certinho ma não deu certo, pena...com certeza são os código do meu template mas tenho medo de mexer e bagunçar tudo, deixa pra lá...beijos e obrigada por compartilhar essas dicas.

    ResponderExcluir
  17. . postagem PERFEITA! vc tem didática para ensinar pessoas leigas no assunto como eu, mas curiosa e afim de mexer no próprio blog sozinha, muito obrigada por dividir com a gente seus conhecimentos.
    . bj. fique com DEUS. leila diniz.

    ResponderExcluir
  18. Ai amiga... eu fiz e não aconteceu nada...tô sofrendo com isso já algum tempo e não consigo fazer de jeito nenhum rsrsrsrs. Me ajuda, vai .... só vc poderá me salvar kkkkk.

    ResponderExcluir
  19. Elaine,
    vc não vai rir da minha pergunta boba?
    É que eu não sei se esse recurso responder deixa a resposta apenas na página do blog ou encaminha a resposta para a pessoa que fez o comentário. Às vezes recebo no meu e-mail algumas respostas a comentários que fiz, mas não sei como funciona isso :(
    Obrigada!

    ResponderExcluir
  20. Adorei a dica!! Suas dicas são ótimas e fáceis de entender. Eu nunca mexi com html e consegui de primeira! Você explica muito bem. Obrigada!

    ResponderExcluir
  21. Olá Elaine,

    estava procurando a opção de "responder nos comentários" e achei mais do que queria (hehehe), a opção de numerar comentários. Apliquei o código conforme indicado, contudo os meus comentários ficam todos numerados com "1". Só vai funcionar em novos posts?

    Beijos e obrigada!

    Luiza Mallmann
    decorarsustentavel.blogspot.com

    ResponderExcluir
    Respostas
    1. Luiza, em geral a numeração dos comentários aparece na hora e é automática para todos os posts...
      Tem certeza que segui todos os passos certinho?
      beijossss

      Excluir
  22. Oi Boa noite! Elaine não consegui copiar o código para colar.

    ResponderExcluir
    Respostas
    1. Bom dia!
      Faz assim: pare o mouse sobre o código e clique no primeiro ícone que surgir.Daí abrirá uma janela com o código aberto para ser copiado.
      Certinho?
      beijos, bom dia

      Excluir
  23. Como a interface do meu blog mudou não estou conseguindo concluir suas dicas oque faço?

    ResponderExcluir
    Respostas
    1. Para localizar os trechos tecle dentro da caixa de código Ctrl+F e na barra de busca que abrir coloque o trecho que deseja localizar.
      Essa é a única mudança que houve, de resto tudo igual.

      Excluir
  24. Eliane, fiz esse também!!!
    O blog está ficando lindo e completo com sua dicas.
    Mais uma vez, obrigada!
    Beijos,

    ResponderExcluir
  25. Oi Elaine,estou usando a segunda opção e de cara deu tudo certo,mais uma vez obrigada por disponibilizar.
    Tenha uma semana abençoada...

    ResponderExcluir
  26. Elaine me ajuda quase todos os recursos e truques precisam da fonte ]]> mas não consegui achar de jeito nenhum! Oq eu faço????????

    ResponderExcluir
  27. Eliana, fiz tudo como vc explicou mas não funcionou no meu blog, o que devo fazer?
    http://www.mariafaceira.blog.br/

    ResponderExcluir
    Respostas
    1. Lilian, seu template é um template modificado.
      Não sei se funcionará nele porque os códigos desse tipo de template em geral já foram mexidos.
      No caso de seu blog, por exemplo, a área dos comentários foi bem modificada.
      Lamento...

      Excluir
    2. Eliana, muito obrigada por sua atenção, era um destes template grátis, me senti muito limitada, não conseguia mexer em quase nada, adoro fuçar rsrsrsrs. Voltei para um do Blogger mesmo. Bjs e um ótimo final de Ano pra vc e toda sua família, muita paz saúde e prosperidade.

      Excluir

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…