Personalizando área dos comentários

Eu tô postando aqui um tutorial super fácil de como personalizar a área dos comentários que é muito fácil, clique em leia mais para ver o tutorial.
Primeiro vá em Designer >> Configurações >> Comentários e onde tem o nome Posição do formulário de comentários selecione a opção Janela pop-up e depois salve.

PS: Depois que houve mudanças no formulário de comentários do blogger, esse tutorial só funciona em blogs que tenha os comentários configurados para abrir em uma janela pop-up ou em outra guia. Então os Blogs onde os formulário de comentário aparece logo abaixo da postagem, por enquanto não podem ser personalizados.

irá ficar assim:

primeiro procure esse código:

/* Posts

 e encima dele acrescente esse aqui:

/* COMENTÁRIOS
-----------------------------------------------*/
#comments {
 background:#FFFFFF;
padding: 15px;
}
#comments h4 {
background:;
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;background:;
}
#comments-block .comment-author {
Font-weight: bold;
color:#68838B;
font-size:12px;
margin:.5em 0;
font-family:tahoma;
height: 30px;
 color:#FF9DC5;
line-height:2em;
 background: #000000;
}
#comments-block .comment-body {
background:;
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
 background:#35CCCC;
line-height: 1.4em;
color:#111;border: 20px #FFF5EE;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 75;
font-size: 11 px;
line-height:1.5em;
 background:#FFFFFF;
color:#111;border: 0px #535456;
}

se você quiser esse aqui: 

acrescente esse código:

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
font-weight: bold;
font-size: 100%;
line-height: 1.4em;
letter-spacing:.1em;
color: #fff; /*** cor do "Postar um comentário" e "x comentários:" ***/
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 15px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#comments-block {
margin:1em 0 1.5em;
line-height: 1.6em;
}
#comments-block .comment-author {
background: #666; /*** 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: #D3D3D3; /*** fundo da área do comentário ***/
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 15px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#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 ***/
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 15px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
margin: 10px 0 2em;
font-style: italic;
color: #171717; /*** cor do recado de 'comentário deletado' ***/
-webkit-border-radius: 15px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 15px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 15px;
border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
}

se você quiser esse aqui:

acrescente esse código:

/* Comments
----------------------------------------------- */
#comments {
background: url (http://i51.tinypic.com/1y70ig.gif); none repeat scroll top center;
padding: 15px;
}
#comments .comment-author {
padding-top: 1.5em;
}
#comments h4 {
margin: 1em 0;
font-weight: bold;
font-size: 90%;
line-height: 1.4em;
letter-spacing:.1em;
color: #f56bcc; /*** 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: #666666; /*** fundo do autor ***/
font-size: 15px; /*** 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: #D1F3F3; /*** fundo da área do comentário ***/
-webkit-border-radius: 10px; /*** bordas arredondadas na área do comentário ***/
-moz-border-radius: 10px;
border-radius: 10px;
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 90%; /*** 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: #666666; /*** cor do recado de 'comentário deletado' ***/
}

Depois vocês só é só editar com as cores que vocês preferirem e vizualiazar para ver se está tudo ok. espero ter ajudado alguém beijos pra vocês.