Tutoriais Blogger Vanessa S.
Desmembrando a Área de Comentários
A área de comentários do blog é a área mais complicada de se entender para a maioria dos usuários do Blogger. Isto porque na maioria dos templates, esta área já sofreu muitas modificações, o que acaba dificultando a personalização desta área.
Nos templates padrões do Blogger, como o Minima, por exemplo, a área de comentário se apresentam de forma simples.
Eu já ensinei vários recursos e hack para personalização da área de comentários, todos eles você poderão conferir os link dos tutoriais, ao final desta postagem.
Ocorre que muitas vezes, o usuário não consegue localizar algumas linhas de códigos na hora de implementar algum hack, e isso ocorre justamente pelo fato de cada template apresenta a sua área de comentário de forma diferente, ou seja, já sofreram muitas modificações.
Afim de fazer com que você, leitor do Mundo Blogger, consiga ultilizar melhor alguns dos tutoriais de personalização dos comentários que já foram publicados aqui, resolvi criar este tutorial para que você finalmente consiga ENTENDER A ÁREA DE COMENTÁRIOS NO SEU BLOG e com isso consiga desvendar e identificar o que cada código significa.
Primeiramente, vamos entender os comandos da área de comentários nos templates padrões do Blogger (Minima)
Veja a imagem abaixo:
1. Entendendo o CSS
No templates padrões os estilos CSS da área dos comentários se apresentam desta maneira:
#comments h4 { /* se refere ao titulo dos comentários*/
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block { /* se refere ao container geral dos comentários */
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author { /* se refere ao autor dos comentários dentro do container geral */
margin:.5em 0;
}
#comments-block .comment-body { /* se refere ao corpo geral da mensagem dos comentários dentro do container geral */
margin:.25em 0 0;
}
#comments-block .comment-footer { /* se refere ao rodapé dos comentários dentro do container geral */
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p { /* se refere ao texto no corpo/mensagem dos comentários dentro do container geral */
margin:0 0 .75em;
}
.deleted-comment { /* se refere aos comentários deletados */
font-style:italic;
color:gray;
}
Para conseguir compreender melhor cada estilo CSS definido pelo Blogger, visualize a imagem acima, e vá se familiarizando, identificando cada trecho, observando no código os comentários que fiz para você conseguir saber a que se refere cada código.
2. Entendendo o HTML
Toda a área de comentários se inicia com o seguinte código:
<dl id='comments-block'>
ou
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
e termina com o fechamento das seguintes tags:
</b:loop>
</dl>
Em suma, as condicionais nos templates padrões, para área dos comentários se apresentam desta maneira:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Agora vamos entender e desmembrar cada condicional desta, e aprender a identificar uma por uma.
Eu separei cada trecho em cores diferentes para sua melhor identificação e abaixo você encontra a descrição de cada item, discriminando suas repectivas funções.
Lembre-se sempre de ir visualizando na imagem para você ir entendendo ainda mais e ver como os itens do bloco de comentário foram distribuidos pelo Blogger:
id=’comments-block’ –> abre o bloco de comentários. Se refere ao container geral dos comentários.
Representado por esta linha:
<dl expr:class=’data:post.avatarIndentClass’ id=’comments-block’>
(*Note que esta linha se inicia com a tag: dl)
e lá no final de todo o código, temos o fechamento desta tag, representada por: </dl>
Isto ocorre porque o </dl> é o comando que encerra todo o código referente ao bloco de comentários.
Seguindo a 1ª linha de comando que abre o bloco de comentários temos uma linha que contém o comando “loop“.
<b:loop values=’data:post.comments’ var=’comment’>
O comando “loop” faz com que todos os comandos aplicados ao bloco de comentários se repitam, assim, sempre que for postado um comentário ele se aplicará igualmente aos demais, dentro do bloco de comentarios.
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
? abre o trecho referente ao autor do comentário.
E é encerrado com o fechamento desta tag, representada por: </dt>
<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>? abre o trecho referente ao corpo/mensagem do comentário.
*Note que esta linha se inicia com a tag dt = definição do termo
E é encerrado com o fechamento desta tag, representada por: </dd>
<dd class=’comment-footer’> ? abre o trecho referente ao rodapé do comentário dentro do bloco do corpo da mensagem.
(*Note que esta linha se inicia com a tag dd = descrição do termo)
<span class=’comment-timestamp’> ? se refere ao link da data do comentário
<b:include data=’comment’ name=’commentDeleteIcon’/> ? se refere ao icone para que o autor do comentário possa apagar um comentário publicado (aquele icone de lixeira que aparece no final de cada comentario)
O rodapé é encerrado com o fechamento da tag: </dd>
E bloco geral dos comentário é encerrado pelo fechamento das tag:
</b:loop>
</dl> ? encerra todo o código referente ao bloco de comentários.
Agora que você conseguiu entender cada comando e cada função, ficará muito mais fácil conseguir instalar alguns hacks e aprender a personalizar melhor sua área de comentários.
Nos próximos artigos, vou ensinar como aplicar estilos a cada item do bloco de comentários.
Para organizar melhor cada tutorial que será publicado, segue uma lista dos próximos tutorais que farão parte desta série:
– Personalizar toda a área de comentários. Aplicar estilos ao container geral (bloco de comentários – “comments-block”)
– Personalizar o comando que se refere ao nome do autor dos comentários. (alterar a cor do link, tamanho e tipo de fonte, e incluir cor de fundo ao nome do autor dos comentários – “comment-author”).
– Personalizar o corpo da mensagem dos comentários.(“comment-body”)
– Personalizar o rodapé dos comentários (“comment-footer” e “comment-timestamp”)
Para você acompanhar melhor todos os tutoriais desta série, segue abaixo a lista dos artigos desta série que já foram publicados:
- Desmembrar a área de comentários
- Personalizar Container geral de comentários “comments-block”
- Personalizar nome do autor dos comentários “comment-author” ((não funciona no Designer de Modelo))
- Personalizar o corpo da mensagem dos comentários “comment-body” ((não funciona no Designer de Modelo))
- Personalizar o rodapé dos comentários “comment-footer” ((não funciona no Designer de Modelo))
Oieee Clau, eu estava louca querendo personalizar o titulo do comentário deixar a fonte diferente e grande como vejo em muitos blogs por ai mais não vi nenhum tutorial ainda e olha que pesquisei muito mais só vejo personalização de uma maneira geral dos comentários, inclusive aqui, vi vários tutoriais de personalização dos comentários mais nenhum onde vc diz que no código o #comments h4 é o titulo do comentário e é isso que eu quero personalizar deixa-lo com a fonte grande e diferente e com uma imagem na frente de um coraçãozinho ou uma setinha vejo isso em muitos blogs por ai, mas agora com esse esclarecimento seu vou tentar eu mesma personalizar só o titulo do comentário e obrigada por dividir conosco seu conhecimento, bjoO!
Clau, eu não sei se eu perdi essa parte no tutorial, mas eu não encontrei um código que possa mudar a cor dessa caixinha onde digitamos o comentário. Meu blog não é branco, então fica muito feia essa caixa branca. Tem como mudar a cor? Obrigada, vc é um anjo que nosa ajuda com CSS.
legal essa dica 🙂
escandalonacional.com
Lamento mas não tenho como ajudar. Tais recursos podem variar de template para template.
Olá Clau,
Só agora li o teu artigo de Open ID, e como sou principiante não tinha conhecimento..assim, envio novamente a minha questão, à qual te agradeço se me puderes dar uma ajuda.
Quando instalei no rodapé do blog o "Leia Mais", parte da área de Comentários sobrepõe-se por cima da publicidade ou do "Leia mais" se retirar a publicidade do rodapé. Estou farto de dar voltas e não consigo resolver esta situação.
clubbing.pt@gmail.com
Obrigado,
Jorge
Oks Clau muito obrigado
pela informação
estarei lendo todos os posts citados por vc
e irei fazer o maxiimo para deixar do meu jeito!
Gostei muito do seu site
muito bom mesmo 😀
Guilherme
Eu já publiquei 5 posts só desta série sobre comentários, fora outros tantos que já publiquei sobre o tema tb, que estão listados no marcador "Comentários". Basta vc ler todos os artigos que são bem explicativos e de fácil entendimento, para aprender sobre a área de comentários e "mãos a obra" para aplicar os estilos de acordo do seu jeito. 😉
Clau eu gostaria de ter os meus comentarios parecidos com o do seu blog teria como vc postar um tutorial de como deixar os comentarios assimm como o do seu site ou alguns parecidos.
Desde Ja Agradeço!
Clau,tenho um probleminha..
Eu uso o template da Ariane do TNB,o template blue,mas quando o comentàrio è um pouco grande sai pra fora e não dà para ver o resto do texto.
Me entende? tem algum jeito de aumentar bem grande o comment-body?
Obrigado
Clau,tem como alterar o texto daquele botão: 'postar comentario'e do: 'vizualizar'?
Gilmar S.C
Obrigada pelo comentário, volte sempre! 😉
Putz, dicas especiais!
– Vou até arriscar a fuçar no meu bloguito e tentar ajeitar as coisas por lá!
Um certo conhecimento basicão é necessário para por em ato o que voce ensina aqui, sabe-se!
Claro que só se aprende lendo, pesquisando, fazendo, praticando, testando, etc., como tudo na vida!
Aos poucos podemos dominar "a coisa", mas acho que precisamos de um "estimulante", algo que queime, ponha fogo, nos impulsione a querer aprender "o trem"!
Talvez as necessidades, as curiosidades, a auto-disciplina, etc.
É incrível tua facilidade em elaborar e direcionar os assuntos!
Isso aí, ótima postagem (mais uma!), excelente tema e caprichada maneira com que nos brindam com teus conhecimentos!
Obrigado! – Vou praticar isso!
Clau,queria saber como retirar a data e a hora dos comentàrios,pode me ajudar? =)
òtimo tutorial clau,fico agora bem mais fàcil.
Clau,como insiro um link no comentàrio,e no formulàrio de comentàrio?
@Alexandre Garcez:
é que infelizmente para algumas customizações no blogger requer um mínimo de conhecimento em html/css.
Mas é só ter paciencia que vc aprende. Vai testando sempre em um blog de testes. "Fuçar" e testar os códigos do template é sempre uma boa maneira de aprender.
Tudo bem, tudo bem, entendi nada, esse post acabou com o meu dia spskspkssk mais valeu, acho que o Blogger não deseja modificações porque a imagem do anônimo também não funfa, e é template novo, nem modifiquei…
@EMPORIUM DIGITAL:
Que bom que funcionou Daniela, fico feliz que tenha dado certo. Tudo de bom pra vc tb e obrigada pelo retorno, volte sempre!
Obrigada Clau, funcionou certinho!!!
Valeu mesmo… Tudo de bom sempre!!!
Beijo Grande!
@Max Martins:
Eu ainda pretendo dar segmento a serie de tutoriais de ajuda para personalizar a area de comentários, ao longo dos tutoriais vc vai entender melhor e vai entender como personalizar essa area.
@Emporium Digital:
Daniela, pode ser que o template dela não tenha o código de paginação de comentários. Por padrão no blogger, a paginação deveria ocorrer a partir do comentário nº 201. Já q não ocorreu paginação, o template não deve ter o código instalado.
Encontrei um tutorial da Rosa, do "El Scaparate". Paginação de comentários. Ela ensina como incluir o código de paginação de comentários.
Dá uma lida lá no tutorial dela e vê se ajuda.
Obrigada pelo comentário, volte sempre que precisar viu?
Oi, Clau!
Há tempos tento deixar minha área de comentários no mesmo estilo da sua e não consigo. Ou seja, quero deixar todos os elementos do comentário dentro do bloco. Exatamente como aparece aqui: nome, avatar, comentário e data. Já fiz de tudo, até troquei a ordem no CSS no que se refere a "dt" e "dl", mas não adiantou.
De qualquer forma, vou acompanhar o seu blog e ver se desfaço esse mistério.
Ah, excelente post. Parabéns!
Bjs
Olá Clau, tudo bem? Trabalho com templates pra Blogger e sempre venho aqui no seu blog "catar" uns hacks e códigos extras. Estou tendo problema um blog de uma cliente que tem mais de 200 comentários no post e a partir do 201º eles não aparecem mais. Sabe por acaso, se tem algum código ou hack pra mudar isso?
Obrigada! Daniela Milagres
@sosvip:
Eu quem agradeço pelo comentário e fico feliz que meu tutorial tenha ajudado, significa que atingi meu objetivo. =P
Obrigada pela presença e volte sempre que quiser!
Muito obrigado mesmo por este excelente tutorial. Cheguei aqui por indicação da Marcia do mamanunes. Com esse artigo resolvi 90% do meu problema. Não era possível visualizar os comentários pq a fonte estava na cor branca e o background também. Não consegui mudar a cor da fonte, apesar de inúmeras tentativas na área indicada, mas consegui mudar a cor do background, corrigindo assim o problema.
Por isso só tenho a lhe agradecer Clau, por este post.
Já adicionei aos meus favoritos.
Obrigadão.
Abraço.
Muitíssimo obrigado por esse tutorial Clau. Conheci seu blog por indicação do Mamanunes. Ajudou e muito com relação a um antiquíssimo problema que eu tinha. 90% resolvido agora.
Obrigado mesmo. Não perderei mais de vista!
Abração.
@Andressa Quadro:
E foi com essa intenção que preparei este tutorial, pra ajudar a todos a entender essa area e poder personalizar melhor seus templates.
Obrigada pela visita e pelo comentário, volte sempre!
@Fabio:
O q vc procura está aqui:
Ocultar Elementos/Widgets em Página Específica
tem aii nem uma dica falando para FIXAR GADGET SÒ NA PRIMEIRA PAGINA ?
Clau parabéns por este ótimo tutorial! Com certeza vai ajudar muita gente e vai ajudar a mim também. Já passei por muitos perrengues enquanto fazia meu template, pois não sabia a função de cada código da área de comments lá no Css. Com seu tutorial já vai dar para customizar um pouco mais meu template e os próximos que farei.
Adorei!
abraços
@Ddiscografias:
Eu quem agradeço pelo seu comentário e por ser leitor aqui no blog, é claro. =)
Parabens, "Clau" como sempre ajudando cada veiz mais os blogueiros e seus blog's…..
Ja vi todos os seus tutoriais e adorei todos, queria ter a paciencia que vc tem para escrever!!!