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
Adorei o tuto Nat!No próximo layout vou tentar usar com certeza.Beijos mil♥
ResponderExcluirhttp://www.viciadasemcupcake.blogspot.com.br/
Nossa super legal mais eu coloquei um ontem mesmo, quando eu for colocar um novo vou colocar o seu tutu, beijos♥
ResponderExcluirexclusive-template.blogspot.com
eu vou fazer amanhã adorei o tuto
ResponderExcluirhttp://o-meu-ladooculto.blogspot.pt/
Que legal, amei o tutu!
ResponderExcluirProcurei tanto esse tutorial, quando eu tiver tempo vô usar.
ResponderExcluirbeijos
http://garotamuitotimida.blogspot.com.br/
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.
ResponderExcluirEspero ansiosamente a sua visitinha no meu blog. e quem sabe ate uma nova seguidora né ?
http://bemdepoiisdosdoze.blogspot.com.br/
Que bom que tenha gostado, afinal tudo aqui é feito pensando em vocês queridos leitores
ExcluirJá virei seguidora do seu blog também!
Adorei seu blog, achei super fofo.
ResponderExcluirhttp://capricha-menina.blogspot.com.br
Nossa os comentários ficaram lindos eu adoreei e ficou bem cute adoreeie Bjs :*http://www.pdisturbia.com/
ResponderExcluirVerdade, obrigada!.
ResponderExcluirhttp://extras-for-you.blogspot.com.br/
Muito legal esse tutorial e o seu blog também!
ResponderExcluirP.S: O layout tá lindo! Nota 1.000!
cuteandhappy.tk
Ai que lindo! Vou usar ainda no meu lay!
ResponderExcluirBeijos
www.garotaxmulher.com
Adorei o tutorial, parece ser facil. Fica lindo..
Excluirwww.ingridsakamotodossantos.tk
Ówwn, ameei o tutorial! Muito bom mesmo, vou tentar usar no meu blog...tomaara que dê certo! \Õ/
ResponderExcluirBeeijo
http://blogmymemories.tk
Fica beeem legal! amei..
ResponderExcluirhttp://pinkpimenta.blogspot.com.br/
Que legal o tuto flor, parabéns pelo blog, muito e muito lindo. Estou seguindo
ResponderExcluirhttp://perfeitateen.blogspot.com/
Oooi Nathalia, adorei sua visita no meu blog !
ResponderExcluirseu tutorial é muito bom, estava procurando uns tutoriais legais como esses !
ótimo...Beijão
http://amaralstarlight.blogspot.com.br/
ah, to te seguindo também :D
ResponderExcluirAi que fofo gente >< Seu blog é muito lindo! Vou tentar usar o tutorial tá? Você tem vagas pra afiliação? Me responde.
ResponderExcluirBeijinhos ♥
http://patricinhasdorock2.blogspot.com
Adoreii nat ajuda muita,no meu proximo lay vou usar!
ResponderExcluirgostaria de se afiliar a mim?
http://grasievictor.blogspot.com.br/