Comentários Personalizados para Blogger

Olha aqui outro tutorial de comentários, rs.
É que ainda não fiquei satisfeita com o último que tinha colocado, e aí fui procurar mais.
Achei um no Moda Possessiva que adorei. E é claaaaro que tinha que trazer para vocês também!

Seus comentários ficarão assim:

Vá em modelo - Editar HTML e aperte Ctrl + F e procure por  ]]></b:skin>
Acima desse código achado, cole esse abaixo:

/* Comentários personalizados*/



.comments{



width:90% !important;/* tamanho da área do comentários, pode  diminuir ou aumentar*/



margin:0 auto;



 font: 1em normal   "verdana"!important;



/*HEADING(1 comentario, 2 comentários...)*/



background:#fff  !important/* cor de fundo */;






color:#fff;

border-radius:50px;
}


color:#000000;             /* Cor do texto*/

.comments h3,.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
font: 20px "verdana"  !important;
}


background:#fff;         /* Cor de fundo */

/*BLOCO*/
.comments .comment-block {
position:static !important;  /* Mantém o  Avatar na Frente */
margin-left:28px;


border-bottom-right-radius:5px;

padding:0 15px 5px 23px;
border-top:5px #F5E6F9 solid;
border-bottom-left-radius:30px;
box-shadow:0 0 3px #aaa
}


/* estilos para o nome do autor do comentário */

.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}


background:#F5E6F9; /* cor de fundo */ 

.comments .comments-content .user a,.comments .comments-content .user{
 font-style:normal;
border:0;
color:#810089 !important;
font: 22px  "verdana";
padding:4px 36px;


font: 9px bold  courier new;

 margin-left:-8px;
 border-bottom-right-radius:10px;
margin-top:-2px
}
/* estilo da data */
.comments .comments-content .datetime a{
 background: transparent  !important;
float:right;


border-radius:60px;

color:#aaa;
border:0 !important
}
/* estilo do avatar */
.avatar-image-container {
position:absolute !important;
min-width:60px;
min-height:60px;
border:5px #F5E6F9 solid;
padding:0  !important;


min-height:60px;

box-shadow:0 0 3px #febdc4;
margin-left:-9px !important;
margin-top:0 !important;
background:#fff;
overflow:hidden
}
.avatar-image-container img {
margin:0;
display:block;
max-height:60px;
max-width:60px;
min-width:60px;


text-shadow:0 0  !important;

padding:0 !important;
border-radius:60px;
border:0 !important;
overflow:hidden /* hack para  evitar serrilhado na imagem */
}
/*TEXTO DO COMENTÁRIO*/
.comments p{
font:1em "courier new" !important;
padding-left:20px !important;


margin-top:-45px !important;

color:#000000 !important
}
/* botao responder do segundo nível */
.comments .continue a {
background:#fff !important;
color:#777  !important;
float:right;
padding:2px 4px!important;
height:23px;
line-height:23px !important;
 text-shadow:0 0 !important


margin:5px;

}
/* botao responder do primeiro nível, mais estilos para o botão do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font:1em  "helvetica" !important;
color:#fff;
padding:3px 6px;
border:0  !important;
line-height:30px;


.comments .comment .comment-actions a:hover,.comments .comments-content  .user a:hover { text-decoration:none !important;

margin-left:10px;
text-shadow:  0 1px #999;
border-radius: .5em;
background: #ff82ab;
font-weight:800;
box-shadow:inset 0 1px 2px #666
}
/* botao hover*/
padding-bottom:4px
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {


.comments .thread-toggle,.icon.blog-author  {

background-color:transparent  !important;
padding:0.5em 1em;
border-radius:5px;
 border:1px #ddd dashed  !important
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {
border-top:0 !important
}
display:none !important
}


.comments .comments-content strong  {

/*estilos para formatação do texto dos comments*/
.comments .comments-content a{

color:#000;
padding-left:15px;
font-weight:400
}
.comments  .comments-content em{
font:normal 12px 'segoe script';
color:#fff
}
.comments .comments-content b{
font:bold 11px  'arial';
color:#999;
text-shadow:0 0
}
margin:10px 0;
border:1px #fff  solid;


/*Fim do código*/





Mude somente itens como cor do fundo, nada mais  do que isso, caso contrário o código dará errado.

Veja os códigos das cores lá no meu post ensinando a Personalizar Barra de Rolagem no Blogger.