Personalize os comentários do blogger


Personalizar a área dos comentários do blogger é mais simples do que parece, a única dificuldade para você que não tem noção nenhuma de html e css é a quantidade de códigos. Vou fazer de tudo para que o tutorial fique o mais claro possível. 

Vou ensinar a deixar a caixa dos cometários desse modelo, e depois personalizar :)


Antes de fazer qualquer modificação faça o backup do seu layout, e antes de começar a editar é preciso apagar os códigos do seu atual comentário. 

Depois que você apagou os códigos antigos, agora cole esses códigos no lugar.
/* ---estilo por enjoythelittllethings.blogspot.com / Bruna Borges----- */
/* ---  início dos comentários -------- */
#comments h4 {  margin: -5px 0 0 0 ;  font-weight: bold;  line-height: 1.4em;  text-transform:uppercase;letter-spacing: 1px; color: #90899b; font-family:'Baumans', cursive; font-size:18px; background:;   padding: 2px}
#comments{clear:both;float:center;width: 610x;padding:10px; margin-left: -3px; font-family:calibri;  background: #fff; box-shadow: 2px 2px 3px rgba(0,0,0,0.05); margin-top:-10px; color:#999999; font-sizer: 12px} 

/* - Data do do comentário - */
.comments .comments-content .datetime a{font-family:calibri;  font-size:12px;text-decoration:none; color: #ededed;  float: right; padding: 5px; }

/* - Ao Usuario/Dono - */
cite.user{color:#000; background: ; text-align:center;text-transform:uppercase;font-size:14px;padding: 8px; text-decoration:none; font-family:Arial,Helvetica,sans-serif;font-weight:normal;  position:relative;  margin-left:-5px;font-family: 'Englebert', sans-serif; font-size:14px;font-weight: normal;}
cite.user a{color: #fff}
.comments .comments-content .icon.blog-author {  background-repeat: no-repeat;
 background-image: url(http://static.tumblr.com/8buytvw/SjEmpq54q/userw2.png);}

/*--- Caixa do Comentário--- */
.comments .comment-block{padding:0px ;margin-left:54px;position:relative; border:1px solid #dddddd;; background:#f1f1f1; padding:4px;}   
.comments.comments-content.comment-replies{margin-left:0}}
.comment-content{white-space:pre-wrap;width:95%;word-wrap:break-word;}
.comments .comments-content .comment{margin-bottom:16px;padding-bottom:8px;}

/*--- Caixa com o nome do autor do comentário --- */
.comment-header{ background:#aeadad;  font-size:15px; border-bottom: 2px solid #fff; padding:8px; }
.comment-header a{color: #fff;}
.comments .comments-content {padding: 0px 5px 0px 2px;}

/*---Caixa de responder e Excluir comentário---*/
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin: 10px 0 10px 10px;  padding: 6px; color: #828282; text-align:center;text-decoration:none;height:auto; font-weight:normal; cursor:pointer;  background:;}
.comments .comment .comment-actions a:hover,.comments .comment .continue a:hover{text-decoration: none; color: #6ac2aa;}

/*---Avatar---*/
.avatar-image-container{float:leftvertical-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;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important;background: #90899b ;}

Salve e visualize.

Para facilitar a personalização dos comentários eu separei parte por parte com títulos. A foto mostra cada parte que você pode editar, fácil né?

  

Vou citar, de um modo geral, as partes que você vai/pode editar!
  • background: cor do fundo;
  • color; color:hover: cor da fonte;
  • color a ; color a:hover: cor do link;
  • font-size: tamanho da fonte;
  • font-family: tipo da fonte;
  • padding: controle de espaçamento; 
  • border ; border-bottom ; border-top: cor e espessura da borda (contorno);
  • text-transform: none: texto normal / capitalize: todas as primeiras letras do texto em maiúsculas / uppercase: todas as letras do texto em maiúsculas / lowercase: todas as letras do texto em minúsculas;
  • letter-spacing: espaçamento do texto.
     
Obs: Na parte do "ao usuário/dono"  ao lado do nome do dono do blog fica um ícone. Procure este código:
.comments .comments-content .icon.blog-author {  background-repeat: no-repeat;
 background-image: url(http://static.tumblr.com/8buytvw/SjEmpq54q/userw2.png);}
Na parte do "background-image: url (link do icone);}" basta trocar o link :DD


Obs II: A fonte que eu usei onde esta escrito "4 comentários" foi essa:
<link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'/>

Tentei deixa o tutorial o mais claro possível, mas qualquer dúvida/questionamento deixe nos cometários,
Beijos!

Comente pelo Facebook

51 comentários:

  1. Excelente. Parabéns! Muito legal mesmo!!*-*

    ResponderExcluir
  2. Adorei esse tuto, fica pfto.

    Com muitas árvores, Queen Woolli.
    quirky-tree.blogspot.com

    ResponderExcluir
    Respostas
    1. ahaha, você sempre um amor né Juliana!
      Obrigada :D

      Excluir
  3. Adorei o tutorial, flor. Em breve vou usar seus tutoriais, kkk. beijoooss

    ResponderExcluir
  4. Oi Bruna :) Queria muito usar o Layout #4 - Fluffy Purple, eu baixei ele, só que o código que aparece tem coisas do tipo: ï×bÁ ÒA,²ÝQ­Ï'EŠäævãÕ­YÝû¨MŸ÷ Û4íT­g—·~\~y›8Cɽ+sÁåõpñÿ. Você poderia me mandar o código pro meu e-mail?? Se puder obrigada :) annakarllar@hotmail.com

    ResponderExcluir
    Respostas
    1. Como? Acho que você esta fazendo alguma coisa errada, basta copiar e colar o código. Lembre-se, é preciso apagar o código antigo. Abrçs.

      Excluir
    2. Não está dando certo :( Teria como você colocar em outro site pra poder baixar ou disponibilizar o código de alguma outra forma?? Pq eu dei uma olhada nos comentários lá do post, e não é só eu q estou tendo problemas para baixar/instalar o layout... Se tiver como :D

      Excluir
  5. Olá Bruna :3
    vc poderia ensinar a fazer um menu igual esse do seu blog?
    é tão lindo! sempre que venho aqui fico admirando ele rsrsrs

    ResponderExcluir
    Respostas
    1. Claro, aguardem o próximo tutorial :)

      Excluir
    2. http://www.fnur.bu.edu.eg/
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/422-2013-12-10-10-18-01
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/421-2013-12-10-09-48-39
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/419-2013-12-09-07-21-12
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/420-2013-12-10-09-48-38
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/417-2013
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/418-2013-12-09-07-17-28
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/415-2013-12-03-08-09-23
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/416-2013-12-03-08-25-21
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/413-2013-11-21-07-50-21
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/414-2013-11-25-09-38-30
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/411-2013-11-20-08-11-53
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/412-2014
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/409-2013-2014
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/410-2013-11-13-17-25-28
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/407-2013-11-09-08-51-15
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/408-2013-11-13-11-55-53
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/405-2013-11-09-08-42-05
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/406-2013-11-09-08-46-10
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/403-2013-11-09-08-25-45
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/404-2013-11-09-08-28-15
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/400-2013-11-09-07-50-13
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/401-2013-11-09-08-03-31
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/398-2013-11-09-07-29-40
      www.fnur.bu.edu.eg/fnur/index.php/main-news/item/399-2013-11-09-07-43-49
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/397-eugen-ionesco
      http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/402-2014-2013

      Excluir
  6. Que fofo!!! Pena que meu blog não é no blogger :( mas enfim, tenho amigas que usam o blogspot e vou indicar esse tutorial para elas.

    ResponderExcluir
  7. Dona Bruna, tenho uma perguntinha a lhe fazer, espero que não seja incômodo :3
    Assim, eu to usando um dos teus lindos layouts, aí fui dar uma editadinha básica, e mudei o menu e não sei como centralizo esse menu que eu coloquei agora! HELP ME! Já tentei de tudo, mas já to de saco cheio euheuehu Se puder dar uma olhadinha e me ajudar, eu agradeço!

    ResponderExcluir
    Respostas
    1. Não é incômodo Jéssica :D
      Olha só, eu vi que você trocou o menu, caso você precise do código do menu, envia uma mensagem la na Page do face e eu te passo os códigos ok?

      Beijos :D

      Excluir
  8. Woow, admito que agora estou sem o tempo necessário pra conferir o seu post na íntegra. Mas olha, me interesso BASTANTE no assunto e quero mudar a parte dos comentários do meu blog. Muito interessante! :D

    ResponderExcluir
  9. ATENÇÃO SÓ FALTAM 3 DIAS PARA O SORTEIO,Olá!!!, Deus te abençoe, seu blog é um show amei sucesso A-R-R-A-S-O-U , já estou te seguindo. Minha amiga eu agradeço a Deus e a você por 1.000 participante e agora estou fazendo um sorteio no meu blog pela a meta comprida, e espero você lá no meu blog, e não esqueça de inscreve no meu canal do you tube
    Blog: http://arrasandonobatomvermelho.blogspot.com.br/

    ResponderExcluir
  10. Oi Bruna, tudo bom? Eu sei que pode ser muito chato fazer essas perguntas mas eu gostaria muito de participar do seu blog como colaboradora... :( adoro o seu cantinho e gostaria de fazer parte! Enfim, não há nenhuma chance? Beijos, está de parabéns, aqui só vai ficando mais lindo a cada dia.

    ResponderExcluir
  11. OOOOOOOOOOOOi, passei para avisar que eu te marquei em uma tag no meu blog, corre la para dar uma olhada: http://eaimarry.blogspot.com.br/2013/07/tag-sete-pecados-capitais-da-leitura.html
    Beijos

    ResponderExcluir
  12. ótimo tutorial!! muito obrigada, seu blog é perfeito <3

    ResponderExcluir
  13. como que eu acho os codigos do comentario?

    ResponderExcluir
    Respostas
    1. Você vai procurar alguma coisa com "comments" depois basta apagar tudo.

      Excluir
  14. Pera como eu excluo os códigos antigos?

    ResponderExcluir
  15. Amei o tutorial, estou até utilizando no layout que estou fazendo. Tenho uma dúvida, como faço para tirar a data dos comentários?

    Beijinhos

    ResponderExcluir
  16. Este comentário foi removido pelo autor.

    ResponderExcluir
  17. Já procurei onde deve apagar, mas não acho. :/

    ResponderExcluir
  18. Já futuquei o blog inteiro e não consegui resolver. Pode me mandar seu e-mail para eu te mostrar como está o código?
    o meu é cinthiasampaio@hotmail.com

    Beijos.

    ResponderExcluir
  19. AMÉMMMMMM! EU CONSEGUI!
    MUITOOOOOO OBRIGADA PELA POSTAGEM, SUA LINDA.
    FOI MUITO ÚTIL!

    ResponderExcluir
  20. Oi querida! peguei um lay seu e ele não tem os comentários.. pode me ajudar??

    ResponderExcluir
  21. Ah, ah, aqui não deu certo não :/
    Ficou só tudo branco no fundo e só.. .

    ResponderExcluir
  22. o meu backup é copiar tudo pro bloco de notas kkk

    ResponderExcluir
  23. Este comentário foi removido pelo autor.

    ResponderExcluir
  24. Oi Bruh amei o seu blog até uso um dos seus layouts!
    Mais o problema é que ninguém consegue comentar eu já tentei colar os códigos desse post mais eu não consigo não aparece nada você poderia me ajudar?
    Dá uma olhadinha lá no meu blog para você entender melhor o que eu estou dizendo
    http://thamirysnogueira.blogspot.com.br/
    Bjs...

    ResponderExcluir
  25. Adorei
    nascieprabrilhar.blogspot.com

    ResponderExcluir
  26. Adorei!Sério me ajudou muito!bj
    http://distractionsofaagirl-oficial.blogspot.com.br/

    ResponderExcluir
  27. Não sei como coloco os links das minhas redes sociais! Eu substituo onde?

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

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

    ResponderExcluir
  29. Esse template é lindo! Ainda estou editando algumas coisinhas, mas em breve estarei usando ele.

    Muito obrigada, Bruh!

    ResponderExcluir
  30. Bom dia!

    Não consegui. Meus comentários não ficam incorporados, mesmo depois de configurar.
    O que faço? Gostaria de colocar os do Blogger e do google + juntos.

    Bju

    ResponderExcluir
  31. Adorei o unico problema é: como apagar o modelo anterior...nao consigo =/

    ResponderExcluir
  32. Oie.... eu gostaria muito de usar esse codigo, mas estou com uma duvida: o que devo apagar e onde devo colocar este codigo?? Agradeceria se respondesse ^^
    Beijooos

    ResponderExcluir
  33. Caraca, ficou massa! Muito obrigada, Bruna o/ Na antiga forma de comentários, eu estava quebrando a cabeça para mudar a cor da font e agora não preciso me preocupar mais!
    xoxo
    http://thoughtsadventuresrmd.blogspot.com.br/

    ResponderExcluir
  34. Olá Gostaria de saber como apago os códigos antigos?

    Obrigada

    ResponderExcluir
  35. Oi, eu gostaria de saber como coloco uma caixinha tipo a sua antes dos comentarios pra não ficar tão feio a área de postagem.

    ResponderExcluir
  36. Oi, porque o avatar do comentario do blog perdir a qualidade? tem como dar jeito?

    ResponderExcluir
  37. Oi Bruna, td bem?
    Me tira uma dúvida por favor?
    Tem algum lugar que tenho que colocar meu nome dentro deste código?

    cite.user{color:#000; background: ; text-align:center;text-transform:uppercase;font-size:14px;padding: 8px; text-decoration:none; font-family:Arial,Helvetica,sans-serif;font-weight:normal; position:relative; margin-left:-5px;font-family: 'Englebert', sans-serif; font-size:14px;font-weight: normal;}
    cite.user a{color: #fff}
    .comments .comments-content .icon.blog-author { background-repeat: no-repeat;
    background-image: url(http://static.tumblr.com/8buytvw/SjEmpq54q/userw2

    Beijos e obrigada.

    ResponderExcluir
  38. Como assim apagar os códigos do comentário e colocar esse no lugar ? me ajuda por favor !

    ResponderExcluir