Personalizando Área de comentários

Eae galera aqui e o matheus hoje eu vo ensina como personalizar os comentários, que é uma coisa muito ruim do blogger e que não da pra personalizar os comentários no design de modelo é o que complica não é ? bom nesse tutorial eu vo ensina a como personalizar ;)


Primeiro procure por:

#Comments

Logo apos você deve ter encontrado o

 seguinte codigo

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
text-transform:uppercase;
letter-spacing:.2em;
color: #073763;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray; }

Agora apague todo o código em vermelho e cole no lugar dele :
   #comments {
background: #fbfbfb; /* background */
padding: 15px;
}
#comments .comment-author {
background: #FFECEC; /* fundo do nome de quem comenta */
border-bottom: 1px dashed #FF8080; /* borda debaixo do nome */
padding-left: 5px;
padding: 2px;
font-family: Century Gothic; /* fonte */
text-transform: uppercase; /* transformação de texto, esse deixa todas as letras em MAIÚSCULAS, se não quiser, apague esse trecho */
font-size: 14px; /* tamanho da fonte */
font-weight: normal;
letter-spacing: 2px; /* espaço entre as letras */
color: #FF8080; /* cor do nome */
}
#comments h4 { /* texto onde fica "tantos comentários" */
font-family: Century Gothic; /* fonte */
font-size: 27px;
font-weight: normal;
}
#comments-block .comment-body { /* área em que o comentário está escrito */
background: #f0f0f0; /* fundo da área do comentário */
padding: 5px;
}
#comments-block .comment-footer { /* texto onde fica a data */
padding: 2px;
text-align: right; /* lado da data */
border-bottom: 1px dotted #000; /* borda debaixo da data */
}
#comments-block .comment-footer a:link{
background: #fbfbfb; /* fundo da data do comentário */
}
#comments .comment-author:first-child { /* isso não é nada */
padding-top: 0;
border-top: none;
}
.avatar-image-container { /* aqui é a personalização da foto, daí você que escolhe se vai personalizar ou não */
margin: .2em 0 0;
}

Agora basta seguir as instruções no código