segunda-feira, 30 de junho de 2008

Personalizando a caixa de comentários do Blogger

ChatPassei algumas horas do domingão cuidando do template do Dicas Blogger e foi muito bom! Desde que customizei o Blogger Tips tomei gosto por mexer em html e prometo que em breve trarei um post sobre este assunto.

Hoje vou compartilhar com vocês alguns hacks para personalizar a caixa de comentários. Todos eles estão no blog do Compulsivo mas não sei se todos os meus leitores também são leitores dele (acredito que sim, pois o cara é fera) então, resolvi postar aqui também estas dicas preciosas!

IMPORTANTE: Para encontrar os trechos solicitados no tutorial, vá em layout, procure por editar html e clique sempre em expandir modelos de widgets.

DESTACANDO A ÁREA DOS COMENTÁRIOS

Para incluir um ícone destacando a área dos comentários, encontre a linha abaixo(Crtl+F) e onde está em vermelho substitua pela url do ícone.

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<img src='http://IMAGEM.png'/>
<b:if cond='data:post.numComments == 1'> 1 Comentário: <b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

Sugestão de site de ícones:

Icon Archive

Exemplo:

comentarios

DESTACANDO OS COMENTÁRIOS DO AUTOR

Para destacar os comentários do autor do blog e procure pelo código abaixo:

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

Inclua as partes em vermelho.

Dica: copie ele inteiro e cole entre as tags <dl id='comments-block'> e </dl>

Depois procure pela área do CSS, entre as tags <head></head> e cole o código abaixo:

. blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #c0c0c0;
background:#f5f5f5;
}

Personalize as cores da borda e do fundo a seu gosto!

ALTERANDO O LINK DO AUTOR

Para que seus comentários não sejam direcionados para o seu perfil do Blogger, procure pelo código abaixo, inserindo a linha em destaque.

<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

INSERINDO ICONE DOS COMENTÁRIOS DO AUTOR

Procure pelo mesmo código anterior e insira a linha em vermelho, substtuindo a url

<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:blog.homepageUrl'>
<img src='http://URL_DA_IMAGEM/Imagem.png'/>
<data:comment.author/></a><b:else/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></b:if>
<data:commentPostedByMsg/>
</dt>

Exemplo:

comments

Neste exemplo vemos os 03 hacks já aplicados.

Divertido não?

Lembrem-se sempre de fazer um backup do template antes de utilizar estas dicas!

Todos os créditos para o Usuário Compulsivo.

Sobre o autor: Juliana é a fundadora deste blog. Nascida em 1970, é médica e, nas horas vagas, blogueira. Também é top colaboradora do fórum de ajuda do Blogger. Twitter l Google Plus l Facebook l

68 comentários:

  1. Estou triste com essa caixa de comentários ¬¬
    ela ainda não apareceu nas configurações do meu blogger. Eu deixei um template padrão deles pra ver se aparecia e nada =/ desisti dela.

    ResponderExcluir
  2. Oi Jú!!! O Compulsivo é mesmo 10! eu já tive a oportunidade de ler estas dicas no blog dele mas só estou adiando as mudanças... Tenho andado sem tempo para tudo... afff... :(
    Beijos e boa semana para vc!!! :D

    ResponderExcluir
  3. Jú!! Dê-me uma dica... como saber que vc me respondeu? Nesta caixinha não existe a opção: receber atualizações por e-mail...

    ResponderExcluir
  4. Eu procuro há muito tempo, queria muito colocar um balão de comentários porque meu template é todo azul e a linha de comentário fica despercebida. Mas eu vou alterá-lo em breve, só estou esperando encontrar o template ideal, então deixo pra outro dia, mas desta vez serei esperta, vou copiar e colar no meu google.docs assim eu não me perco!!

    ResponderExcluir
  5. Dani, é uma pena que no seu blog não deu certo...Mas não basta configurar no Blogger, tem que alterar os códigos do template.

    Jaqueline: muito bem lembrado...está sem a opção de email..mas deve ser provisório.

    Iara: experimente o Template Perfect.
    Com ele vc poderá fazer a festa!
    Abraços

    ResponderExcluir
  6. bom dia
    no meu blog n tem essas linhas
    pode me ajudar?

    www.pspgeral.blogspot.com

    ResponderExcluir
  7. o meu modelo não aceita

    img src='http://IMAGEM.png'/

    diz que não aceita

    alguma sugestão ?

    ResponderExcluir
  8. Tomara Jú!!! Só vou aderir ao novo design quando o Blogger acertar isto... Muita gente gosta de acompanhar nossas respostas por e-mail... Não quero tirar isto de quem me visita, mas que está muito mais bonito assim isto está! Beijos e bom restante de semana!!! :D

    ResponderExcluir
  9. Bem, para achar essa parte do código tive que marcar a caixinha de expandir modelos de widgets. Achei, mas mesmo assim, depois de hospedar a imagem e tudo ela não apareceu...

    ResponderExcluir
  10. Queria saber como eu faço para botar uma imagem para os visitantes também

    ResponderExcluir
  11. Genial! Sempre tentei fazer modificações no link de comentários, porém nunca havia visto um blog com este tipo de formulário dos comentários. Muito bom mesmo.

    ResponderExcluir
  12. Acho que sou jeguinha msm hehehehh Não consegui encontrar o encaixe no meu HTML...Não sei se meu template permite estas alterações tb... :(

    ResponderExcluir
  13. Oi, Não consigo mudar a imagem minha e do comentário, mas mudei a cor. Você pode me ajudar?

    ResponderExcluir
  14. e se tiver mais de um author .. como coloca a imagem do author, no meu blog tem 4 autores e um colaborador??

    ese codigo ai ta diferente do meu a unica coisa que tem no meu codigo referente ao author é :
    codigo isso aqui
    #comments-block .comment-author {
    margin:.5em 0;

    ResponderExcluir
  15. Ahhhhh têm uma coisa vital que esqueci de mencionar!

    Eu falei que só alterei a parte: Postagem abaixo incorporada, certo?

    Mas o template que eu uso é o seu e já vem com este novo formulário acoplado!

    =)

    ResponderExcluir
  16. Ótimo so não sei ainda se funcionou, pq meus comentários estão iguais oas que comentaram..
    ^^
    mais mesmo assim vlw!!

    ResponderExcluir
  17. Juliana u estou com um probleminha no meu blog, quando alguma pessoa comenta, o comentario é postado duas vezes =/
    Isso aconteceu depois que eu coloquei esse hack no meu template....

    ResponderExcluir
  18. bom e como faço para retirar os icones padrão que ja vem direto com o template minima? ele fica mto feio junto com o icone personalizado ao lado do autor!

    ResponderExcluir
  19. Ju,
    Eu tentei colocar uma imagem do lado dos comentário (dica n 1)...
    Mas não apareceu nada, ficou igual antes??
    O que eu posso estar fazendo de errado??
    O código ficou igualzinho!!!!
    Obrigada!!

    ResponderExcluir
  20. Olá Juliana estou tentando colocar a imagem no meu comentario e está aparecendo este erro vc sabe o que venha ser : bX-iwjr3w

    ResponderExcluir
  21. Meu template é diferente,por isso que não consegui,mas pretendo mudá-lo em breve e incluirei estas alterações.

    ResponderExcluir
  22. Bom dia Juliana.
    Agradeço muito pela postagem,
    o que me trouxe aqui foi por um fato intrigante.
    Eu adicionei o código para destacar os comentários do autor.
    Portanto, onde havia meu comentário, as páginas não apareciam.
    O que há de errado.
    Portanto, quando eu retirei o código, as páginas onde tinham meus comentários voltaram a aparecer.

    ResponderExcluir
  23. nossa, queria muito usar esse hack...

    tentei instalar aqui, mas o template sempre acusa erro, acho q é pq ele é gringo.

    vo tentar mudar pra utilizar!

    vlww juliana!

    ResponderExcluir
  24. Nossa, esses detalhes realmente dão um toque especial ao template.

    ResponderExcluir
  25. Obtive sucesso ao personalizar minha caixa de comentários, ótima dica.

    ResponderExcluir
  26. Maravilhozamente perfeito!!!
    ótimo post, irei organizar direitinho as postagens do blog!

    ResponderExcluir
  27. Demorou, demorou, mechi aqui, mechi ali, mas acho que deu certo.

    Mas eu gostaria mesmo de saber como se retira esses icones dos autores dos comentários (tipo esse icone do blogger que aparece de lado do comentário que eu posto na maioria dos blogs).

    ResponderExcluir
  28. Muito legal a dica, vou tentar em meu template...

    ResponderExcluir
  29. Juliana...
    Também não consegui retirar o Ícone "B" do autor do blog mas o que escolhi (Favicon personalizado graças ao Dicas!) aparece abaixo. Já reli refiz os passos e nada... Lá está o "B" Acima e o Personalizado abaixo...
    Há diferenças nas linhas que tem atualmente meu "HTML" e o do exemplo... Minima - Douglas Bowman é o que uso.

    ResponderExcluir
  30. Segui extamente o que estava escrito para destacar comentário do autor. O blogger aceitou os códigos, mas não mudou nada.

    Ele diferencia comentários antigos também?

    ResponderExcluir
  31. Aconteceu comigo o mesmo que aconteceu com geralidadesdavida, aceitou os codigos, mas não abriu.

    ResponderExcluir
  32. Ju, vc é a salvação do meu blog! ;o)

    ResponderExcluir
  33. Olá muito bacana o post mas voce poderia me mostrar por que o meu blog nao aparece opções de comentarios.

    www.casadomatte.blogspot.com

    obrigado

    ResponderExcluir
  34. Não consigo colocar uma caixa de comentários no meu blog ... e quando consegui colocar um ele não funciona ... eu edito em html... achei um template num site e o modifiquei .. modifiquei apenas a figuras dele e tal ..
    não consigo achar um código para colocar a caixa de comentarios do blogspot.. me ajude por favor !!

    ResponderExcluir
  35. Muito boa sua dica Juliana!

    vou usar no meu blog e convido você a visitar!

    Foi assim utilize partes dos seus templates para conseguir esse efeito ainda não está pronto.

    Abraço.

    ResponderExcluir
  36. Sobre alterar o link do autor.

    Quem baixa seus templates (no meu caso, o elegance) provavelmente já terá isso configurado.

    ResponderExcluir
  37. Oiew Juliana, Esse foi um dos que tentei, quebrei a cabeça e não conseguir instalar no template song, eu queria pelo menos destacar os comentário do autor, na linha que os separa por exemplo ou na cor da fonte. como você faz aqui.Alguma sugestão? um abraço!
    Detalhe: caso você faça essa alteração no template tem como ensinar?

    ResponderExcluir
  38. Oi, Juliana!
    Por favor, responda-me dessa vez...
    Uso o Template Blogger Writer 2 e estou tentando destacar os meus comentários alterando a cor da fonte, mas não estou encontrando as tags dl id='comments-block' e dl a que você se refere...
    Ajude-me!
    Bjs

    ResponderExcluir
  39. Agulha e Nade, vocês já experimentaram clicar em "expandir modelos de widgets"?

    ResponderExcluir
  40. Expandi... gastei mas algumas horas tentando entender o código eu só queria destacar os comentários do autor, comecei as 22:10 e somente agora consegui fazer,dica para quem tem o templante song tem mais codigos nessa parte, se tirar e colar o outro código os comentários ficam "trepando", mas fiquei brigando até conseguir. insira a parte vermelha (testei em um blog de teste ate não errar), codigo CCS já estar lá, eu ficava colocando ele em areas diferentes e não aparecia nada, depois que eu achei foi só trocar a cor... valeu pela dica e fiquei feliz com meu esforço!

    ResponderExcluir
  41. Pequena correção o codigo ccs não estava lá eu que engado colo]ei duas vezes... :(

    ResponderExcluir
  42. Os templates do Dicas Blogger já vem com estes hacks instalados

    ResponderExcluir
  43. Juliana, mais uma vez arrasando nas dicas...sensacional!!!

    Graças as suas dicas (e do Compulsivo) estou conseguindo montar o template que desejo...muito obrigado!!

    ResponderExcluir
  44. Juliana,

    Aqui encontrei mais uma dica que estava procurando = alterar o link do autor. Tive um pouco de dificuldade para encontrar o trecho no Writer II, template que utilizo no meu blog. Encontrei data:comment.authorUrl e alterei para data:blog.homepageUrl. Funcionou para o link do meu nome (autor), mas não funciona para a miniatura do meu avatar. Hoje segui a sua dica ‘Avatar nos comentários do Blogger’. Ficou 10! Mas infelizmente o avatar continua linkado ao meu perfil no blogger.
    Muito obrigado! Abraços, Renato_ò/

    ResponderExcluir
  45. Olá, quando inseri os codigos a minha lixeira sumiu, você tem alguma sugestão do que possa ter acontecido.
    Não consigo excluir os comentários feitos depois que fiz a alteraçao, e eu tenho outra dúvida, queria mudar somente a cor da fonte dos comentarios do autor, assim como está no seu, como é possível?!

    Muito obrigada

    ResponderExcluir
  46. Juliana, obrigada pela dica. Apliquei os 3 hacks com sucesso. :))

    ResponderExcluir
  47. Muito boa dica vou usar no meu blog. Facilita a navegação dos leitores e deixa o blog mais bonito, principalmente para quem usa um de seus templates como eu.

    ResponderExcluir
  48. Puxa... você não sabe como procurei!!! E fui encontrar aqui rsrsr, deveria ter vindo direto né??

    Ficou óteeeemo!

    ResponderExcluir
  49. Neem conseguii. :(
    foi alguma coisa errada no html. o qe fazer?

    ResponderExcluir
  50. o Jú tem como trocar a caixa de comentarios, colocando uma igual do Wordepp press?

    ResponderExcluir
  51. Ariane, preciso da sua ajuda. Criei um blog para apenas divulgar meu livro e não coloquei a opção de "comentários", mas agora decidi escrever regularmente nele e quero colocar os "comentários" para os leitores darem opinião e não estou conseguindo, mesmo depois de ter alterado nas configurações do blog.

    Me ajude, por favor!

    Adalgiza
    http://livrosuamente.blogspot.com/

    ResponderExcluir
  52. muito bom esse post seu ai Juliana, gostei demais, vai ser mt util no meu site, te+ parabens...

    ResponderExcluir
  53. Meu icone não está ficando com fundo transparente, o que fazer?

    http://esmalteseponto.blogspot.com
    esmalteseponto@gmail.com
    @esmalteseponto
    @a_maysa

    ResponderExcluir
  54. Comigo simplesmente não funciona "/ Já fiz de tudo, já fucei em tudo, mas está dificil destacar comentários do autor :(

    ResponderExcluir
  55. Olá Juliana,
    Sou novato no blogger e mesmo assim,depois de 10 minutos consegui colocar imagem nos comentarios...
    Obrigado e continue assim.

    ResponderExcluir
  56. Gostaria muito de aplicar essa Caixa,
    mas eu não estou conseguindo achar a parte do
    CSS do meu html =/

    ResponderExcluir
  57. olá, gostaria de perguntar se há um modo de exigir apenas o e-mail para postar um comentário, como modificar as opcões de identificação de comentário que é tradicional do bloggger, aliás me identifiquei como anônimo por não haver a opção e-mail em "comentar como".
    Por favor me responda pelo e-mail: liumonteiro-@hotmail.com

    ResponderExcluir
  58. Estou com dúvida. No meu modelo, o fundo e cinza e os comentários ficam sem fundo, e já que o texto é preto, não consigo ler direito. Já fiz de tudo para mudar e não consigo. Tem como você me ajudar. Meu blog é Baixa X.blogspot.com

    ResponderExcluir
  59. Não teria como usar um formulário de comentários no blogger, igual o wordpress? Quero dizer, um formulário de comentários com os campos "Nome (obrigatório)"; "Email (obrigatório) (não será publicado)" e "Website (opcional"?
    Tem um exemplo com apenas o form em HTML que fiz, pra ter uma base, nesse link:

    http://dl.dropbox.com/u/5378525/commentForm.html

    Mas, não quero usar fomulários alternativos, como "IntenseDebate", "DISQUS" e outros do tipo. Alguma sugestão?

    ResponderExcluir
  60. Você esqueçeu de mencionar uma única coisinha, para alguns blogs tem a precisão de expandir modelos de html ^^

    ResponderExcluir