Comentários personalizados - modelos prontos para usar

Gente querida!
Vou postar uma série com alguns modelos prontos para a área dos comentários do blog.
Será um por vez, pra não ficar confuso, tá?
Usarei o marcador Comentários personalizados e tentarei postar 1 modelo por semana.

O modelo de hoje é este:

Atenção!
Tutorial para os templates do Design de Modelo do Blogger.
Caso seu template seja modificado, externo ao blog ou se sua área dos comentários tiver sido muito alterada será preciso testar antes.

Para colocar em seu blog, exatamente nessas cores, desse jeitinho, é muito simples:

Acesse a aba Modelo de seu blog.
Clique em Editar html.
Dentro da caixa do código tecle Ctrl+F e na barra de busca que expandir cole isso:

  ]]></b:skin>

Dê Enter para localizar.
Quando encontrar cole o código seguinte acima da tag encontrada:

/* Comments
----------------------------------------------- */
.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:20px;font-size:11px;}
.comments .comments-content{margin-bottom:25px;font-weight:normal;text-align:left;
font-color: #ffccff;}
.comments .comments-content .icon.blog-author{position:absolute;top: 2px;right: 90px;margin:0;background-image: url(.);width:15px;height:18px}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 5px 10px;
padding:0 5px;
color:#ffffff!important; /*--- cor da fonte do botão reply--- */
text-align: center;
text-decoration:none;
background: #FF3E7B;  /*--- cor de fundo do botão reply--- */
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #EF4569), color-stop(1, #EF4569) ); /*--- cor de fundo gradiente--- */
background: -moz-linear-gradient( center top, #EF4569 20%, #EF4569 100% );/*--- cor de fundo gradiente--- */
border-radius:3px;
-moz-border-radius:3px;
height:25px;
line-height:26px;
font-weight:normal;
cursor:pointer;
}
.comments .comments-content .comment-thread ol{
list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:50px;}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative;
}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{font-weight:normal;text-decoration:none;}
.comments .comments-content .datetime a{
font-size:11px;
float: right;
text-decoration:none; color:#FF3E7B; /* -- cor do link da data do comentário -- */
}
.comment-content{margin:0 0 8px;padding:0 5px;
}
.comments .comment-block{
margin-left:65px;
position:relative;
background:#fff; /* -- cor de fundo do comentário -- */
border:1px solid #FF3E7B; /* --- cor da borda do comentário ---*/
border-radius:5px;
-moz-border-radius:5px;
}
.comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
background-color:#fff;   /*--- cor de fundo--- */
font-size:15px;
border-top:5px solid #FF3E7B;  /*--- cor da borda --- */
padding:5px;
}
.comment-header a{
color: ; /*--- cor do link nome do autor do comentario --- */
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px;
}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.avatar-image-container{
float:left
vertical-align:middle;
overflow:hidden;
width:65px !important;
height:51px !important;
max-width:65px !important;
max-height:51px !important}
.comments .avatar-image-container img{
padding:2px;
border:1px solid #E72750;
width:45px !important;
height:45px !important
;max-width:45px !important;
max-height:45px !important;
}

Todas as alterações possíveis em termos de cores e fontes estão definidas no próprio código.
Depois de pronto clique em Salvar alterações.

Dicas extras

1. Caso um dia queira alterar ou reverter basta apagar o código inserido.
2. Aqui tem uma tabela de cores para você usar e escolher as cores que desejar.
3. Para copiar todos os códigos deste blog pare o mouse sobre o código e clique no primeiro ícone que aparecer, à sua direita. abrirá uma janela com o código prontinho para ser copiado.

Simples demais, né?

Gostou e deseja ter em seu blog mas não tem tempo ou jeito para fazer?
Entre em contato comigo, combinamos o pagamento e eu faço para você.

Conheça a web-série Como personalizar o blog

1. Como criar um blog: criação da conta Google e criação do blog
2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas; 
3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
6. Inserir assinatura personalizada;
7. Colocar Voltar ao topo com efeito deslizante;
8. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
9. Data dos posts em formato calendário
10. Número de comentários dentro de um balão