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).
3° passo: Clique em "Salvar modelo" e veja o resultado.
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
/*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
/*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.
[Fonte: Spice Up Your Blog]
Olá Carlos, o estilo disponibilizado acima é o que eu gosto mais. O seu tutorial está ótimo.
ResponderExcluirAbraços e muito sucesso meu amigo.
Olá Jackson,
ExcluirObrigado 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.
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.
ResponderExcluirOlá Cristian,
ExcluirMuito obrigado pelo comentário. Fico feliz em saber que gostastes do blog e desse tutorial.
Abraços e volte sempre.
Olá Carlos.
ResponderExcluirMuito bom. Realmente gostei muito desses estilos, são elegantes e simples.
Abraços!
Obrigado pelo comentário Herlan., fico feliz que tenha gostado.
ExcluirAbraços.
Olá Carlos,
ResponderExcluirme 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á
Olá Danilo,
ExcluirPara 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.
Carlos,
ResponderExcluirRetirando 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á.
Danilo, tem certeza que fez o que eu disse? Em meus testes funcionou perfeitamente.
ExcluirAbraços.
Este comentário foi removido por um administrador do blog.
ResponderExcluirOlá Francisco,
ExcluirSinto muito mas tive que censurar seu comentário por conter um link desnecessário.
Grato!
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.
ExcluirMensagem de erro em XML: The element type "b:skin" must be terminated by the matching end-tag "".
Error 500
Isso aconteceu porque você provavelmente inseriu o código da maneira errada. Leia o tutorial mais atentamente e tente novamente.
ExcluirAbraços.
é necessário adicionar algum CSS? meu blog não reconhece os estilos
ResponderExcluirO ú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.
ExcluirAbraços.
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.
ResponderExcluirDê uma olhada no meu blogger...http://maestroadao.blogspot.com.br
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
ResponderExcluirOlá 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.
ExcluirAbraços.
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.
ResponderExcluirhttp://novotestebax.blogspot.com.br/2013/09/postagem-teste.html?showComment=1378700745673
agradeço desde já!
Ate +
Gostei, agora so falta colocar a minha area do comentario branca :/ hehehe obg pela ajuda
ResponderExcluirOla por favor como posso resolver esse erro!! help
ResponderExcluirThe element type "b:skin" must be terminated by the matching end-tag
O Meu Aqui Ficou com 2 Comentarios o personalizado e o outro de antes
ResponderExcluir