Como personalizar os comentários - Novo

|
Olá cerejitas e cerejitos! Tudo bem com vocês? Eu queria estar me dedicando mais ao blog, mas as condições da minha internet não me permitem. Sério, é mais lenta que uma tartaruga com reumatismo. Enquanto esse problema não for solucionado não poderei participar muito do grupo nem fazer layouts free. Mas assim que tudo voltar ao normal irei fazer aquele sorteio de um layout que prometi no outro post.

Agora chega de enrolar né? Sei que vocês estão doidos por esse tutorial, que é pedido a muito tempo, mas por ser um código trabalhoso, só agora tirei um tempo para editá-lo para que fique o mais fácil possível de entender. Eu já tinha feito um tutorial de como personalizar os comentários, mas ele serve apenas para os comentários que não têm a opção de resposta. Agora o tutorial está atualizado!

Antes de começar, vale lembrar de duas coisas muito importantes:
1 - Faça um backup do seu modelo antes de fazer qualquer tutorial. Assim se algo der errado, você pode reverter as alterações facilmente fazendo upload do modelo sem as alterações.
2 - Quando editamos os comentários não tem como visualizar antes de salvar. Então recomendo que você edite o código primeiro no bloco de notas, depois passe para o blog e salve. Aí se algo ainda precisar de ajustes, você modifica, salva e visualiza até ficar como você quer. (É bem cansativo)

Agora sim, vamos ao tutorial! Seus comentários deverão ficar mais ou menos assim:
O modelo é bem simples, mas você pode incrementar depois usando seus conhecimentos em css ^^ O código já está com esses tons de lilás, então seu layout tiver essas cores nem vai precisar mudar muita coisa.

Para deixar os comentários assim, abra o Modelo HTML do blog, e cole o código a seguir acima de ]]></b:skin>


Código
/*****************************INICIO COMENTARIOS - CHERRYBOOMB.COM*****************************/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #c19bdf; /*Cor da fonte*/
font-family: Verdana; /*Fonte do texto*/
font-size: 18px; /*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: #c19bdf; /*Cor de fundo do nome do autor do comentário*/
border: 1px solid #9e80b6; /*Borda de onde fica o nome do autor do comentário*/
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: normal; /*Troque normal por bold para deixar o texto em negrito*/}
.comment-header a:hover { color: #684980 !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: #e7dceb; /*Fundo do bloco de texto do comentário*/
border: 1px solid #cdc3d0; /*Borda do bloco de texto do comentário*/
padding: 10px;
color: #4c4c4c; /*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: #d2b6e5; /*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: #d2b6e5; /*Fundo dos botões responder e excluir*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir*/
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: #e3c6f6; /*Fundo dos botões responder e excluir quando passa o mouse*/
border: 1px solid #b59dc6; /*Borda dos botões responder e exluir quando passa o mouse*/
color: #684980 !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************/

Todas as instruções estão no código, não altere nada que não souber para não dar erro depois. Faça todas as alterações com muito cuidado para não apagar nada sem querer. Salve e visualize se ficou tudo ao seu gosto.

Se seus comentários não estiverem com a opção de resposta, vá em Configurações > Postagens e comentários  e onde está escrito "Local do comentário" mude para incorporado e salve.

Espero que tenham gostado e que dê tudo certinho para vocês. Em um outro post trago modelos prontos para vocês.

Kissus!

Gostou deste tutorial e quer reblogar? Leia as regras primeiro!

119 comentários

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Bem prático, amei! https://umaesposacrista.blogspot.com/

      Excluir
  2. Ótimo tutorial, muito útil para quem não sabe muita coisa de html...Vou usar viu ?
    Adorei, Liah seus comentário estão indo tudo para spam! O que esta acontecendo?

    Kisses ;*
    ~ The Things Girls // Visita?!

    ResponderExcluir
  3. Olá! Que tutorial ótimo *o* Achei incrível :D Super útil e tem um resultado lindo :D

    Beijos, Mrs. Nightshade.

    ResponderExcluir
  4. Peguei o tutorial Liah ! eu realmenet estava procurando um,esse é mt kawaii *0*



    http://liemarieoficial.blogspot.com.br/

    ResponderExcluir
  5. Gostei desse novo tutorial, vou testar no novo layout do blog.

    http://www.profanofeminino.com/

    ResponderExcluir
  6. Aaah amei o tutorial! Já testei no meu e ficou ótimo!
    a-miganemteconto.blogspot.com.br/

    ResponderExcluir
  7. Finalmente alguém lembrou dos meninos, pois os blogs geralmente só se referem as meninas (mais deixa quieto). Eu estou bem, obrigado por perguntar rsrs, espero que sua situação com a net se instabilize logo.

    Nossa, esse estilo de comentários é mega lindo! E é bem fácil de fazer, pelo menos achei, kisus.

    Kuusou World Desculpe-me por ter desaparecido daqui...

    ResponderExcluir
  8. Oi gente , poderiam dar uma passada e me ajudar pfvr ??

    perfeitasmodasdeisabelle.blogspot.com

    ResponderExcluir
  9. Muito legal o tuto Liah, e o melhor é que fica bem bonito.
    Beijos

    modaetutorial.blogspot.com

    ResponderExcluir
  10. Muito bacana o tutorial vou usar beijos...

    http://kawaiitutosmf.blogspot.com.br/

    ResponderExcluir
  11. Os resultado é muito bom, eu usei e ficou lindo
    Conheça meu cantinho: maniasdegaroto.com

    ResponderExcluir
  12. Fica perfeito, no próximo layout do blog que se Deus quiser eu que irei fazer, irei usar esses comentários ♥
    Ri muito com a "tartaruga com reumatismo" HUASHUAS'
    Beijos ;* | alittlegirl-and-bigdreams.blogspot.com

    ResponderExcluir
  13. Adorei o tutorial, Liah ^^ ♥
    Fica muito fofo o resultado, bem organizado. Acho que usarei da próxima vez que personalizar a área dos comentários ^^
    Sorteio de layout? Nossa! *-*
    Ah, e estou extremamente agradecida por ter colocado o meu blog no gadget do Recomendo *-* Muito obrigada, é uma honra! *---*

    Beijos :3
    @Catching Stars

    ResponderExcluir
  14. Gostei demais :) Obriado pela dica
    Entre em meu Blog www.putizgrilow.blogspot.com

    ResponderExcluir
  15. super, com certeza usarei em meu próximo layout, super o tuto!

    Adolescente Nerd

    ResponderExcluir
  16. ficou muito lindo adooreiii, o codigo ficou super facil de entenderr o/
    acervo-de-livros.blogspot.com

    ResponderExcluir
  17. Fica lindo e bem clean, tem esse estilo lá no blog!

    Beijo,
    http://paraisodemenina.blogspot.com/

    ResponderExcluir
  18. Meu Deus, como sempre... a danada da Liah arrasa. Obrigadão por partilhar, viu Liah! :)

    Obs: Aquele outro tutorial de personalizar os comentários não funcionou em meu template. Penso que motivo foi o Artisteer. Porém esse tutorial serviu direitinho. :D

    ResponderExcluir
  19. Super! Adorei o tutorial, super útil!
    Enfim, to com post novo no blog e vou adorar a sua presença por lá rs
    http://innsideofme.blogspot.com.br/
    Beijossss da Ju <3

    ResponderExcluir
  20. Muito legal, quando eu reformar meu layout eu vou usr!!!

    gabyfaria.blogspot.com

    ResponderExcluir
  21. Muito bom esse tutorial u.u Antes eu ficava louca procurando um tutorial como esse, até que encontrei o código em um outro blog e alterei do jeito que queria e usei no meu blog. Acho que é bem parecido com esse código, não sei haha

    ResponderExcluir
  22. Achei super interessante e Kawaii :3 ounw *-*

    Flor tem um Selinho para você lá no meu blog ... eu escolhi seu blog porque gosto muito e acho você uma fofa...Tem post novo lá no blog, convido você e seus leitores a darem uma conferida *u*

    Beijocas!!!

    http://sorriso-jovem.blogspot.com.br

    ResponderExcluir
  23. Oii, adoro seu blog, já usei alguns tutoriais aqui, e esse é muito bom para personalizar...(fique tranquila, eu dei os devidos créditos ;D )..confira vc mesma na sidebar (:
    bjs
    http://tinteiropoetico.blogspot.com.br/

    ResponderExcluir
  24. Obrigada pelo tutorial, já estou usando no meu blog!
    Beijos...

    Unhas da Ju

    ResponderExcluir
  25. Ficou muito legal. Vou usar no próximo layout do meu blog. talmeida.com

    ResponderExcluir
  26. Awn *-*
    Que divos ! Amei o código, está super fácil de personalizar <3

    ~ OMG, para tudo ! Eu afiliada da diva da Dália-chan? *OO*

    Já te coloquei na elite <3

    Kissu @The kawaiis

    ResponderExcluir
  27. Nossa Liah *-*
    É muito fofo essa personalização.
    Acho que eu deveria ter visto esse tuto antes de mudar meu lay...
    Curti esse sorteio de lay ^^

    Lost November

    ResponderExcluir
  28. O tuto fica muito lindo Liah!
    Mas olha, eu tenho a maior preguiça de mexer com isso hein menina? Mas está mais fácil de editar com suas explicações!
    Que pena que a net tá lenta :c Mas espero que dê para fazer o sorteio ^^
    Beijos!

    Caprichosdabiia.blogspot.com

    ResponderExcluir
  29. Muito bom o tuto! *---*
    hipocrisiasdopensamento.blogspot.com

    ResponderExcluir
  30. Mas que lindooooo Liah! *O* Se não tivesse usado outro código de comentário eu usaria esse u3u KKKKK' Adorei *3*

    Bjs ^_^

    ResponderExcluir
    Respostas
    1. Perai.... acabei de ver que estou no recomendo *OOOOOO* OMO muiiiito obrigada Liaaaah *uuuu* Você é a the jjang (á melhor) u3u KKKKKK'

      Excluir
    2. Awaan obrigada >.<
      E de nada rs

      Excluir
  31. Ameeei funcionou perfeito no meu blog *---*,estava atrás desse tutorial a muito tempo,obrigada *--*

    euvodeesmalte.blogspot.com.br

    ResponderExcluir
  32. Liah Cherry,eu queria saber se voçe me permitiria a pegar esse seu tuto,não se preocupe colocarei os devidos créditos do seu blog

    ResponderExcluir
  33. Achei muito fofo essa nova personalização, eu adorei Liah :)

    xoxo♥

    Crazy Girl || Clique no meu Perfil para Visitar ~

    ResponderExcluir
  34. Adorei o tuto, pena que já editei os comentários do meu novo blogger, quem sabe no próximo layout? HAHA'
    Adoro o Cherry Boomb, Parabéns liah :)

    ResponderExcluir
  35. amei esse estilo, q lindo!!! adoro entrar no CB e ter sempre um post pra ler...
    bjs
    quatroestacoes.blog.br

    ResponderExcluir
  36. Muito bom, adorei! Aliás esse blog é tudo 100%

    ResponderExcluir
  37. É simples, mais ao mesmo tempo é diferente e dá uma cara nova ao blog, Amei !

    ResponderExcluir
  38. aqui não funcionou...tipo eu mudei o código direitinho,não tirei nada,deixei os créditos e tudo mas não funfou :/ não sei se é esssa porcaria de nova interface ou eu que coloquei no local errado.Liah me ajuda por favor!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ResponderExcluir
  39. Faz um tutorial de como deixar os comentários iguais aos do blog

    ResponderExcluir
  40. Muito util ! acho que um dia vou usar no meu blog kisses

    http://my-dream-evilyn.blogspot.com.br/

    ResponderExcluir
  41. Obrigada ! Ajudou bastante . Nos outros tinha que ficar mudando as cores e eu fazia quase tudo errado . Amei o tutorial e o blog (:

    ResponderExcluir
  42. Muito bom o tutorial.Já achei várias formas de personalizar os comentários ó que nenhuma delas me agradou tanto quanto essa.

    ResponderExcluir
  43. AMEI.Eu sempre tentei personalizar a área dos comentários pra ficar mais bonitinha com outros tutoriais,mas nunca funcionava.Por fim eu deixava pra lá.Esse tutorial funcionou de primeira no meu blog e nem precisou alterar as configurações.Obrigada.Uma pena ter parado com o blog,ele é PERFEITO,sempre passo por aqui quando preparo novos lays pro blog. :)

    ResponderExcluir
  44. MUITO OBRIGADA!Eu já tentei fazer isso muitas vezes e sempre dava erro, graças a vcs os comentarios do meu blog esta perfeito!:)

    ResponderExcluir
  45. dificilmente algum tutorial funciona no meu blog. parece que que nao tenho o mesmo codigo fonte de todos os outros blogs

    ResponderExcluir
  46. HAHA' é super fofinho e eu uso ele no meu bloguinho *u*

    Vaga para Postadores .



    Visita?

    ResponderExcluir
  47. Tutorial super útil, obrigado :D

    ResponderExcluir
  48. obrigado me ajudou muito

    http://insanogamers.blogspot.com.br/

    ResponderExcluir
  49. Amei o tutorial.
    Eu fiz no meu blog,mas não coloquei os créditos la e sim na categoria créditos do meu blog. Espero que não tenha problema,bjs!

    www.mundo-adolescenttee.blogspot.com.br

    ResponderExcluir
  50. eu nunca consigo achar esse codigo ]]> no meu HTML do blog me ajuda

    ResponderExcluir
  51. Amei estou usando ta? Mas já dei os devidos creditos

    ResponderExcluir
  52. Quando eu aperto o Ctrl+F no chrome não acha o "]]>" :( HELP-ME
    www.littlegirlsconnected.blogspot.com

    ResponderExcluir
    Respostas
    1. Tem que expandir os modelos de widget, pra isso, você procura primeiro só o ai você vai encontrar o ... e depois,(nesse layout novo do blog é diferente), Você clica numa setinha preta ao lado e vai expandir ai você procura e vai achar ;D

      Excluir
  53. Amei, simplesmente perfeito ! estava procurando um tutorial bom e com uma personalização bonita *u* Virarei leitora deste blog <3

    ResponderExcluir
  54. MUITO obrigada, Liah! Super simples!

    ResponderExcluir
  55. Oi gostei muito do post e vou usar logo no meu blog : http://dicasdemodadadrika.blogspot.com.br/

    Mas enfim , eu gostaria de saber como colocar esse efeito que você usa nas imagens e mudar a cor , como mudar o ponteiro do mouse , como mudar a barra de rolagem e como colocar a equipe do blog ( igual a esse que você usa mas mudando a cor ) .

    Obrigada , vou sempre visitar esse blog para saber mais dicas!.

    ResponderExcluir
  56. Adoreeeeeeeeeeeeei, foi o unico que meu blog aceitou. Já está em meus créditos este blog. Muito obrigada! *-*

    Beijos, Lyse.
    http://dallyse.blogspot.com.br/

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

    ResponderExcluir
  58. Muito legal! Visite meu blog de maquiagem tbm http://amorenagatinhamake.blogspot.com.br/

    ResponderExcluir
  59. Amei ficou super lindo.
    Ajudou bastante, parabéns!

    ResponderExcluir
  60. MUUUUIIITÍSSSSIMOOOOO OBRIGADA VC NÃO SABE O QTO EU APANHEI PRA FAZER E COM SUA AJUDA FOI TUDO MAIS SIMPLES
    BRIGADAA BEIJOOS

    ResponderExcluir
  61. Otimo tuto
    http://princesofnoiseof.blogspot.com.br/

    ResponderExcluir
  62. Adorei obrigada
    http://bloggarotascriativas18.blogspot.com.br/

    ResponderExcluir
  63. Eu realmente queria mudar algo,mas nunca consigo fazer esses tipos de coisa =(
    http://blog-chuvadeverao.blogspot.com.br/

    ResponderExcluir
  64. Tutorial muito útil, precisei dele. obrigada.

    ResponderExcluir
  65. Adorei o tutorial, ajudou muiiito!
    Adoro esse blog!
    Beijos :*

    ResponderExcluir
  66. Quando fui tentar fazer no meu blog, os comentários desapareceram... consegui arrumar mas sempre que tento personalizar os comentários do meu blog, dá alguma coisa errado :\
    Sweet Girl | http://sweetgirl-vaah.blogspot.com.br/ ~~> Visita lá!

    ResponderExcluir
  67. Perfeição só mudei o avatar coloquei hover

    ResponderExcluir
  68. Meu, até que enfim achei um tutorial de comentario que funcione e muito elegante, Obrigado!! *--*

    ResponderExcluir
  69. Muito lindo esse design dos comentários! *-*
    Mas, por favor, só tira uma dúvida minha, como eu posso diminuir o espaço entre os comentários? Aqui fica muito longe um comentário do outro :S

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

    ResponderExcluir
  71. LINQUEI SEUS BLOGS NO MEU, MUITOS NÃO DERAM CERTO,
    ESPERO QUE ME VISITEM, AMEI O TUTORIAL.

    http://wwwbbwdelicate.blogspot.com

    ResponderExcluir
  72. PIrei , pirei e mil vezes pirei *w* tava doida procurando esse modelo porque nao funciona outro no meu porque ele é do modelo minima *w*

    geekegirlie.blogspot.com

    ResponderExcluir
  73. Q pena q esse blog fechou,gstava tanto u3u me ajudou uito esse tuto

    ResponderExcluir
  74. Como ajustar o tamanho dele todo, de acordo com o meu blog?

    ResponderExcluir
  75. Adorei cherry mais poderias fazer um tutorial dissendo com deixar assim como o do seu blog ?

    ResponderExcluir
  76. Obrigada por postar esses tutoriais para quem nao entende muito eu fiz deu super certo nem mudei nada roxinho ficou fofo no meu blog*--* eu queria saber como coloca duas colunas, volta com o blog por favor

    ResponderExcluir
  77. Muiiiito obrigada me ajudou bastante!
    Beijos♥

    ResponderExcluir
  78. Obrigada pelo tutu!

    http://chapeleirablogger.blogspot.com.br/

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

    ResponderExcluir
  80. Liah eu AMEI! esse tutorial!! Com toda a sua ajuda tou conseguindo arrumar o lay do meu blog amei o Cherry Bomb, bjos!
    euamoglitter.blogspot.com.br

    ResponderExcluir
  81. Não consegui ;^; Fica cinza e preto. E já mudei tudo 3 vezes! T^T ~

    ResponderExcluir
  82. Eu fiz tudo direitinho. Mas não deu certo :( não mudou nada. (eu apertei em salvar)

    https://imperio--kawaii.blogspot.com

    ResponderExcluir
  83. Não Consegui,deixa pra próxima :(
    blog-sempre-fashion.blogspot.com.br

    ResponderExcluir
  84. O meu não quer aceitar as respostas :( já está em incorporado mas mesmo assim não aparece a opção responder

    ResponderExcluir
  85. Oii,<3
    Amei demais e me ajudou muito !

    alecsandratamila.blogspot.com

    ResponderExcluir
  86. Waah! Me ajudou muito, agora deixei meu blog ainda mais fofo :3
    Mudei todas as cores para tons em rosas, ok?

    www.garotasdoanime.blogspot.com.br

    ResponderExcluir
  87. obrigada! apliquei no meu blog e ficou lindo. beijinhooos

    ResponderExcluir
  88. consegui e gostei muito

    http://omundodadayse.blogspot.com.br/

    ResponderExcluir
  89. Muuuiito bom! só to tendo um pouco de dificuldade na hora de trocar a cor

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...