Área dos comentários personalizada

Uma das coisas mais feias do blogger é a área dos comentários,com aquele fundo cinza horrível.Hoje eu vou ensinar a mudar isso de uma maneira bem simples.Aprendi esse tutorial no Menina Nerd,só modifiquei algumas coisinhas básicas.Neste post ela explica tudo certinho.

Só tem uma coisa,esta personalização só funciona  em blogs que tenha os comentários configurados para abrir em janela pop-up ou em outra guia.Para fazer isso vá na aba Configurações > Comentários >Posição do formulário de comentários e marque a opção "Janela pop-up" (ou Página inteira).E agora vamos personalizar!

Sua área dos comentários vai ficar assim:

Só lembrando que,você pode mudar a cor do fundo que está "cometário (comi o N *o*) ilustrativo" pra uma cor diferente da que está na data,assim ficará com três cores diferente.Tipo assim:

 Como é a área dos comentários que estamos editando,não dá para ver as modificações apenas clicando em Visualizar,você tem que salvar pra depois ver como ficou.Então recomendo que faça em um blog de testes e depois passa para seu blog ou baixe seu modelo completo .Pois que se algo der errado você vai ter uma cópia.

Ok,vamos ao tutorial !

1- Vá em Design >>Editar HTML,dê ctrl+f e procure por #comments { .

Agora apague todo esse 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;
}

E substitua por esse:

/* Comentarios
----------------------------------------------- */
#comments h4 {
margin: .75em 0;
}

#comments-block .comment-author {
background: #ff7ea8;  /* cor do fundo do nome de quem comentou*/
margin:.5em 0;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}

.comment-author a{
margin:0px;
color:#FF1493; /*cor do link do nome de quem comentou*/
}

#comments-block .comment-body {
background: #ffd7e4; /*fundo do texto do comentário*/
margin: -.5em 0 0px;

}
#comments-block .comment-footer {
background: #ffd7e4; /*fundo da parte em que está a data*/
margin:-.25em 0 2em;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;

}
.comment-timestamp, .comment-timestamp a {
color:#f5b4ff; /* cor da data */
font-size:10px; /* tamanho da fonte da data */
}
#comments-block .comment-body p {
margin:-.5em 0 0px;
}

Agora é só alterar as cores se quiser.E o que está em negrito são as bordas arredondadas,é só apagar se prefirir.É isso,espero que tenham gostado.Qualquer dúvida é só comentar ok.