UsuárioCompulsivo

Destacar comentários do autor no Blogger

Destaque idéias
Diferencie os comentários do autor do post dos demais.

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 70 comentários

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

Abraço.
19 de março de 2008 01:36

Leandro "638" Compulsivo da uma olhada no Kibando e Andando farei um post sobre o q vc me enviou...valeu
abraço!
19 de março de 2008 05:15

Anônimo 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
19 de março de 2008 08:16

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

[]'s
Compulsivo
19 de março de 2008 08:38

Anônimo O robozinho george da sua logo é o george da Robosapien ne não?minha vo me deu um parecido porem pirata xD
19 de março de 2008 09:28

Compulsivo 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
19 de março de 2008 09:50

Malcomtux "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!
19 de março de 2008 10:29

Anônimo 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
19 de março de 2008 10:44

Compulsivo 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
19 de março de 2008 11:17

Kika Honeycutt Hum... muuuito bom! ^^
Já estou testando lá no blog.
19 de março de 2008 11:52

Felipe Xavier 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
19 de março de 2008 12:02

W Brown 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?
21 de março de 2008 16:39

Compulsivo 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
21 de março de 2008 20:01

caco 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á????
27 de março de 2008 14:48

Compulsivo 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
27 de março de 2008 15:17

caco 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.
27 de março de 2008 15:35

Compulsivo 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
27 de março de 2008 17:15

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

[]'s
6 de abril de 2008 17:22

Filósofo 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
10 de maio de 2008 16:44

Giovane 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.
24 de maio de 2008 15:00

*¨*Ellaehcarioca*¨* 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.
29 de maio de 2008 14:00

Compulsivo 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
29 de maio de 2008 14:15

Mais Informado 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.
3 de junho de 2008 05:45

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

[]'s
Compulsivo
3 de junho de 2008 08:05

Cinthya 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
3 de junho de 2008 15:29

Beleza de Ser Valeu!
Já estava procurando isso e a dica já ajudou em muito!
Valeu mesmo, Compulsivo.
10 de junho de 2008 20:15

Helen Fernanda 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!
2 de julho de 2008 08:49

Andressa Muito bom o seu blog... várias dicas que vou/estou aplicando no meu já! =)
22 de julho de 2008 17:14

Compulsivo @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
22 de julho de 2008 20:03

henriqueloo Perfeito Compulsivo! Fiz e deu certo! Valeu!
23 de julho de 2008 15:37

Paulo Victor Pitanga Muiiito bom cara... esse tuto ai eu gostei pakas!!

:D
26 de julho de 2008 12:27

1clique 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
26 de julho de 2008 22:07

Compulsivo @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
26 de julho de 2008 23:00

recomendandosites Poxa sempre aprendendo coisas novas, essa eh justamente a coisa que eu estava uerendo descobrir para introduzir em meu blog, brigadão cara!
1 de agosto de 2008 00:53

tkoift 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???
3 de agosto de 2008 16:52

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

[]'s
Compulsivo
3 de agosto de 2008 17:41

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

O que será que pode ter ocorrido...
21 de agosto de 2008 17:30

Compulsivo @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
21 de agosto de 2008 20:53

goiabasverdesfritas 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!
22 de agosto de 2008 11:30

Miss Muffin 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ã!
20 de setembro de 2008 16:56

entrepontosevirgulas 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
30 de outubro de 2008 20:18

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

[]'s
Compulsivo
30 de outubro de 2008 21:10

entrepontosevirgulas 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
30 de outubro de 2008 23:15

João Porto Aproveito para agradecer. Até que enfim um blog onde posso apreender a fazer as coisas direito com a ferramenta Blogger.
Muito obrigado mesmo.
18 de novembro de 2008 17:30

Érica Fiz agorinha e deu certo! Você é o mentos da minha reforma. Obrigada!
29 de novembro de 2008 14:41

AllFaiLz.N 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/
7 de dezembro de 2008 04:18

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

[]'s
Compulsivo
7 de dezembro de 2008 10:42

Tiago Cervo 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
31 de dezembro de 2008 09:56

narutoshippuuden2009.net 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
19 de janeiro de 2009 13:48

Compulsivo @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
19 de janeiro de 2009 14:02

Nilberto Melo Como q eu coloco uma imagem pra destacar ainda mais meus comentários dos leitores, assim como esse robozinho dos teus comentarios, Compulsivo?
23 de janeiro de 2009 17:45

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

[]'s
Compulsivo
23 de janeiro de 2009 17:47

Isabel Furtado 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!
29 de janeiro de 2009 18:07

PATRIX ae Compulsivo descarte o antigo coments..kkkkkkkkkk

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

e parabens pelo blog ....
12 de fevereiro de 2009 04:33

mistura total 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ã =)
27 de fevereiro de 2009 09:25

mediskina Eu já tinha tentado com outros tutos e não tinha conseguido,mas este é facílimo!
Obrigada
15 de março de 2009 19:37

iAndré No meu eu tento mas eu queria uma linha em volta, fica pontilhado, pode me ajudar?
11 de abril de 2009 11:29

appleiphonebrasilorkut Valeu Compulsivo, deu tudo certo aqui.

Abraço
28 de abril de 2009 02:35

☆ Káh.Kau ☆ Isso dá certo com janela pop-up?
porque fiz no meu templante do blogger e não destacou....
abs
20 de maio de 2009 17:02

☆ Káh.Kau ☆ 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!
20 de maio de 2009 17:08

LL 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
15 de julho de 2009 07:46

Maxmiler Freitas 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!
23 de julho de 2009 20:24

ENFERMAGEM EM FOCO Ai ja coloquei no blog... Valeu pela dica..
Parabéms pelo blog é muito bom e estou a prendendo bastante nele...
Abraços!!!!
24 de julho de 2009 22:22

vento-carioca 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
20 de agosto de 2009 03:42

vento-carioca 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?
25 de agosto de 2009 00:23

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

[]'s
26 de agosto de 2009 02:06

Mirna Oliveira Nem sei a quanto tempo rodava atrás disso...Muito obrigada pela luz. :)
28 de agosto de 2009 22:35

Oksana 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!
22 de outubro de 2009 13:04

Jééh 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 :*
25 de outubro de 2009 12:27

Leninha - LTScrapsAnimados 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.
9 de dezembro de 2009 17:17

faça seu comentário

Leia as regras:
Todos os comentários são lidos e moderados previamente.
São publicados aqueles que respeitam as regras abaixo:

- Seu comentário precisa ter relação com o assunto do post;
- Em hipótese alguma faça propaganda de outros blogs ou sites;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- O espaço dos comentários não é lugar para pedir parceria;
- CAIXA ALTA, miguxês ou erros de ortografia não serão tolerados;
- Comentaristas obsessivos compulsivos serão ignorados;
- Ofensas pessoais, ameaças e xingamentos não são permitidos;
- Não se preocupe em enviar trackbacks, os backlinks são automáticos.

Nos tutoriais:
- Leia os comentários, sua dúvida pode já estar respondida;
- Consulte o Grupo Blogspot Brasil para dúvidas específicas;
- Não fornecemos assistência técnica gratuita para o Blogger;
- Se precisa de atendimento personalizado, solicite orçamento.

OBS: Os comentários dos leitores não refletem as opiniões do blog.