Personalizar o corpo dos comentários

Os comentários são uma parte importante para os autores de blogs, pois são eles que mostram o interesse dos leitores e que dão motivação para escrever. Fazer com que a área dos comentários fique mais atraente para os leitores é algo importante, pois pede incentivar as pessoas a deixar um comentário e interagir com suas postagens.

Aprenda neste tutorial como personlizar a área dos comentários.

Primeramente, vá em Modelo > Editar HTML > Clique na caixa de códigos > Aperte Ctrl + F ou F3 > Procure por #comments {, você deve achar algo semelhante a isto:
Para entender melhor a imagem acima e o que cada bloco significa, aqui tem os principais e uma breve legenda do que eles representam:
#comments Toda a área dos comentários, incluindo comentários existêntes, contador de comentários e caixa para inserir novos comentários. Exemplo completo aqui.
.avatar-image-container Bloco que contém a imagem do(a) autor(a) da postagem. Exemplo destacado nesta imagem.
#comments a Todos os links presentes na área de comentários.
.comments .comments-content .icon.blog-author Ícone de autor(a) do blog. Exemplo destacado aqui.
.comments .comment-thread.inline-thread Área de respostas de um comentário. Exemplo.
.comments .continue Parte com o botão de "Responder" abaixo da resposta de um comentário. Exemplo.

Além dos blocos acima, é possível editar mais itens da árae de cometários:
div.comment-form p Parte embaixo/acima da caixa de inserir novo comentário, com mensagem dos autores do blog. Exemplo aqui.
Esta mensagem pode ser alterada em Configurações > Mensagem do formulário de comentário.
.comment .comment-header .datetime a Data do comentário. Exemplo aqui.



1 Voltando no primeiro trecho de código procurado (#comments {), altere todo o trecho que aparece na primeira imagem pela base abaixo: /* Comments ----------------------------------------------- */ #comments { padding: 15px; } .avatar-image-container { margin: .2em 0 0; } #comments a { color: $(post.title.text.color); } .comments .comments-content .icon.blog-author { background-repeat: no-repeat; background-image: url(https://i.imgur.com/UDhzjpZ.png); } Muita coisa foi removida pois não é utilizado de fato na área dos comentários. Entretanto, se a parte removida causou alguma diferença não desejada no seu template, desfaça a alteração e remova apenas os itens que realmente não impactem seu template.

2 Edite o que for necessário.

3 Salve.
warning Atenção!
Testado somente no modelo Travel do Blogger.

Comentários

  1. Olá coisa fofá =3

    Tu advinha mesmo o que a gente precisa né? Gente, como tu salva a gente pois sempre quis entender melhor a parte de edição da área dos comentários e até manjo alguma coisa mas nada muito aprofundado.

    Obrigada por explicar tudo bem certinho e com muita atenção, na mora, tu é muito foda!

    beijuuuu >.<

    ResponderExcluir
    Respostas
    1. Oie :3

      Ah, eu tento adivinhar, né? Mas na maioria das vezes ler a mente dos leitores é crucial pra saber o que postar SHAUHSUAHS

      A área dos comentários é beeem grandinha, tem muitas partes dentro dela que podem ser alteradas e exploradas, então boa parte pode ser alterada e personalizada.

      Disponha, sempre que precisar de algum tutorial, só pedir :D

      Kissus~

      Excluir
  2. Olá, boa tarde!
    Nossa, ficou muito completo! Surpreso aqui com essa tabela e os detalhes, depois vou pegar e usar. Eu até dei uma pausa na criação do layout novo... Parece que realmente não consigo criar algo por agora, já fiz 3 layouts e não gostei de nenhum, haha. Enfim, obrigado pelo tutorial. :)

    Obs.: Coloquei o layout free The Only Exception em um blog meu e algumas imagens sumiram, saberia informar se é algum erro? Desde já agradeço a atenção.

    ResponderExcluir
    Respostas
    1. Buenas tardes!

      A postagem até que ficou "pequena", mas deu bastante trabalhinho tentar explicar e mostrar o que cada parte representava, ainda tem muita coisa que quero trazer sobre a a parte de comentários, mas dividindo as postagens e conteúdos fica mais fácil de explicar e escrever o tutorial, além de ajudar vocês a compreender melhor.

      Bloqueio criativo é algo complicado, acontece comigo algumas vezes e realmente, não importa o esforço que eu faça, o que eu fizer enquanto estou tendo o bloqueio, vai ficar mais ou menos e vou ter que mudar depois, então acabo nem fazendo pra poupar esforços kkkkk

      Sempre que precisar de um tutorial, só chamar! =D

      Sobre o The Only Exception, eu vi que as imagens que sumiram tiverem o link alterada... No template de visualização, que foi o disponibilizado pra download, os links das imagens estão apontando pro imgur, enquanto as imagens que estão no seu blog estão no domínio do blogger, o que é muito estranho 🤔 Você pode tentar importar o template novamente, se o problema continuar, me chama no e-mail do Aurora!

      See ya~

      Excluir
    2. Oieee, boa tarde!
      "Pequena"? Haha, eu achei bem extensa, até por conta da área de postagem do seu blog, assim, elas parecem mais extensas, mas, nem pareceu pois a tabela ficou bem bonitinha.
      Sobre o layout, eu importo, fica lindo, depois pega e volta a sumir, vou fazer hoje de novo e ver se vai alterar. :)
      Abraços e até. :3 Ah, e muito obrigado pelos tutoriais!

      Excluir

Postar um comentário

Fique à vontade para interagir e tirar dúvidas.
Peça tutoriais em Contato
Você pode usar as tags negrito (<b>), itálico (<i>) e links (<a>)
Comente com o link do seu blog para que eu possa visitá-lo ♪(^∇^*)