Personalize a área dos comentários

Eu acho que um dos maiores pontos fracos dos modelos do blogger, é a área dos comentários, que vem com um fundo cinza muito feinho e sem opções para personalizar pelo designer de modelo. Mas hoje trago a solução para esse problema. Vocês vão poder deixar os seus comentários assim:







Bem melhor não? Mas atenção:

Devido as 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 umajanela pop-up ou em outra guia. Blogs onde os formulário de comentário aparece logo abaixo da postagem, por enquanto não podem ser personalizados.

 Outra coisa que é preciso destacar, é que não dá para visualizar os comentários antes de salvar o modelo. Ou seja, para ver como está ficando, você tem que salvar, depois abrir o blog para poder ver como ficaram os comentários. Então, é super importante, baixar uma cópia do seu modelo antes de começar as modificações.

Tudo entendido? Então vamos começar!

Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.

Aperte Ctrl+F e procure por #comments
Você deve apagar todo esse código:

#comments {
  background: $(comments.background);
  padding: 15px;
}
#comments .comment-author {
  padding-top: 1.5em;
}
#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}
#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}
.avatar-image-container {
  margin: .2em 0 0;
}

 E no lugar coloque esse:

#comments h4 { /* Este é titulo do formulario, onde mostra "X Comentários" e "Postar um comentário" */
margin:0;
color:#ff4d8e;
font-family: Lucida Handwriting;
font-weight: normal;
font-size:36px;
text-shadow: none;
}
#comments-block .comment-author { /* O espaço do nome de quem comentou */
background: #FFF; /*Cor de fundo do nome de quem comentou*/
color: #8fddf6; /*Cor da fonte*/
font-family: Trebuchet MS; /*Nome da fonte*/
font-size:16px; /*Tamanho da fonte*/
border-bottom: double 3px #8fddf6; /*Borda de baixo do nome*/
padding: 5px;
margin:.5em 0;
height:30px; /*Altura do espaço do nome*/
font-weight: normal; /*Peso da fonte. Mude de normal para strong se quiser o texto em negrito*/
}
#comments-block .comment-author a:link {
text-decoration: none;
}
#comments-block .comment-body { /* Area do texto do comentario */
background: #000; /*Fundo da área do comentário*/
margin-top: -2px; /*Margem externa do topo*/
padding: 5px;
font-family:Trebuchet MS; /*Nome da Fonte*/
font-size: 12px;/*Tamanho da fonte*/
color:#fff; /*Cor da fonte*/
width: 500px; /*Largura da área dos comentários, altere de acordo com seu blog*/
/*Bordas arredondadas da área do comentário*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
/*Fim do código da borda arredondada*/
}
#comments-block .comment-footer {
margin:7px 0 2em;
line-height: 1.4em;
font-size: 95%; /* tamanho da fonte da data do comentário */
text-align: right; /* alinhamento da data do comentário */
letter-spacing:.1em;
}
#comments-block .comment-footer a:link{
background: #b9ff46; /*Fundo da data do comentário*/
}
.deleted-comment a {
margin: 10px 0 2em;
font-style: italic;
color: #ccc; /*** cor do recado de 'comentário deletado' ***/
}

 Mude as cores, fontes e o que mais precisar. Agora para personalizar a foto de que comentou, aperte Ctrl+F novamente e procure por /* Content abaixo deste trecho você vai ver quem tem isso: body { Você deve colar o código abaixo antes de body {

div.avatar-image-container {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 1px 1px 3px #a7a7a7; /*Sombra do avatar*/
margin-top: -2px; /*Margem externa do topo, para alinhar o avatar*/
}
div.avatar-image-container img {
display:none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
/*Efeito de quando passar o mouse em cima da foto*/
div.avatar-image-container img:hover {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
opacity: 0.8; /*Opacidade*/
-moz-opacity: 0.8; /*Opacidade*/
-webkit-opacity: 0.8; /*Opacidade*/
}
div.avatar-image-container img.delayLoad {
display:block;
}

 Você pode mudar o efeito da imagem se quiser. Nesse código que eu passei o efeito é a imagem redonda, que fica quadrada quando passa o mouse em cima.