Personalizando área de comentários

Tumblr_lr8e6rhy5i1qgc4kro1_500_large_large

Ninguém merece a área de comentários que o Blogger nos disponibiliza. Aquela cor sem vida e nada empolgante que estimule os visitantes a deixar um comentário.
Por isso trago hoje para você um tutorial para personalizar a área de comentários do seu blog
deixando do jeito que você quiser.


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, e o que mais você achar necessário. Para personalizar a foto de que comentou, aperte Ctrl+F ou f3 n 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;}

Para ajudar a fazer as alterações, use a tabela de cores
Os códigos são do blog Cherry Bomb 

20 comentários

  1. Adorei o tuto Nat!No próximo layout vou tentar usar com certeza.Beijos mil♥
    http://www.viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  2. Nossa super legal mais eu coloquei um ontem mesmo, quando eu for colocar um novo vou colocar o seu tutu, beijos♥
    exclusive-template.blogspot.com

    ResponderExcluir
  3. eu vou fazer amanhã adorei o tuto

    http://o-meu-ladooculto.blogspot.pt/

    ResponderExcluir
  4. Procurei tanto esse tutorial, quando eu tiver tempo vô usar.
    beijos
    http://garotamuitotimida.blogspot.com.br/

    ResponderExcluir
  5. Oii! Oque dizer de um blog tão maravilho como o seu? Fiquei impressionada com as suas postagens, com o seus textos! Eles são muito lindos! Sem falar nesse design que é um luxo! Continue assim florzinha, você tem um grande talento! Virei fã aqui do seu blog viu.
    Espero ansiosamente a sua visitinha no meu blog. e quem sabe ate uma nova seguidora né ?
    http://bemdepoiisdosdoze.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que tenha gostado, afinal tudo aqui é feito pensando em vocês queridos leitores
      Já virei seguidora do seu blog também!

      Excluir
  6. Adorei seu blog, achei super fofo.
    http://capricha-menina.blogspot.com.br

    ResponderExcluir
  7. Nossa os comentários ficaram lindos eu adoreei e ficou bem cute adoreeie Bjs :*http://www.pdisturbia.com/

    ResponderExcluir
  8. Verdade, obrigada!.

    http://extras-for-you.blogspot.com.br/

    ResponderExcluir
  9. Muito legal esse tutorial e o seu blog também!
    P.S: O layout tá lindo! Nota 1.000!
    cuteandhappy.tk

    ResponderExcluir
  10. Ai que lindo! Vou usar ainda no meu lay!
    Beijos
    www.garotaxmulher.com

    ResponderExcluir
    Respostas
    1. Adorei o tutorial, parece ser facil. Fica lindo..

      www.ingridsakamotodossantos.tk

      Excluir
  11. Ówwn, ameei o tutorial! Muito bom mesmo, vou tentar usar no meu blog...tomaara que dê certo! \Õ/

    Beeijo
    http://blogmymemories.tk

    ResponderExcluir
  12. Fica beeem legal! amei..
    http://pinkpimenta.blogspot.com.br/

    ResponderExcluir
  13. Que legal o tuto flor, parabéns pelo blog, muito e muito lindo. Estou seguindo
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  14. Oooi Nathalia, adorei sua visita no meu blog !
    seu tutorial é muito bom, estava procurando uns tutoriais legais como esses !
    ótimo...Beijão

    http://amaralstarlight.blogspot.com.br/

    ResponderExcluir
  15. Ai que fofo gente >< Seu blog é muito lindo! Vou tentar usar o tutorial tá? Você tem vagas pra afiliação? Me responde.
    Beijinhos ♥

    http://patricinhasdorock2.blogspot.com

    ResponderExcluir
  16. Adoreii nat ajuda muita,no meu proximo lay vou usar!
    gostaria de se afiliar a mim?
    http://grasievictor.blogspot.com.br/

    ResponderExcluir