Personalizar comentários do Blogger - Versão 2

Personalizar comentários do Blogger - Miniatura
Já ensinei aqui como personalizar os comentários do Blogger, e devido ao sucesso desse artigo que recebe dezenas de visitas por dia oriundas do Google, decidi publicar um segundo tutorial ensinando a customizar essa área de comentários para deixá-la mais bonita e elegante afim de incentivar o interesse dos leitores a deixar um comentário.

Essa nova versão contará com três estilos diferentes, azul, rosa e verde, para que você possa escolher a cor que melhor combina com o template do seu blog.
Antes de começar a instalar esse recurso em seu blog, é recomendável que você faça um backup do seu template, assim, se ocorrer algum erro, você poderá voltar ao seu template original.

1° passo: Acesse o painel do blogger, escolha o blog que você deseja instalar, selecione a opção modelo e clique em "Editar HTML".

2° passo: Agora você deve escolher qual estilo deseja adicionar aos comentários do seu blog, copiar o código correspondente e colar acima da tag ]]></b:skin> (procure usando o Ctrl F).

Estilo azul

Personalizar comentários do Blogger - Estilo azul

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9EsbZ98zrel5-JyFlu-Enf3OPRT7nok9eqJ3ebdMrpgs_Yj299RcnWsPPewzgHZ0vNL80BqgkU3PHHtBBAn39fuX95ugx6-tBHAVn72H-YQrVmC7gff4ZLBkNfDfTI5cLCu6gnvCK-7o/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

Estilo rosa

Personalizar comentários do Blogger - Estilo rosa

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibChvwN2aPl48gXEGY7BVu5B9hhwWeZwm1QSbZ1bhOQ83ccbckFNchQdgGpR4G0flMsx6tZqlkjnhxvkGXu5LCeMrQ6X8zrDB0ExhMtWlFzsNPBJ9RhKB7RJKp0vTGRPjsULt-gj5KUPo/s320/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

Estilo verde


/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdnxsHzqfDnC2Nbo6vDmTBC8mhmCoTblnzYt-_S7bAJGWTHe_ZpGOeBg68a-SS_JumK7egiETsDRUC2QOezsb_QliLtDyPZteeWhzp7RBRap5m8M6s4mLQans0fTCpU4ymLO5x7jjknY/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

3° passo: Clique em "Salvar modelo" e veja o resultado.
Atenção: Se a opção responder não estiver funcionando após a inserção de um dos códigos acima, é porque os "Threaded Comments" não estão ativados em seu blog. Se esse for o seu caso ative agora mesmo a opção responder nos comentários do Blogger.
Gostou? Compartilhe:
Carlos Vinícius

Carlos Vinícius é blogueiro, programador e Web Designer. No momento está cursando o ensino médio e tem como principal sonho se tornar Problogger. Você o encontra também no Escola Sites e no Quero criar um blog.

23 comentários:

  1. Olá Carlos, o estilo disponibilizado acima é o que eu gosto mais. O seu tutorial está ótimo.

    Abraços e muito sucesso meu amigo.

    ResponderExcluir
    Respostas
    1. Olá Jackson,

      Obrigado pelo comentário. Eu ainda prefiro o estilo do primeiro tutorial, o que eu utilizo aqui no blog, mas gosto não se discute.

      Um grande abraço.

      Excluir
  2. Olá Carlos Vinícius tudo bem, é a primeira vez que visito seu Blog e estou gostando bastante, eu gostei muito desse tutorial, e aproveitar pra personalizar um dos meu blogs que é um projeto que tive a idéia de fazer pra agregar vários blogs e sites. Então eu utilizei o primeiro código da cor azul e fiquei agôniado por não ter combinado com o blog aí utilizei a seguinte cor #3d85c6 e ficou muito ótimo. E hoje como eu já entendo um pouco de código html, procuro fuçar de todo jeito pra deixar de um modo legal e que combine sabe. Mas parabéns pelo seu blog sucesso sempre. Se você quiser dar uma olhada é só acessar www.galeriabes.blogspot.com.br foi nele que adicionei o código pra personalizar o comentário, espero que goste também, abraços. Voltarei mas vezes.

    ResponderExcluir
    Respostas
    1. Olá Cristian,

      Muito obrigado pelo comentário. Fico feliz em saber que gostastes do blog e desse tutorial.

      Abraços e volte sempre.

      Excluir
  3. Olá Carlos.

    Muito bom. Realmente gostei muito desses estilos, são elegantes e simples.

    Abraços!

    ResponderExcluir
    Respostas
    1. Obrigado pelo comentário Herlan., fico feliz que tenha gostado.

      Abraços.

      Excluir
  4. Olá Carlos,
    me ajude por favor, gostaria de retirar o balão azul de cima do SEJA O PRIMEIRO A COMENTAR.
    POSTAR UM COMENTÁRIO
    Pois minha fonte é grande e acaba juntando os dos balões de forma estranha e n combina com o blog.
    Agradeço desde já

    ResponderExcluir
    Respostas
    1. Olá Danilo,

      Para retirar esse balão procure no seu código fonte (usando o Ctrl F) pela seguinte linha:

      #comments h4{display:inline;padding:10px;line-height:40px}

      E a selecione até a linha:

      #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}

      Agora apague todo esse trecho selecionado e clique em "Salvar modelo".

      Espero ter ajudado.

      Excluir
  5. Carlos,
    Retirando isso, o texto "Um comentário", Dois comentários", e.t.c. Continua com um background Azul. E se não for muito incomodo, tem como deixar transparente o local onda fica o texto que a pessoa escreveu e mudar a cor do texto? Se não ter como, mesmo assim me responda sobre como tirar o background se puder.
    Obrigado desde já.

    ResponderExcluir
    Respostas
    1. Danilo, tem certeza que fez o que eu disse? Em meus testes funcionou perfeitamente.

      Abraços.

      Excluir
  6. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
    Respostas
    1. Olá Francisco,

      Sinto muito mas tive que censurar seu comentário por conter um link desnecessário.

      Grato!

      Excluir
    2. Olá, não estou conseguindo colocar no meu blog, aparece isso : Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
      Mensagem de erro em XML: The element type "b:skin" must be terminated by the matching end-tag "".

      Error 500

      Excluir
    3. Isso aconteceu porque você provavelmente inseriu o código da maneira errada. Leia o tutorial mais atentamente e tente novamente.

      Abraços.

      Excluir
  7. é necessário adicionar algum CSS? meu blog não reconhece os estilos

    ResponderExcluir
    Respostas
    1. O único CSS é o já citado no artigo. Se ele não funciona, então tente ativar a opção responder dos comentários, talvez funcione.

      Abraços.

      Excluir
  8. olá colei o código mas não funcionou no meu blogger... pode me ajudar? eu quero um quadrinho onde as pessoas entram e já digitam seu comentários sem precisar clicar em nada.. tipo esse seu.
    Dê uma olhada no meu blogger...http://maestroadao.blogspot.com.br

    ResponderExcluir
  9. Consegui visualizar mas ele só aparece quando entro na postagem, e como minhas postagens ficam na mesma página eu preciso que fique no fim de cada postagem, no lugar de "nenhum comentário" ou "2 comentários" entendeu? me ajude por favor

    ResponderExcluir
    Respostas
    1. Olá Adão, não tem como fazer isso... só é possível que os comentários apareçam nas páginas internas e não na página inicial.

      Abraços.

      Excluir
  10. gostei muito do site,os tutoriais são muito bem explicados, mas eu também estou com um problema, o texto ficou pra fora,ele segue uma linha reta ao em vez de 2 , quando o comentário é grande.
    http://novotestebax.blogspot.com.br/2013/09/postagem-teste.html?showComment=1378700745673
    agradeço desde já!
    Ate +

    ResponderExcluir
  11. Gostei, agora so falta colocar a minha area do comentario branca :/ hehehe obg pela ajuda

    ResponderExcluir
  12. Ola por favor como posso resolver esse erro!! help
    The element type "b:skin" must be terminated by the matching end-tag

    ResponderExcluir
  13. O Meu Aqui Ficou com 2 Comentarios o personalizado e o outro de antes

    ResponderExcluir