Destacar comentários do autor no Blogger

Estava procurando há algum tempo uma forma de destacar os meus comentários aqui no UsuárioCompulsivo, para diferenciá-los dos comentários dos leitores, como é possível fazer no Wordpress.

Acabei encontrando a solução no El Escaparate de Rosa (espanhol) e compartilho aqui com os amigos leitores. Sem muita enrolação, vamos direto ao que interessa:

Entre na edição HTML do template, marque Expandir modelos de widgets* e procure pelo trecho de código abaixo e inclua os trechos destacados em vermelho:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>

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

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Agora, nas definições CSS do template, normalmente entre as Tags <head></head>, procure pelo trecho que determina o estilo de formatação dos comentários e logo após cole as seguintes linhas:
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted
#c0c0c0;
background:
#f5f5f5;
}

Nos campos destacados em vermelho definem-se as cores da borda e do fundo do destaque respectivamente, adapte conforme o caso.

OBS: O destaque será aplicado inclusive nos comentários já publicados. Obviamente só naqueles que foram feitos usando uma Google Account, comentários assinados via OpenID não serão destacados.

Se você quiser também pode alterar o destino do link que aparece sob o nome do autor, que por padrão aponta para a página do perfil do Blogger. Dê uma olhada no tutorial compulsivo Como alterar o link do autor nos comentários.

*P.S.: Cultive o hábito de Baixar o modelo completo (também conhecido como becape) do seu template sempre que entrar no modo de edição HTML. Cautela e canja de galinha não faz mal a ninguém.

Imagem: FreeDigitalPhotos.net

Comentários

  1. Eu tava procurando como fazer isso, ainda bem que descobri o seu blog, tenho tirado várias dúvidas aqui.

    Abraço.

    ResponderExcluir
  2. Compulsivo da uma olhada no Kibando e Andando farei um post sobre o q vc me enviou...valeu
    abraço!

    ResponderExcluir
  3. boa george essa eu gostei tava mexendo outro dia com isso ate consegui mais foi uma gambiarra disgramada... deixa eu pergunta na background do fundo sera que dava pra por uma marca d'agua com a logo do meu site com o ( background: url(endereço da imagem) repeat; ) quando chegar em casa vo testa isso direitinho pq aki agora ta tenso

    ResponderExcluir
  4. Deixo, pode fazer a pergunta. Mas só será respondida se você me disser de onde você tirou esse GEORGE...

    []'s
    Compulsivo

    ResponderExcluir
  5. O robozinho george da sua logo é o george da Robosapien ne não?minha vo me deu um parecido porem pirata xD

    ResponderExcluir
  6. Não Anônimo, nada a ver...

    O mascote compulsivo é o Marvin, o Andróide Maníaco Depressivo do filme O Guia do Mochileiro das Galáxias. Foi escolhido devido a várias semelhanças psicológicas e patológicas que compartilhamos...

    Por enquanto, um novo mascote já está sendo providenciado.

    []'s
    Compulsivo

    ResponderExcluir
  7. "Santa coincidência Batman" Eu estava trava trabalhando juntamente nisso!! Mas coloquei a condição em outro lugar!

    Obs.: Vai abandonar o Marvin??? Eu deveria chamar os Vogons para você! hehehehe!

    ResponderExcluir
  8. esse treco de direitos autorais é fod* mais se tu for mudar coloca uma parada massa e responde a minha pergunta aew da marca d'agua xD

    ResponderExcluir
  9. Anon, creio que seja possível incluir uma imagem como marca d'agua nos comentários, mas não testei.

    Combine as dicas que passei acima com essa do Blogger Buster. Se conseguir avise a gente...

    []'s
    Compulsivo

    ResponderExcluir
  10. Hum... muuuito bom! ^^
    Já estou testando lá no blog.

    ResponderExcluir
  11. Valeu Compulsivo!
    Já vinha procurando isso há algum tempo.
    Já aproveitei e coloquei uma imagem de fundo, para ficar mais diferente.
    Valeu mesmo.
    Abraços

    ResponderExcluir
  12. para blogs que tenham 2 autores, como o chamberlaws2.blogspot.com esse hack não funciona satisfatoriamente, pois ele coloca uma cor diferente apenas nos comentários do autor do post.

    Talvez a outra pessoa que também escreve no blog quer responder a algo, e não tem o destaque no seu comentário.

    Será que isso pode ser contornado?

    ResponderExcluir
  13. Brown,

    Mas a idéia é justamente destacar os comentários do autor do artigo em questão, afinal quem melhor para responder aos comentários que a pessoa que o escreveu?

    []'s
    Compulsivo

    ResponderExcluir
  14. Pois é Marvin, a coisa não deu certo no meu blog. E outro detalhe que percebi, é que quando vou fazer um comentário aqui no seu blog, não aparece o teu comentário destacado.
    Mas quando entro no teu blog vejo o teu comentário em destaque, o que é muito legal.
    Segui cada passito, nos mínimos detalhes, e comentei de tudo que é geito.
    O que será????

    ResponderExcluir
  15. Caco, pode me chamar de Compulsivo...

    Dê uma conferida na parte do CSS, veja se está no local correto. Imagino que seja isso.

    Meus comentários não aparecem destacados na janela Pop-Up onde você faz os comentários, pois essa janela não aceita a formatação do template. Ela segue um padrão do Blogger.

    []'s
    Compulsivo

    ResponderExcluir
  16. Falô Então Compulsivo! Vou continuar testando. Quando conseguir, te aviso.
    Sou Fã de carteirinha do teu blog véio. Apartir de agora sou mais um chato que tu vai ter que aturar.
    Abração.

    ResponderExcluir
  17. Caco, seja bem-vindo! Dá uma olhada na referência onde fui buscar a dica, está em espanhol, mas os códigos são universais...

    []'s
    Compulsivo

    ResponderExcluir
  18. Estava querendo fazer a horas, esse post estava com a estreliha no Reader a horas pra ser implementado no Woww! O resultado aqui.

    []'s

    ResponderExcluir
  19. Amigo fiz um post sobre isso

    se voce quiser da uma olhada la

    tem um link pra vc la


    http://topcientista.blogspot.com/2008/05/realar-comentrios-do-autor-no-blogger.html

    ResponderExcluir
  20. kra...aki não deu certo não...
    o blog não atualiza...

    mas vlw pela dica e parabéns pelo seu blog! Está me ajudando muito.

    ResponderExcluir
  21. Oi, acabei de descobrir esse blog. Tava procurando isso há dias. Vi que no meu template não tinha essa parte de comentários que você colocou. Só uma frase: deleted-comment e uns números. Adicionei todo esse código,só não consegui acertar bem as cores. Adorei esse blog!E obg pelas dicas.

    ResponderExcluir
  22. Sebas, fico contente em ajudar.

    Filósofo, grato pelo link ;-)

    Giovane, tente primeiro num blogue de testes, com template padrão do Blogger. Alguns templates personalizados tem algumas características diferentes e dificultam qualquer hack...

    Bem vinda a mais nova compulsiva carioca!!!

    []'s
    Compulsivo

    ResponderExcluir
  23. Olá po o código parace maneiro se não fosse o detalhe de não encontra-lo no meu template, mas vi que geral está conseguiu então o meu não deve ter.

    ResponderExcluir
  24. Oi Mais Informado, você marcou a opção "Expandir modelos de widgets"?

    []'s
    Compulsivo

    ResponderExcluir
  25. Oi Compulsivo! Muito boa essa dica tb! Já usei no Leonina!

    Tava lendo os comentários e acho que o Mais Informado talvez esteja com a mesma dúvida que eu estava. Se esse código serviria para o comentário do dono do blog ficar diferenciado dentro desse pop-up de comentários tb. Se essa for a dúvida, tem que avisar a ele que não. O comentário só irá ficar diferente na página do post!

    beijos

    ResponderExcluir
  26. Valeu!
    Já estava procurando isso e a dica já ajudou em muito!
    Valeu mesmo, Compulsivo.

    ResponderExcluir
  27. Engraçado que eu acordei determinada a fazer isso, nem que fosse na unha. Aí eu vi que você tinha deixado um comentário no meu blog e descobri esse tutorial aqui.

    O novo Blogger é cheio de Easter Eggs que os bloggers vão descobrindo aos poucos. Muito louco! Meu blog ficou mara!

    ResponderExcluir
  28. Muito bom o seu blog... várias dicas que vou/estou aplicando no meu já! =)

    ResponderExcluir
  29. @Helen, tem razão... Mas na verdade os recursos já estavam lá, só precisamos aprender a brincar com a variáveis que eles possibilitam...

    []'s
    Compulsivo

    ResponderExcluir
  30. Perfeito Compulsivo! Fiz e deu certo! Valeu!

    ResponderExcluir
  31. Muiiito bom cara... esse tuto ai eu gostei pakas!!

    :D

    ResponderExcluir
  32. Oi Compulsivo! tentei utilizar essa dica no meu blog num template personalizado e não funcionou. Não achei o estilo de formatação dos comentários. Onde eu incluo o código? outra coisa: Não tem como mudar a cor dos links pela aba "fontes e cores". Como eu faço para acrescentar isso ao css do blog?


    Muito bom o seu blog! Já ta linkado.

    Valeu

    ResponderExcluir
  33. @1clique, continue tentando que você consegue, em caso de dúvidas consulte o Google. E se precisar de um atendimento personalizado solicite orçamento através do formulário de contato!

    []'s
    Compulsivo

    ResponderExcluir
  34. Poxa sempre aprendendo coisas novas, essa eh justamente a coisa que eu estava uerendo descobrir para introduzir em meu blog, brigadão cara!

    ResponderExcluir
  35. compulsivo, eu gostaria de saber como fazer isso com mais de autor no blog;

    é que eu tenho outro autor no meu blog e quando ele posta, eu quero comentar, só que aparece o como qualquer outro comentário...


    tem como?

    tipo "b:if cond='data:comment.author == data:post.author'
    se tornar "b:if cond='data:comment.author == data:blog.author'" ou coisa assim???

    ResponderExcluir
  36. @tkoift, sinceramente não sei. Mas bem você podia testar e contar pra gente, né...

    []'s
    Compulsivo

    ResponderExcluir
  37. Hey... acabei de seguir os passos, mas não deu certo...

    O que será que pode ter ocorrido...

    ResponderExcluir
  38. @Priscila, difícil dizer pois seu template é personalizado. A dica que eu dou é tentar fazer num blogue de testes pra pegar o jeito.

    Você também pode dar uma olhada no Template Blogger Addicted que já tem o código implementado, para se basear...

    []'s
    Compulsivo

    ResponderExcluir
  39. Não querendo fazer "chat" nos comentários, mas vamos lá...

    já saquei mais ou menos qual é o código... vou dar uma estuda se descobrir algo te aviso!

    ResponderExcluir
  40. Querido Compulsivo,
    Suas dicas são totalmente excelente!
    Infelizmente nem sempre eu consigo fazer as alterações, provavelmente porque minha template é personalizada, pelo que andei lendo aqui nos comentários. Mas tá valendo, vou aprendendo "no tapa", com meu blog de teste. Valeu mesmo sou sua fã!

    ResponderExcluir
  41. Compulsivo, a 1a. parte eu fiz e parece estar certo, mas não achei as linhas abaixo no template:
    . blog-author-comment {
    margin:.25em 0 0;
    }
    .blog-author-comment p {
    margin:0 0 .75em;
    padding:5px 10px;
    border:1px dotted
    background

    Estou testando em um blog que não estou atualizando.
    Dá pra me dar um help?
    Sonia

    ResponderExcluir
  42. @Sonia, você nunca vai encobtrar, pois deve adicionar (ou colar como está no post) essas linhas no seu código...

    []'s
    Compulsivo

    ResponderExcluir
  43. Ok, Compulsivo, li rapidamente e entendi que era para colar o que estava em vermelho. O fundo do blog é preto e não alterou de cor nos comentários. Mas tudo bem, ficou com o texto recuado e a borda. Está ótimo. Obrigada (me desculpe pela pergunta idiota.. rs, sou analfabeta em HTML)
    Sonia

    ResponderExcluir
  44. Aproveito para agradecer. Até que enfim um blog onde posso apreender a fazer as coisas direito com a ferramenta Blogger.
    Muito obrigado mesmo.

    ResponderExcluir
  45. Fiz agorinha e deu certo! Você é o mentos da minha reforma. Obrigada!

    ResponderExcluir
  46. Compulsivo,

    no meu html nao tem a linha

    .blog-author-comment p {

    Altero essa dica para qual linha ?
    endereço do test : http://allfailz1.blogspot.com/

    ResponderExcluir
  47. @AllFaiLz.N, realmente não deve ter, pois conforme está escrito no tutorial, você deve adicioná-las.

    []'s
    Compulsivo

    ResponderExcluir
  48. Uso o esqueleto cumpulsivo que vocês criaram, mas tentei modificar o código de forma que meus comentários fiquem destacados nas postagens, e simplesmente não consigo... parece que o código está certo, mas na hora nada acontece.

    Se puder me ajudar eu agradeço

    ResponderExcluir
  49. Viu também não estou encontrando este codigo:
    . blog-author-comment {
    margin:.25em 0 0;
    }
    .blog-author-comment p {
    margin:0 0 .75em;
    padding:5px 10px;
    border:1px dotted
    background

    Você falou que é preciso adiciona-las, mas em que parte do template tenho que colocar

    ResponderExcluir
  50. @Naruto, cole o trecho na área do código CSS. Procure dentro do seu código por trechos parecidos com aquele, e cole lá. Se conseguir visualizar sem erros, salve que está certo!

    []'s
    Compulsivo

    ResponderExcluir
  51. Como q eu coloco uma imagem pra destacar ainda mais meus comentários dos leitores, assim como esse robozinho dos teus comentarios, Compulsivo?

    ResponderExcluir
  52. @Nilberto, some 2+2 que você descobre sozinho...

    []'s
    Compulsivo

    ResponderExcluir
  53. Iuuuuhuuuu!!! Deu certo! Ficou lindo!No começo não tinha entendido direito, assim como a Sônia. Nada como ler os comentários já feitos! Valeu! Super dica!

    ResponderExcluir
  54. ae Compulsivo descarte o antigo coments..kkkkkkkkkk

    acho q é insonia..kkkk
    enfim consegui ...
    vlw mesmo

    e parabens pelo blog ....

    ResponderExcluir
  55. compulsivo me ajuda awe cara...
    eu tou bolando umas idéias, quero fazer um site tmb no blogger!!! só que eu não consigo centralizar esse quadro cinza. tipo quando eu faço um comentário ele não fica alinhado com os outros! há e tambem queria saber se esse troque de colocar uma foto do comentarista é um script, é ou não?
    me ajuda aew cara! sou seu fã =)

    ResponderExcluir
  56. Eu já tinha tentado com outros tutos e não tinha conseguido,mas este é facílimo!
    Obrigada

    ResponderExcluir
  57. No meu eu tento mas eu queria uma linha em volta, fica pontilhado, pode me ajudar?

    ResponderExcluir
  58. Valeu Compulsivo, deu tudo certo aqui.

    Abraço

    ResponderExcluir
  59. Isso dá certo com janela pop-up?
    porque fiz no meu templante do blogger e não destacou....
    abs

    ResponderExcluir
  60. Acho que não expliquei mto bem, no caso, o meu blog a janela de comentários é pop-up, só funciona assim ou página inteira, incorporado não. E mesmo colocando o código como disse, não destaca. Vc sabe pq?
    Já revisei tudo e não destaca meus comentários...obrigada!

    ResponderExcluir
  61. Laurentino,

    Muito bom o artigo, eu de uma maneira geral não dou resposta aos comentários, porque eles perdem-se no meio dos outros e tenho a sensação que ninguém lê. Assim destacado fica mais legível.

    Deveria haver era uma opção "responder"...:) Mas assim já é muito bom!

    Abraços e obrigada!
    Luísa

    ResponderExcluir
  62. Depois de quebrar um pouco a cabeça, consegui colocar também uma imagem minha junto com meus comentários.

    Ficou legal, obrigado por mais esta dica.

    Deus lhe abençoe!

    ResponderExcluir
  63. Ai ja coloquei no blog... Valeu pela dica..
    Parabéms pelo blog é muito bom e estou a prendendo bastante nele...
    Abraços!!!!

    ResponderExcluir
  64. Olá!
    Consegui fazer , demorei séculos, mas acabou dando certo, coisas de loira sabe como é né? rs
    Gostaria de fazer tb para os comentários dos visitantes é claro que com outra cor.
    Parabéns pelo blog.
    Beijokas

    ResponderExcluir
  65. Olá
    Estou aqui pedindo um SOS urgente .
    Coloquei no blog, até deixei um comentário dizendo que deu certo, mas para a minha surpresa nos comentários atuais não está mais aparecendo o texto destacado o q faço? Fiquei tão feliz achando que tinha dado certo, vc pode me ajudar?

    ResponderExcluir
  66. Testado e aprovado e ainda mudei o estilo da letra como cor, tipo, tamanho, muito bom...

    []'s

    ResponderExcluir
  67. Nem sei a quanto tempo rodava atrás disso...Muito obrigada pela luz. :)

    ResponderExcluir
  68. Excelente dica! Estava procurando isso há dias!
    Seguindo o seu tutorial e buscando mais algumas informações no Santo Google, consegui deixar do jeito que eu queria mesmo sem saber nadica de HTML.
    Muito obrigada!

    ResponderExcluir
  69. oi eu adorei a dica , de verdade msm, mas o codigo entre os comandos "HEAD" "/HEAD" é quilométrico no meu template e tem varios codigos parecidos com esses .blog-author-comment {
    margin:.25em 0 0;
    }
    .blog-author-comment p {
    margin:0 0 .75em;
    padding:5px 10px;
    border:1px dotted
    background:
    }
    no que resulta que eu não sei o que fazer/fato,
    se alguém poder me ajudar agradeço ^^

    bjs :*

    ResponderExcluir
  70. Oi Compulsivo, fiz tudo direitinho, e já gostei do resultado,
    mas gostaria que ficasse alinhado com o nome assim como fica aqui no seu, o que devo acrecentar para isso, pois mexendo em margin e padding, ficou um terror.

    ResponderExcluir
  71. Mais uma dica maravilhosa do compulsivo. Eu adaptei o código ao meu template personalizado e deu certo.

    ResponderExcluir
  72. Sem palavras para agradecer.
    Todas as dicas são incríveis.
    Valeu por mais essa.
    Feliz 2010!

    ResponderExcluir
  73. Compulsivo, me socorre, mudei o layout,
    e agora o destaque não aparece mais.

    ResponderExcluir
  74. @Leninha, se você mudou de template precisa aplicar novamente este tutorial...

    []'s
    Compulsivo

    ResponderExcluir
  75. Ô Compulsivo, sou meio lentinha mais nem tanto.
    Mesmo depois de ter aplicado o código, não está
    aparecendo, já fiz e refiz e nada, a única coisa
    diferente do outro template que estava é que neste
    eu usei o minima blue, seria por isso???

    ResponderExcluir
  76. @Leninha, acho que não é por causa disso não. Mas não sei dizer o que pode ser...

    []'s
    Compulsivo

    ResponderExcluir
  77. Obrigado, mais uma vez; vou continuar tentando,
    sou brasileira, e teimosa, nunca desisto, beijos!

    ResponderExcluir
  78. Ótima dica, obrigado mais uma vez!

    ResponderExcluir
  79. Compulsivo, estava navegando agora pelos posts mais antigos do meu blog e vi que o destaque dos meus comentários sumiu.
    No começo, quando fiz essa dica, todos os meus comentários ficaram destacados, até os mais antigos, mas agora fui ver e notei que só os comentários dos meus posts de hoje estão destacados, só os da página inicial, os outros voltaram ao normal.
    O que pode ter acontecido?

    ResponderExcluir
  80. Já descobri o que é.
    Eu mudei o meu nome de exibição e o blogger desconsiderou meus antigos comentários, mas tudo bem.

    ResponderExcluir
  81. Salve mestre Compulsivo!

    Exelente dica, mas pra mim não deu certo. Apenas o corpo da mensagem dos meus comentários ficou destacado, o Autor (Eu) e a Data e Hora do blog ficaram para o lado de fora das bordas. Há algo a fazer, ou simplismente desistir?

    Grande abraço.

    ResponderExcluir
  82. Cara olha o erro: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag " ai Compulsivo ou alguém que já tenha feito isto por favor me der uma razão pq não funcionou!

    ResponderExcluir
  83. @Nauan, algo de errado não está certo... Comece novamente, de preferência num blog de testes usando um template padrão do Blogger...

    []'s
    Compulsivo

    ResponderExcluir
  84. coloquei o código no meu blog... funciono certo.. porém nao era bem oque queria.
    tipo
    ele destaca o comentário do autor do post, ou seja, se eu comento num post criado por outro autor ele nao fica destacado... tem como colocar para destacar de todos os autores do blog?

    ResponderExcluir
  85. @rafaelb, deve ter um jeito, mas não é isso que explicamos neste tutorial... Inclusive se você encontrar, me avisa que eu também estou interessado.

    []'s
    Compulsivo

    ResponderExcluir
  86. haaaaa. finaly ! somehow eu consegui... nao sei se ta do jeito mais fácil mas pra mim deu o resultado que queria xD

    ResponderExcluir
  87. Oi compulsivo!! bah sera que vc pode me ajudar... sabe tentei destacar os meus comentarios no meu blog... e destacou mas o problema é que fica uma propaganda xarope do seu site a frente dos comentarios do resto do pessal... bah me responda o quanto antes como eu arrumo isso!!???
    obrigada!

    ResponderExcluir
  88. Oi!! é eu denovo..kkkk ja consegui resolver..rsrssr mas agora sumiu tudo !! não sei se seria natural ter alguma propaganda de seu site... enfimm estava muito feio..muita coisa sabe... da uma olhada lá.. e se relmente precisa da sua marca me de um toque de como faze-lo!!

    bjinhoss

    ResponderExcluir
  89. Olá
    Se tiver mais de um autor, funciona do mesmo jeito?
    Bjoks

    ResponderExcluir
  90. No meu caso tenho 4 autores e só funciona pra mim.
    Tem como deixar isso pra todos?

    ResponderExcluir
  91. Seu site é ótimo.. já está entre os meus favoritos.
    Eu consegui instalar e tal, mas o problema é que meu comentário aparece duas vezes, uma editada e outra embaixo sem a edição. Será que vc pode me dar um help?
    Gracias!

    ResponderExcluir
  92. Boa dica, fiz isso no meu blog, porém gostaria que mostrasse o avatar de quem comenta, e aqui no meu sumiu !

    - Qual é o código para ficar destacado e mostrar o avatar de quem comenta ?

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

O que significa DVDRip, DVDScr, R5, etc?

Nomes de todas as igrejas do Brasil

Hospedar JavaScript no Blogger / Blogspot