Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Tutoriais Blogger Vanessa S.

Personalizar nome do autor dos comentários ( comment-author )

[alerta]Atenção: O sistema de comentários do Blogger mudou! A eficácia da dica aqui apresentada não se aplica ao novo sistema de comentários. [/alerta]

Neste artigo vamos aprender a identificar e aplicar estilos ao comando que se refere ao nome do autor dos comentários, o “comment-author”.

Você vai conhecer várias possibilidades de estilizar este trecho dentro do bloco de comentários, como : alterar a cor do link, alterar tamanho e tipo de fonte, e incluir cor de fundo ao nome do autor dos comentários.

Nos templates padrões (minima) e na grande maioria dos templates, os estilos CSS para o autor dos comentários se apresentam da seguinte maneira:


#comments-block .comment-author { /* se refere ao autor dos comentários dentro do container geral */
margin:.5em 0;
}

 

[dica]Cabe salientar que, quando me referi a “autor dos comentários” me refiro a todos os autores que deixam comentários no seu blog e não apenas ao autor do blog. Isto porque este tutorial tratará sobre o autor do comentário. Sobre o comentário do autor do blog, você pode conferir no outro tutorial que ensina a Destacar os comentários do autor do blog. Lá você verá a parte que explica como aplicar estilos apenas as comentários do autor do blog.[/dica]

Se você notou no código acima, a “class” .comment-autor, está junto á “id” #comment-block, portanto os estilos que você definir para o autor dos comentários, dentro deste código, será aplicado dentro do bloco de comentário e as definições se estenderão ao: nome do autor do comentário, link do nome do autor, espaçamento do avatar do autor para o nome(se você definir margin ou padding), espaçamento do nome do autor para o corpo da mensagem, e o texto que vem depois do nome do autor (disse…).

Personalizar cor de fundo para a linha do autor do comentário:

Se, por exemplo, você quiser aplicar uma cor de fundo (background), ao autor do comentário, esta cor será aplicada a toda a linha.
Acrescente ao código, o trecho referente a background e ao espaçamento (trecho que estão destacados em vermelho):


#comments-block .comment-author {
margin:.5em 0;
background:#6495ED; /* ---edite a cor ---*/
padding:5px 5px 5px 5px; /* ---edite as medidas ---*/
}

Resultado será este:

Exemplo 1

Notem que a cor de fundo se aplicou a toda linha, incluindo o nome do autor e o texto “disse…” , mas não se aplicou ao avatar do autor.
Isto porque todo estilo que você definir a este trecho se aplicará a linha inteira.
É muito importante que você entenda bem sobre isso,porque muitos usuários se confundem ou sentem dificuldades quando tentam customizar o avatar nos comentários, principalmente em relação aos espaçamentos. Ás vezes acontece do usuário notar que avatar está muito “colado” ao nome do autor, e se você aplicar um espaçamento neste trecho, pode ser que resolva o problema.

Digamos que você queira que esse background também se aplique ao avatar do autor.
Neste caso você terá que definir espaçamento ao trecho referente ao avatar, devendo acrescentar este código:


#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
position: static;
margin-right: 10px;
}

O resultado será este:

Exemplo 2

Note que o background ficou desalinhado, então devemos ajustar as medidas de padding para que tudo fique alinhado.
Volte no código #comments-block .comment-author e ajuste as medidas em padding.
Altere
padding:5px 5px 5px 5px;
Para:
padding:5px 5px 20px 5px;

O resultado final ficará assim:

O Código completo para este resultado é este:


#comments-block .comment-author {
margin:.5em 0;
background:#6495ED; /* ---edite a cor de fundo---*/
padding:5px 5px 20px 5px; /* ---edite as medidas ---*/
}
#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
position: static;
margin-right: 10px;
}

Você pode aplicar o efeito de Bordas arredondadas.
Uma dica: recomendo que use o efeito Bordas arredondadas somente nas esquinas do topo.
Se quiser também pode usar uma imagem como background, é só acrescentar:
background:#6495ED url(endereço-da-sua-imagem) repeat;

 

Personalizar o link do nome do autor do comentário:

O nome do autor do comentário é um link. Você pode personalizar este trecho também, alterando a cor e tamanho da fonte. Para isto basta aplicar os estilos, acrescentando os seguintes códigos:


.comment-author a{
font-size:20px; /* ---edite tamanho da fonte---*/
margin:0px;
font-weight:bold; /* --link em negrito--*/
color:#8B1A1A;/* ---edite cor da fonte---*/
}

Se quiser um efeito hover ao link, acrescente também:


.comment-author a:hover{
color:#FF8C69; /* ---edite cor da fonte---*/
}

Você pode aplicar Efeito Sombra ao link do nome do autor.

Se quiser personalizar o texto “disse…”, basta incluir o código referente a fonte dentro do trecho:


#comments-block .comment-author {
margin:.5em 0;
background:#6495ED; /* ---edite a cor de fundo---*/
padding:5px 5px 20px 5px; /* ---edite as medidas ---*/
color:#fff; /* ---edite a cor da fonte---*/
fonte-size:11px; /* ---edite tamanho da fonte---*/
}

Se quiser retirar o texto “disse…”, veja como fazer neste tutorial:
Remover ou Alterar o texto “disse…” nos comentários do Blogger.

Veja o resultado final, só para vocês terem uma idéia do que podem fazer:

Lembrando que: todos os estilos que você for aplicar, deverá colar os respectivos código CSS nos trecho referente a */ Comments. Caso não tenha este trecho no seu template, pode colar os códigos ACIMA da tag ]]></b:skin>

Bom, é isso!
Agora que você entendeu como funciona esta parte do trecho na área de comentários, é só usar a imaginação bem direitinho e ir personalizando de acordo com seu gosto.

Antes que me perguntem: o código da área dos comentários postado neste tutorial, foi retirado do Template Minima. Nos templates padrões todo este trecho se apresenta desta maneira.
Se no seu template esta área se apresenta de maneira diferente, infelizmente não terei como ajudar, principalmente se o seu template já sofreu muitas modificações em sua área de comentários, pois para cada caso é um caso.
A única coisa que posso aconselhar é que você faça testes e continue tentando, quem sabe você não dê sorte.

Para relembrar, segue a lista dos tutoriais desta série que já foram publicados:

  1. Desmembrar a área de comentários
  2. Personalizar Container geral de comentários “comments-block”
  3. Personalizar nome do autor dos comentários “comment-author” ((não funciona no Designer de Modelo))
  4. Personalizar o corpo da mensagem dos comentários “comment-body” ((não funciona no Designer de Modelo))
  5. Personalizar o rodapé dos comentários “comment-footer” ((não funciona no Designer de Modelo))

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

19 Comentários

  1. Angelo disse:

    muito bom essa dica !!!!!!!!!!

  2. Andressa disse:

    Querida, vc pode me ajudar?
    Tentei colocar o fundo no nome do autor do comentario, mas nao sei porque, nenhuma estilização de comentario funciona no meu template.
    Sera que vc poderia me explicar o que está errado?
    Ja tentei varias customizações, e nada funciona!!!
    Beijos e obrigada

  3. .:: Clau ::. disse:

    DaNi
    Pelo que eu sei os comentários aparecem somente nas páginas internas mesmo. Porém, alguns recursos ou códigos podem variar de template para template, sendo assim, não tenho como te ajudar. De qualquer forma, agradeço pelo comentário e pela visita .

  4. DaNi Maia disse:

    Clau corrigindo minha duvida.vi alteração sim perdão.mas só quando entro direto na postagem.Como faço para a personalização também funcionar , na página inicial, quando clico e aparece uma janela lateral.La nao altera nada.
    Obrigada

  5. DaNi Maia disse:

    Oi Clau.Sigo vários post seu. e to melhorando meu blog graças a você. E até agora não surgiu duvida em nehum a não ser a personalização do bloco de comentários.
    Sei que o código e forma estão certas e claras.
    Mas não sei o que há..e como se eu não alterasse nada.
    Simplismente pela primeira vez não esta funcinando.Será que pode me ajudar por favor.

  6. emersoongravacoes disse:

    Vlw Tava Precisando

  7. livroslegaisdeler disse:

    Clau, no código do meu template não aparece a imagem da pessoa que comentou no blog. Já está marcado a opção de mostrar imagem nos comentários, na aba Configurações do blog.
    Me ajuda!

  8. Lucas Rafael disse:

    Clau, meu template não tem essas tags, aí add acima de ]]]]>, mais não deu pra personalizar!

  9. vidarealdasam disse:

    Olá, depois de muitas horas de procura e dificuldade em entender o que vi por aí finalmente achei seus tutoriais !! Maravilhosos !!!
    No começo penei pois já fiz muitas alterações e não achei os códigos "normais" para alterar, então fiz o seguinte, colei os que você apresentou tudo antes da ]]>
    E deu certo !! Pode ser que ajude alguém 🙂
    Obrigadíssimo !!!
    Beijos e sucesso !

  10. Novidades Ngt disse:

    Como posso deixar o link do nome do autor em negrito ?

  11. Andreza disse:

    Clau, como eu coloco borda ao redor do avatar do autor do comentário?

  12. Alysson Nathan Girotto disse:

    Vlw Clau, é um pouco diferente, mas tem a mesma função. Agora resta ver se vou conseguir instalar aqui.

  13. ::Clau:: disse:

    @Alysson Nathan Girotto:
    Este efeito vc encontra neste tutorial:
    Imagens Deslizantes com JQuery Slider.
    Obrigada pelo comentário.

  14. Alysson Nathan Girotto disse:

    Clau suas dicas são muito interessantes. o Seu blog é o melhor sobre customização. Quase tudo oque eu sei aprendi aqui. Só que estou com um problema: gostaria de colocar a seguinte galeria (http://www.sohtanaka.com/web-design/examples/image-slider/) em meu template, mas nao estou conseguindo, tem como me ajudar?

  15. ::Clau:: disse:

    @King Keko, @Gustavo Freitas, @Lucas Rafael
    Muito obrigada pelos comentários de vcs. É muito gratificante ver e saber que estou conseguindo ajudar de alguma forma.
    Logo daremos continuidade a esta série, espero que no final todos consigam customizar sua área de comentários.
    Volte, sempre!

  16. Lucas Rafael disse:

    Nossa , admiro seu trbalho demais , quando eu queri um dica sempre passo aqui – até addd vc emm meus favoritos!

    Parabéns e sucessos !

  17. Matheus Rezende disse:

    pois ja resolvi o problema obrigado!!!
    (Nao aceita os dois comentarios)

  18. Gustavo Freitas disse:

    Clau,
    admiro sua disposição, quando você escreve uma dica, você a transforma em um tutorial completíssimo, parabéns!
    o resultado final é maravilhoso,
    abraço.

  19. King Keko disse:

    Muito boa esta dica em Clau, vou usar no meu blog =D

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.