Personalizando a área dos comentários.


Primeira postagem do Ready Designs, espero que tudo de certo nesse meu novo recomeço e que o blog seja útil para vocês, que tem dúvidas em Html e Css. Uma coisa que é muito esquecido na hora de personalizar o seu blog, é a área dos comentários. Para mim, e a área mais importante, já que todo mundo vai visitar ela para comentar no seu blog. Hoje, vou mostra uma técnica bem fácil de fazer esse tipo de personalização. O tutorial e bem simples, mas vocês tem que ter um pouquinho de atenção para que nada de errado.

Antes de você começar a meche no html do blog, você vai ter que ir em Configurações → Postagens e Comentário → Comentário " Local de comentário " → Janela pop-up. Selecione a opção, olhe a imagem abaixo para entender melhor.


Então, apos você te feito isso, Vá em :
Modelo → Editar Html 
Procure por ]]></b:skin>  → Quando localizado, cole o seguinte código acima dele.

#comments h4 {
margin: 1em 0;
font-weight: bold;
font-size: 100%;
line-height: 1.4em;
letter-spacing:.1em;
color: #XXX; /*** cor do "Postar um comentário" e "x comentários:" ***
}
#comments-block {
margin:1em 0 1.5em;
line-height: 1.6em;
}
#comments-block .comment-author {
background: #XXX; /*** fundo do autor ***/
font-size: 14px; /*** tamanho da fonte do nome do autor ***/
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
line-height: 1.4em; /*** espaço entre as linhas ***/
padding: 8px; /*** margem interno da área do comentário ***/
background: #XXX; /*** fundo da área do comentário ***/
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 100%; /*** tamanho da fonte da data do comentário ***/
text-align: right; /*** alinhamento da data do comentário ***/
letter-spacing:.1em; /*** espaçamos entre as fontes da data ***/
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
margin: 10px 0 2em;
font-style: italic;
color: #XXX; /*** cor do recado de 'comentário deletado' ***/
}
Faça as devidas alterações no código, caso algo de errado, leia e refaça o tutorial. Espero que gostei e possam personaliza a sua área de comentários da maneira que quiser. Até o próximo post.