Tutorial: como personalizar os comentários do blogger


Hoje tenho um novo tutorial pra vocês de uma modelo de comentário que uso aqui no meu blog. É super fácil e não é nada extenso. Só será necessário mudar as cores do código de acordo com o seu gosto e estilo do seu blog, e para saber mais sobre cores em HTML, você pode consultar esta tabela.
Os comentários do seu blog ficará mais ou menos assim:

Os códigos são do falecido Cherry Bomb com algumas mudanças feitas por mim.

Para deixar os comentários assim, vá em Modelo > Editar HTML. Aperte Ctrl + F e procure por ]]></b:skin> e cole o código a seguir EM CIMA da tag procurada.


/________________________INICIO COMENTARIOS - CHERRYBOOMB.COM___________________________/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #SUACOR; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*Tamanho da fonte*/}
#comments {
background: #SUACOR; /*Fundo da área geral dos comentários*/
padding: 15px;
}
.comments .comment-block { margin-left: 70px; /*Espaço entre o avatar e o corpo do comentário*/}

.comment-header {
background: #SUACOR; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #SUACOR; /*Borda de onde fica o nome do autor do comentário*/
padding: 3px;}
.comment-header a {
color: #SUACOR !important; /*Cor do nome do autor do comentário*/
font-family: Verdana; /*Fonte do nome do autor do comentário*/
font-size: 16px; /*Tamanho da fonte do nome do autor do comentário*/
font-weight: normal; /*Troque normal por bold para deixar o texto em negrito*/}
.comment-header a:hover { color: #SUACOR !important; /*Cor do nome do autor do comentário quando passa o mouse*/
text-decoration: none;}

.comments .comments-content .datetime a{
font-size: 10px !important; /*Tamanho da fonte da hora e data do comentário*/
float: right; /*Data alinha á direita*/
line-height: 16px; /*Altura da linha da data e hora*/}

.comments .comments-content .comment-content{ /*Bloco de texto do comentário*/
margin-top: -10px; /*Espaço entre o bloco de texto do comentário e o nome do autor. Só mexa se souber o que está fazendo*/
position: relative;
background: #SUACOR; /*Fundo do bloco de texto do comentário*/
border: 1px solid #SUACOR; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: SUACORc; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #SUACOR; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}

.comments .avatar-image-container img{
/*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;}

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

.comments .comment .comment-actions a {
padding: 5px;
background: #SUACOR; /*Fundo dos botões responder e excluir*/
border: 1px solid #SUACOR; /*Borda dos botões responder e exluir*/
color: #SUACOR !important; /*Cor do texto dos botões responder e excluir*/
font-family: verdana; /*Fonte dos botões responder e excluir*/
font-weight: bold; /*Troque bold por normal para tirar o negrito*/
margin-right: 10px;}

.comments .comment .comment-actions a:hover {
background: #SUACOR; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #SUACOR; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #SUACOR !important; /*Cor do texto dos botões responder e excluir quando passa o mouse*/
text-decoration: none;}

.comments .continue { border-top: none;}
.comments .continue a {display: none;}

/_________FIM DOS COMENTARIOS CÓDIGO POR CHERRYBOOMB.COM NÃO RETIRE OS CRÉDITOS______________/

Onde está escrito #SUACOR, você muda pela cor desejada e que combine com o layout do seu blog. Use a tabela de cores e combine de forma harmoniosa. Todas as instruções estão no código, está tudo explicado e não altere nada que não souber o que é para não dar erro. 

21 comentários:

  1. Desculpe o incômodo. estou tentando colocar uma caixa dessas de comentário em meu blog logosvicente.blogspot.com porque abaixo dos posts não fica claro onde clicar pra comentar.

    ResponderExcluir
  2. Eu nao achei o codigo no meu oque eu faco?

    ResponderExcluir
    Respostas
    1. Qual modelo você usa? esse é para o modelo Travel.

      Excluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Olá.
    Deu super certo. Já fazem 02 semanas que estou testando outras dicas e a sua, foi a única que funcionou.
    Posso colocar esse link no meu blog?

    ResponderExcluir
  5. Gostei desse modelo, muito lindo =)

    Queria saber como faço para colocar uma imagem quando as pessoas comentarem colocando apenas o nome ou como autônomo. Gostaria de colocar o logotipo do blog.

    ResponderExcluir
  6. Oi eu não consigo fazer isso... Me ajuda pff? quando eu copio e colo e dps salvo, o código fica aparecendo no inicio do blog. Oq eu faço?

    ResponderExcluir
  7. da uma passadinha no meu blog? por favor http://tshowmshow.blogspot.com.br/

    ResponderExcluir
  8. Oi, eu coloquei o link no meu blog, mas não tô achando onde eu modifico a distancia entre o avatar e o bloco de texto?

    ResponderExcluir
  9. adoreii!!!
    segue o blog flor retribuoo
    http://luzcameraemakeupp1.blogspot.com.br/

    ResponderExcluir
  10. adoreii!!!
    segue o blog flor retribuoo
    http://luzcameraemakeupp1.blogspot.com.br/

    ResponderExcluir
  11. EU NÃO CONSEGUI?
    FIZ CONFORME PEDIU E NÃO DEU CERTO NO MEU BLOG

    ResponderExcluir
  12. EU NÃO CONSEGUI?
    FIZ CONFORME PEDIU E NÃO DEU CERTO NO MEU BLOG

    ResponderExcluir
  13. Muito obrigada! Deu super certo!

    http://sorrisoecorblog.blogspot.com.br/

    ResponderExcluir
  14. Muito Obrigada!!!!
    http://blogassuntodavez.blogspot.com.br/

    ResponderExcluir
  15. Eu não tenho a caixa de comentarios, como coloca?

    ResponderExcluir

© Conexão Hollywood - 2012. Todos os direitos reservados.
Criado por: Jhoyce Arruda.
Tecnologia do Blogger.
imagem-logo