Personalizando a caixa de comentários do Blogger

Personalizando a caixa de comentários do Blogger

6 10 99
Personalizando a caixa de comentários do Blogger 10 6 99

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.

68 Comments
Comments
  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. Este comentário foi removido pelo autor.

    ResponderExcluir
  10. 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
  11. Queria saber como eu faço para botar uma imagem para os visitantes também

    ResponderExcluir
  12. 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
  13. 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
  14. Oi, Não consigo mudar a imagem minha e do comentário, mas mudei a cor. Você pode me ajudar?

    ResponderExcluir
  15. 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
  16. 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
  17. Ótimo so não sei ainda se funcionou, pq meus comentários estão iguais oas que comentaram..
    ^^
    mais mesmo assim vlw!!

    ResponderExcluir
  18. 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
  19. 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
  20. 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
  21. Olá Juliana estou tentando colocar a imagem no meu comentario e está aparecendo este erro vc sabe o que venha ser : bX-iwjr3w

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

    ResponderExcluir
  23. 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
  24. 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
  25. Nossa, esses detalhes realmente dão um toque especial ao template.

    ResponderExcluir
  26. Valeu pela dica!
    Vou tentar...

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

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

    ResponderExcluir
  29. 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
  30. Muito legal a dica, vou tentar em meu template...

    ResponderExcluir
  31. 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
  32. 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
  33. Aconteceu comigo o mesmo que aconteceu com geralidadesdavida, aceitou os codigos, mas não abriu.

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

    ResponderExcluir
  35. 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
  36. 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
  37. 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
  38. Sobre alterar o link do autor.

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

    ResponderExcluir
  39. 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
  40. 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
  41. Agulha e Nade, vocês já experimentaram clicar em "expandir modelos de widgets"?

    ResponderExcluir
  42. 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
  43. Pequena correção o codigo ccs não estava lá eu que engado colo]ei duas vezes... :(

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

    ResponderExcluir
  45. 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
  46. 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
  47. 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
  48. Juliana, obrigada pela dica. Apliquei os 3 hacks com sucesso. :))

    ResponderExcluir
  49. 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
  50. Puxa... você não sabe como procurei!!! E fui encontrar aqui rsrsr, deveria ter vindo direto né??

    Ficou óteeeemo!

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

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

    ResponderExcluir
  53. 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
  54. muito bom esse post seu ai Juliana, gostei demais, vai ser mt util no meu site, te+ parabens...

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

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

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

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

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

    ResponderExcluir
  59. 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
  60. 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
  61. 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
  62. Você esqueçeu de mencionar uma única coisinha, para alguns blogs tem a precisão de expandir modelos de html ^^

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top