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 > AperteCtrl + 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:
Além dos blocos acima, é possível editar mais itens da árae de cometários:
1 Voltando no primeiro trecho de código procurado (#comments {), altere todo o trecho que aparece na primeira imagem pela base abaixo:
2 Edite o que for necessário.
3 Salve.
Aprenda neste tutorial como personlizar a área dos comentários.
Primeramente, vá em Modelo > Editar HTML > Clique na caixa de códigos > Aperte
#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. |
/* 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.
Atenção!
Testado somente no modelo Travel do Blogger.
Olá coisa fofá =3
ResponderExcluirTu 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 >.<
Oie :3
ExcluirAh, 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~
Olá, boa tarde!
ResponderExcluirNossa, 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.
Buenas tardes!
ExcluirA 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~
Oieee, boa tarde!
Excluir"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!