Como personalizar os comentários do Blogger

terça-feira, outubro 15, 2013

Hello girls! Saudades dos tutoriais para blog? Guardei todos os pedidos, e vou publicando 1 post por semana. O tutorial de hoje foi solicitado há alguns dias atrás por uma leitora muito querida do blog.

Depois do layout, a área mais visualizada do blogger é a dos comentários; é nela que seus leitores deixam sua opinião sobre as postagens e a página em geral; por essa razão, esse espaço deve estar muito bem organizado e personalizado, condizendo sempre com o layout.
O tutorial de hoje vai te ajudar a fazer exatamente isso!
Usei tons de rosa e azul claro nessa personalização; se o seu blog já tiver cores assim, não precisa mudar nada; mas para quem tem o layout com cores diferentes é só seguir as regras que deixei no código para alterar.
1- Lembrando que para o tutorial funcionar seus comentários devem está "incorporados" na opção do Blogger. Em Painel do Blogger vá em Configurações ->Postagens e comentários -> Local do comentário, e marque a opção *incorporado*, salve.

2- Em seguida, no Painel do Blogger, vá em Modelo -> Editar HTML, aperte Ctrl+F e procure por ]]></b:skin>

3- Copie o código a seguir e cole logo acima do trecho que você encontrou
/**********************INICIO COMENTARIOS PERSONALIZADOS************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #64BCBA; /*Cor da fonte do numero total de comentarios*/
font-family: Comic Sans MS; /*Fonte do texto*/
font-size: 20px; /*Tamanho da fonte*/}
#comments {
background: #fff; /*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: #FF6699; /*Cor de fundo do nome do autor do comentário*/
border: 4px solid #FF6699; /*Borda  onde fica o nome do autor do comentário*/
border-radius: 20px 20px 0 0;
padding: 3px;}
.comment-header a {
color: #fff !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: bold; /*Troque bold por normal para tirar o negrito*/}
.comment-header a:hover { color: #FAA7B9 !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 alinhada a 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*/
position: relative;
background: #fff; /*Fundo do bloco de texto do comentário*/
border: 1px dashed #FF6699; /*Borda do bloco de texto do comentário*/
border-radius: 0 0 20px 20px;
padding: 10px;
color: #3f3f3f; /*Cor da fonte do bloco de texto do comentário*/
font-size: 11px; /*Tamanho da fonte*/}

.comments .avatar-image-container {
/*Tamanho do avatar */
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px;
background: #FAA7B9; /*Cor da borda do avatar*/
padding: 3px; /*Espessura da borda do avatar*/}

.comments .avatar-image-container img{
/*Tamanho do avatar */
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: #64BCBA; /*Fundo dos botões responder e excluir*/
border: 1px solid #64BCBA; /*Borda dos botões responder e exluir*/
-Moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
color: #fff !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: #FAA7B9; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #FAA7B9; /*Borda dos botões responder e excluir quando passa o mouse*/
color: #fff !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 POR WWW.PAPOGAROTA.COM.BR********/
4- E então Salve! 
5- Se precisar fazer alguma mudança, é necessário que você faça as alterações e vá salvando, pois não é possível visualizar a personalização dos comentários pelo editor do blogger, sem que essas alterações tenham sido salvas antes.
Não altere nada que não esteja nas instruções, caso contrário o código não irá funcionar.
Fácil não? Se tiver alguma dúvida, deixe um comentário logo abaixo, e aguarde minha resposta. Beijos e um ótimo dia!

Postagem mais recente Postagem mais antiga

Você também vai gostar

86 comentários

  1. Adoreeei ;)
    Amor tem post novo com look meu no blog,vem dá uma conferida?
    http://espacoteencomanaliasantos.blogspot.com.br/2013/10/meu-lookvestido-basico-preto.html
    Aguardo sua visita.Beijoos :*

    ResponderExcluir
  2. Olá Florzinha!

    Passei para conhecer o seu espaço. Já estou te seguindo e curtindo a sua fan page. Passa me visitar e se gostar me segue e me curte de volta!

    Sempre retribuo comentários!

    Beijos da Nane Balda
    http://meus-sonhos-meus-pesadelos.blogspot.com.br/

    ResponderExcluir
  3. Muito bom o tutorial, tô querendo mesmo mudar algumas coisas no meu blog!
    Hoje é dia de Clube da Luluzinha \o/
    Excelente terça!
    Beijinhos ;*

    bycarolinaa.com
    facebok.com/meudiarioescondido

    ResponderExcluir
  4. Amei as dicas! Vou usar em meu blog.

    www.cindereladementira.com.br

    ResponderExcluir
  5. Adoreiiii o tutorial, fica super fofo, mas eu não consigo colocar no meu blog....não sei porque. Acho que estou fazendo algumas coisa errada.
    Obrigada amore pela visita lá no Blog.
    Bjs
    www.laiscristine.com

    ResponderExcluir
  6. Adorei, vai ser muito útil para mim <3
    Beijos | http://do-seu-jeito.blogspot.com.br/

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

    ResponderExcluir
  8. Respostas
    1. Porque? Refaz o procedimento *_*

      Excluir
    2. Eu exclui toda a área html que tinha relação com os comentários e colei esse código que você botou, deu super certo, pelo menos eu não estava conseguindo encontrar esse código então fiz essa loucura e funcionou.
      Sabe o que eu queria Camila? Um tutorial de como deixar o nome ''Comente'' no final da postagem maior, o do seu template que eu uso (e é super lindo,obrigada) é muito pequenininho, visitando outros blogs já notei que o nome ''Comente'' é grandinho e personalizado dentro de balões,coraçõezinhos , enfim...
      Entendeu o que eu quis propor?
      Muito obrigada e parabéns, você tem talento e vai longe!

      Excluir
    3. Entedi sim flor, vai entrar pra lista e assim que puder sai o tutorial aqui no blog.
      Obrigada linda *_*
      Bjos

      Excluir
  9. Ajudou bastante! Obrigado ^_^

    ResponderExcluir
  10. amei é tão lindo vou usar no blog de doação bjs

    ResponderExcluir
  11. Eu não conseguir achar o código :'(

    ResponderExcluir
    Respostas
    1. Tenta passar o mouse por todo o código até o final, e só então aperte Ctrl+F e procure.

      Excluir
  12. Eu queria saber como personalizar a área de posts.. Eu ia fazer pelo Tuto da Gabs, mas o templates são dierentes então não funciona.. Poderia fazer um post relacionado a isso?

    ResponderExcluir
    Respostas
    1. Como seria a personalização que vc deseja, especifique!

      Excluir
  13. Foooi Muito útil Camila ! Obrigada !!!

    ResponderExcluir
  14. coloquei no meu, e ami, aqui o blog ^^ :::: http://mandsrockenbach.blogspot.com.br/

    ResponderExcluir
  15. Tbm não localizei o código no meu :\.

    ResponderExcluir
    Respostas
    1. Tenta passar o mouse por todo o código até o final, e só então aperte Ctrl+F e procure.

      Excluir
  16. Muito obrigado adorei a dica http://mundodasmeninas1001.blogspot.com.br/

    ResponderExcluir
  17. Poxa Poxa. Eu não consegui :(
    Só ficou o avatar colorido, mais nada.
    Poxa Poxa

    ResponderExcluir
  18. Oi Camila, obrigada pela dicas! Gostaria de saber como posso alterar o formarto para retangular como o seu e como coloco o nome dos comentarista de branco e não preto. Grata!

    ResponderExcluir
    Respostas
    1. Basta fazer as modificações nesse trecho de código que eu disponibilizei acima.

      Excluir
  19. Oi Camila, eu coloquei esse código e apareceu os comentários direitinho mas acontece que minha área de comentários duplicou! Aparece duas vezes os comentários. E meu botão de "Responder comentário" também não funciona mais. Sabe como posso fazer para mudar isso? Me ajude por favor!
    Beijinhos!

    ResponderExcluir
    Respostas
    1. Mas você estava usando algum template free disponibilizado por mim? Please deixe sua url pra eu averiguar

      Excluir
  20. Liiindo demais Camila...
    Já estou usando <3 <3

    ResponderExcluir
  21. oi tudo bem? fiz tudo certinho , porém ele não aparece, continua como estava antes.

    ResponderExcluir
  22. Adoorei!
    Ja estou usando, fiz algumas mudanças e deu certo, mas queria saber ondem uda a cor do fundo?

    ResponderExcluir
  23. Otimo tuto me ajudou muito !!!

    http://c-quente.blogspot.com.br/

    ResponderExcluir
  24. Me ajudou bastante , obrigada .

    http://amordemaes2.blogspot.com.br/

    ResponderExcluir
  25. Oi boa noite. Usei seu cod no meu blog estou ainda em fase de criação mas assim que terminar te aviso e coloco os devidos creditos.
    beijos e... ADOREI SEU SITE !!

    ResponderExcluir
  26. oi Camila , não estou conseguindo encontrar ]]> , o que eu faço ??? uso um template disponibilizado por você , me ajuda please ...
    http://fatofeminino.blogspot.com.br/

    ResponderExcluir
  27. Boa tarde Camila , recentemente estou usando um template que você disponibilizou e estou amando , gostaria em primeiro lugar agradecer e em segundo queria pedir se tem como você me ajudar a personalizar os comentários , porque estou tentando fazer do jeito que você ensinou , mas não estou conseguindo ....
    quando digito ]]> lá em html não consigo encontrar nada
    por favor me ajuda , bijussssss

    ResponderExcluir
  28. Valeu! Adorei meu blog: http://marianaclaricesomoda.blogspot.com.br/

    ResponderExcluir
  29. Oi Camila, gostei muito desse tutorial e estou colocando no meu blog, tomara que eu acerte.
    Beijos e obrigada.

    ResponderExcluir
  30. qual é o numero onde ta escrito ]]> eu n achei ;(

    ResponderExcluir
  31. Achei muito útil e coloquei no meu novo lay do meu Blog

    http://dudexshow.blogspot.com.br/

    ResponderExcluir
  32. Nossa, ficou ótimo! Muito obrigada <3
    Beijos,
    Starbooks

    ResponderExcluir
  33. Amei , me ajudou muito,ta de parabens,seu blog ta lindo demais

    ResponderExcluir
  34. Ficou tããão fofo *----*
    Ameii :)

    geeksfanfics.blogspot.com

    ResponderExcluir
  35. Obrigada deu certo ;)
    http://camiillami.blogspot.com.br/

    ResponderExcluir
  36. Por que o nome do meu blog ficou cinza
    estava rosa mais depois que coloquei o link dos
    comentários aconteceu isso
    pode me explicar bj
    http://camiillami.blogspot.com.br/

    ResponderExcluir
  37. Consegui u.u <3
    Amei seu blog <3
    Obg ' *-*

    ResponderExcluir
  38. Não consegui :( Amr passa no meu blog? http://tshowmshow.blogspot.com.br/

    ResponderExcluir
  39. Não consegui :( Amr passa no meu blog? http://tshowmshow.blogspot.com.br/

    ResponderExcluir
  40. Oi ! Bom eu fiz tudo como disse , mas quando salvo e visualizo , nao mudou nada . o qe eu faço ?

    ResponderExcluir
  41. Talvez algo que tenha q apagar ..n sei , eu copiei e colei logo acima do codigo . mas n tem q apagar nada nao ?

    ResponderExcluir
  42. Muito obrigada mesmo, era o que eu estava procurando! *-* <3

    ResponderExcluir
  43. Nao deu olha no meu blog =loucurasdabrina.blogspot.com.br

    ResponderExcluir
  44. Gostei muito, porém no meu quando coloquei deixou de aparecer as fotos das pessoas que comentam.

    ResponderExcluir
  45. oi adorei o post... muito obrigado !!!
    a propósito conhecam o meu blog tbm... apliquei este tuto lá
    http://luzcameraemakeupp1.blogspot.com.br/

    ResponderExcluir
  46. Brigadão :D muito útil...
    strawberry-cake-2.blogspot.com.br

    ResponderExcluir
  47. Oi , não entendi muito bem :/ tem video? beijos.

    ResponderExcluir
  48. Camila, vc tem minha gratidão, obrigada, tutorial Show, me ajudou mt.
    Este tutorial está sendo usado em meu blog.
    http://vida-semfim.blogspot.com.br/

    ResponderExcluir
  49. Eu tentei e deu super certo !!
    Beijos e Obrigada ^-^

    http://mulherdesalto2013.blogspot.com.br/

    ResponderExcluir
  50. ¡Muchas Gracias por el tutorial!
    Obrigado ^^

    ResponderExcluir
  51. Não conseguir fazer, tente no blog de teste foi mas no meu não foi :(

    ResponderExcluir
  52. como faz na nova versão do blogger?? :)

    ResponderExcluir
  53. Eu queria trocar a imagem do avatar mas não achei o lugar de trocar o url da imagem

    ResponderExcluir
  54. Amei! Muito obrigada! Super comentado, rsrsrs...
    Visita o meu blog?
    www.perdidanoslivros.com.br/

    ResponderExcluir
  55. não estou conseguindo :(

    http://umabelezaelaborada.blogspot.com.br/

    ResponderExcluir
  56. Ótimo tutorial. Só que o meu não funcionou colando acima de ]]> , funcionou colando acima de Variable Definitions.

    ResponderExcluir
  57. Amei Camila muito obrigada por esse tutorial,amei !
    Ficou lindo no meu blog.

    ResponderExcluir
  58. Ah,já ia esquecendo visita o meu blog,se gostar,seja bem vinda como membro.
    http://kellygfernandes.blogspot.com.br/

    ResponderExcluir
  59. Adorei a dica e já estou usando no meu blog!

    http://virandoamor.blogspot.com.br/

    ResponderExcluir
  60. Obrigada! foi muito útil.

    http://vestibulandaguerreira.blogspot.com.br/

    ResponderExcluir
  61. Olá bom dia!
    Muito bom e explicativo seu post, ficou ótimo!
    Obrigada!!

    ResponderExcluir
  62. Olá, Camila!
    Cliquei em modelo, editar HTML apertei ctrl+ F. O plano de fundo do meu blog ficou na cor branca e não consigo colocar cor ou outra imagem. Vc poderia me ajudar, agradeço.

    ResponderExcluir
  63. Oi, Camila!
    Comecei um blog recentemente e seu tutorial me ajudou bastante. Obrigada!
    Abraço,
    Anna

    EscrevendoAsas.com

    ResponderExcluir

Não deixe de comentar!
Sua opinião é muito importante para mim :D
Beijos...

Rolando no Blog!

Post em destaque ♡

Caixotes de feira na decoração

Se tem uma coisa que adoro fazer, é arte! <3 Me amarro em decoração, principalmente quando se trata de transformar lixo em artigos su...

Mais lidos da Semana