Personalize a área dos comentários

Oi minha gente! Perdão por ficar tanto tempo sem postar. E perdão por ficar todo post me desculpando por isso. Sem mais delongas vamos ao que interessa: o tutorial. O pessoal tem me pedido muito pra fazer esse post. É simples, mas um pouco longo. Eu não estou nem sabendo como começar. Talvez dando os créditos ao Mundo Blogger seja uma boa opção. Mais uma vez ele é a fonte do nosso conhecimento HAHA.

 Tem outra coisa chata nesse tutorial: como se trata da área dos comentários, não tem como ver as modificações somente visualizando, ou seja, primeiro tem que salvar para depois poder ver como ficou. Por isso, faça tudo num blog de testes e só depois passe para o seu blog.

Também já pude notar que, infelizmente, a maioria do pessoal usa os novos templates do blogger. Então vou me basear neles pra montar o tutorial. Vamos lá:


1. Pra começar, vá em Design, Editar HTML e localize o seguinte código:

#comments {
  background: $(comments.background);
  padding: 15px;
}

#comments .comment-author {
  padding-top: 1.5em;
}

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}

#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

Para facilitar a sua busca dê Ctrl+F e procure só por #comments {

Selecione tudo isso, apague, e no lugar dele, cole:

 /* Comments
----------------------------------------------- */
#comments h4 {
margin: .75em 0;
}
#comments-block .comment-author {
margin:.5em 0;
}
.comment-author a{
margin:0px;
color:#8d16df;
}
#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
position: static;
margin-right: 10px;
}
#comments-block .comment-body {
margin: -.5em 0 0px;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
}
.comment-timestamp, .comment-timestamp a {
color:#b557f8;
font-size:12px;
}
#comments-block .comment-body p {
margin:-.5em 0 0px;
}

Pronto, agora vamos entender esse código:

Usei uma imagem com cores ridículas  do modelo de comentário daqui do MN para ilustrar . 

A parte de cima, a área onde tem o nome de quem escreveu o comentário, pode ser editada na parte #comments-block .comment-author { e a cor do nome em .comment-author a{ do código.

O avatar do autor, eu coloquei no código pra que ficasse dentro da "caixa" do comentário, assim como o do MN. Se quiser que ele fique do lado de fora da "caixa" é só apagar no código a seguinte parte:

#comments-block.avatar-comment-indent {

margin-left: 0;

}

#comments-block .avatar-image-container {

float: left;

position: static;

margin-right: 10px;

}

A área onde fica o conteúdo do comentário, isto é, o texto que o cidadão escreveu, pode ser editada em #comments-block .comment-body { .

E a parte de baixo, a área onde fica a hora, dia, mês e ano em que o comentário foi postado pode ser ser editada em #comments-block .comment-footer { e a cor e o tamanho em .comment-timestamp, .comment-timestamp a { .

Mas aí você pergunta: Andreza, como assim "pode ser editada"??

Você pode editar de várias maneiras:

- Para colocar uma imagem de fundo em alguma(s) parte(s) do código é só acrescentar: 

background: url("URL DA SUA IMAGEM") repeat;

- Para colocar uma cor acrescente:

background: #000;

Coloquei preto na cor acima. Para mudar use o código da cor desejada. Nessa tabela tem várias cores.

- Para colocar uma borda simples:

border: 1px solid #000;

Para conhecer outros modelos de borda, inclusive a borda arredondada que usei no MN, clique aqui.

É isso pessoal. Espero de verdade que tenha ajudado.