Passei 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:
Exemplo:
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='"comment-" + 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='"comment-" + 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:
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
Estou triste com essa caixa de comentários ¬¬
ResponderExcluirela 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.
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... :(
ResponderExcluirBeijos e boa semana para vc!!! :D
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...
ResponderExcluirEu 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!!
ResponderExcluirDani, é 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.
ResponderExcluirJaqueline: 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
bom dia
ResponderExcluirno meu blog n tem essas linhas
pode me ajudar?
www.pspgeral.blogspot.com
o meu modelo não aceita
ResponderExcluirimg src='http://IMAGEM.png'/
diz que não aceita
alguma sugestão ?
Vlw, mto boa a dica.
ResponderExcluirTomara 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
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirBem, 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...
ResponderExcluirQueria saber como eu faço para botar uma imagem para os visitantes também
ResponderExcluirGenial! 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.
ResponderExcluirAcho 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... :(
ResponderExcluirOi, Não consigo mudar a imagem minha e do comentário, mas mudei a cor. Você pode me ajudar?
ResponderExcluire se tiver mais de um author .. como coloca a imagem do author, no meu blog tem 4 autores e um colaborador??
ResponderExcluirese 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;
Ahhhhh têm uma coisa vital que esqueci de mencionar!
ResponderExcluirEu 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!
=)
Ótimo so não sei ainda se funcionou, pq meus comentários estão iguais oas que comentaram..
ResponderExcluir^^
mais mesmo assim vlw!!
Juliana u estou com um probleminha no meu blog, quando alguma pessoa comenta, o comentario é postado duas vezes =/
ResponderExcluirIsso aconteceu depois que eu coloquei esse hack no meu template....
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!
ResponderExcluirJu,
ResponderExcluirEu 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!!
Olá Juliana estou tentando colocar a imagem no meu comentario e está aparecendo este erro vc sabe o que venha ser : bX-iwjr3w
ResponderExcluirBoa legal...
ResponderExcluirMeu template é diferente,por isso que não consegui,mas pretendo mudá-lo em breve e incluirei estas alterações.
ResponderExcluirBom dia Juliana.
ResponderExcluirAgradeç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.
nossa, queria muito usar esse hack...
ResponderExcluirtentei instalar aqui, mas o template sempre acusa erro, acho q é pq ele é gringo.
vo tentar mudar pra utilizar!
vlww juliana!
Nossa, esses detalhes realmente dão um toque especial ao template.
ResponderExcluirValeu pela dica!
ResponderExcluirVou tentar...
Obtive sucesso ao personalizar minha caixa de comentários, ótima dica.
ResponderExcluirMaravilhozamente perfeito!!!
ResponderExcluirótimo post, irei organizar direitinho as postagens do blog!
Demorou, demorou, mechi aqui, mechi ali, mas acho que deu certo.
ResponderExcluirMas 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).
Muito legal a dica, vou tentar em meu template...
ResponderExcluirJuliana...
ResponderExcluirTambé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.
Segui extamente o que estava escrito para destacar comentário do autor. O blogger aceitou os códigos, mas não mudou nada.
ResponderExcluirEle diferencia comentários antigos também?
Aconteceu comigo o mesmo que aconteceu com geralidadesdavida, aceitou os codigos, mas não abriu.
ResponderExcluirJu, vc é a salvação do meu blog! ;o)
ResponderExcluirOlá muito bacana o post mas voce poderia me mostrar por que o meu blog nao aparece opções de comentarios.
ResponderExcluirwww.casadomatte.blogspot.com
obrigado
vlwwwwwwwws
ResponderExcluirNã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 ..
ResponderExcluirnão consigo achar um código para colocar a caixa de comentarios do blogspot.. me ajude por favor !!
Muito boa sua dica Juliana!
ResponderExcluirvou 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.
Sobre alterar o link do autor.
ResponderExcluirQuem baixa seus templates (no meu caso, o elegance) provavelmente já terá isso configurado.
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!
ResponderExcluirDetalhe: caso você faça essa alteração no template tem como ensinar?
Oi, Juliana!
ResponderExcluirPor 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
Agulha e Nade, vocês já experimentaram clicar em "expandir modelos de widgets"?
ResponderExcluirExpandi... 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!
ResponderExcluirPequena correção o codigo ccs não estava lá eu que engado colo]ei duas vezes... :(
ResponderExcluirOs templates do Dicas Blogger já vem com estes hacks instalados
ResponderExcluirJuliana, mais uma vez arrasando nas dicas...sensacional!!!
ResponderExcluirGraças as suas dicas (e do Compulsivo) estou conseguindo montar o template que desejo...muito obrigado!!
Juliana,
ResponderExcluirAqui 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_ò/
Olá, quando inseri os codigos a minha lixeira sumiu, você tem alguma sugestão do que possa ter acontecido.
ResponderExcluirNã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
Adorei a dica!!
ResponderExcluirJuliana, obrigada pela dica. Apliquei os 3 hacks com sucesso. :))
ResponderExcluirMuito 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.
ResponderExcluirPuxa... você não sabe como procurei!!! E fui encontrar aqui rsrsr, deveria ter vindo direto né??
ResponderExcluirFicou óteeeemo!
Neem conseguii. :(
ResponderExcluirfoi alguma coisa errada no html. o qe fazer?
consegui ficou lgal
ResponderExcluiro Jú tem como trocar a caixa de comentarios, colocando uma igual do Wordepp press?
ResponderExcluirAriane, 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.
ResponderExcluirMe ajude, por favor!
Adalgiza
http://livrosuamente.blogspot.com/
muito bom
ResponderExcluirmuito bom esse post seu ai Juliana, gostei demais, vai ser mt util no meu site, te+ parabens...
ResponderExcluirMeu icone não está ficando com fundo transparente, o que fazer?
ResponderExcluirhttp://esmalteseponto.blogspot.com
esmalteseponto@gmail.com
@esmalteseponto
@a_maysa
Comigo simplesmente não funciona "/ Já fiz de tudo, já fucei em tudo, mas está dificil destacar comentários do autor :(
ResponderExcluirOlá Juliana,
ResponderExcluirSou novato no blogger e mesmo assim,depois de 10 minutos consegui colocar imagem nos comentarios...
Obrigado e continue assim.
Gostaria muito de aplicar essa Caixa,
ResponderExcluirmas eu não estou conseguindo achar a parte do
CSS do meu html =/
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".
ResponderExcluirPor favor me responda pelo e-mail: liumonteiro-@hotmail.com
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
ResponderExcluirNã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"?
ResponderExcluirTem 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?
Você esqueçeu de mencionar uma única coisinha, para alguns blogs tem a precisão de expandir modelos de html ^^
ResponderExcluir