Como mudar a aparência dos comentários do blogger usando Css

Mostrarei como fazer para personalizar os comentários de blogs do blogger, usando Css.

Vejo muita reclamação de que comentários tem tamanho e cor de fonte ruim, já vi casos de modelos onde os comentários não aparecem no post pela cor de fonte ser a mesma de fundo, isso ocorre as vezes em templates da web(antigos), para constatar se esse é o problema basta selecionar a página do post e, se eles aparecerem apenas se selecionado, é isso. Outra coisa que percebo, em vários modelos de Blogspot, é a falta de destaque que de para perceber de forma fácil onde termina um comentário e começa outro.

Para muita personalização você teria que entender de Css, mas esse post é mais direcionado a ajudar em coisas simples como cor e tamanho de fonte, e, quem quiser tentar fazer algo para diferenciar um pouco o começo de novo comentário, para que os visitantes vejam com facilidade onde outro comentarista começou a escrever, se bem que, se o avatar do comentário do blogger está ativado isso já ficará visível e é quase desnecessário mais estilos, mas, evite muita personalização para não fugir do estilo de seu modelo.

Conforme você vai lendo esse post ele ficará mais difícil porque mais abaixo estão personalizações mais avançadas.
Aconselho usar um blog de testes, clique, principalmente quem quer se dedicar e fazer algo mais 'espetacular', até para aprender e ver o que da certo, nesse caso não posso dizer faz isso ou coloque esse código que vai ficar assim ou assado, isso porque cada modelo é um pouco diferente.
Também é importante, sempre antes de se atirar a mexer no Css do HTML, ver se não existem opções de mudar coisas em designer do modelo do blogger

Primeiro, você precisa saber onde e como adiciona Css no blogger, clique, e depois:

Entender um pouco de Css:

A área dos comentários do blogger tem um 'nome', chama-se comments, sendo assim, podemos adicionar personalizações para essa área, vamos começar aumentando a fonte em mais 10% com a propriedade font-size, usaremos font-size:110%; Agora veja como ficará o código:

#comments,.comments{font-size:110%;}
Deu para perceber que entre-chaves{} está a propriedade que aumenta a fonte e o valor é 110% Saiba que o tamanho normal da fonte é 100% e se eu tivesse colocado um valor menor de 100% a fonte seria menor, fique atento a cada caracter, pense no porque dele estar onde está.

Vamos a mais um exemplo, dessa vez, com a fonte ainda maior que a anterior e, a cor da fonte vermelha, para isso vamos com a propriedade color que é responsável pela cor de fonte, mas precisa ser seguida de um nome de cor escrito em inglês, usaremos color:red; Veja como ficará o código:

#comments,.comments{font-size:130%;
color:red;}
Compare esse código com o outro acima, veja o que foi acrescentado, o código que foi alterado(valor) e onde foi adicionado{entre-chaves}, para ficar mais claro de você entender, vou dar mais uns exemplos:

Apenas cor da fonte verde para os comentários:
#comments,.comments{color:green;}
Apenas diminuir o tamanho da fonte dos comentários:
#comments,.comments{font-size:85%;}
Diminuir a fonte e deixá-la verde de uma vez:
#comments,.comments{font-size:85%;
color:green;}
Geralmente cada área dentro de uma página tem um nome(Id e/ou class), comentários é comments para Id e também para class, e entre as chaves estão as propriedades com seus 'valores' e o caracter ponto-e-vírgula separam as propriedades, e se, por exemplo, você quisesse descobrir uma propriedade de fundo, bastaria fazer uma busca na web assim: 'Css propriedade de fundo', você encontraria alguns sites explicando sobre background, essa é a propriedade para fundo, já aviso, background é uma propriedade bem complexa.

Atenção, você percebeu que coloquei duas propriedades entre-chaves, isso é feito para organizar e economizar código e deixar a página mais leve e, se tomando como ponto de referencia os exemplos acima, você pode procurar no Css de seu Html se encontra uma dessas linhas de código:

#comments,.comments{
#comments {
.comments {

Se encontrar uma dessas no seu Css, você pode acrescentar propriedades antes do próximo fecha-chaves depois dela, as linhas acima todas tem a mesma função que é dar estilo para a área dos comentários, porém, a primeira linha é mais 'forte', só que estão incompletas porque é só para você observar e aprender.

Aprendeu, faça seu estilo

Na área de comentário existem outras áreas dentro, cada uma com seu nome, vou listar elas abaixo, e, se quiser usar, onde eu escrevi propriedades, você deve substituir por uma(ou mais) que faça aquilo que você quer, seja mudar a fonte, cor, etc. Além das propriedades acima(font-size e color), existem borda, margem, tipo de fonte e outras.

Outras áreas dentro dos comentários

Veja abaixo os nomes de classes de outras áreas dentro da área dos comentários, observe a imagem que mostra aproximadamente onde fica cada área.

Título que mostra quantos comentários tem:

#comments h4,.comments h4{propriedades}

Mostra quem é o autor do comentário. Nome, avatar:

#comment .comment-author{propriedades}

Corpo do comentário, a frase que a pessoa comentou:

#comment .comment-body{propriedades}

Rodapé de cada comentário, onde fica a data do comentário:

#comment .comment-footer{propriedades}

Mas, como a data do comentário é um link, para personalizar a fonte devemos usar:

#comment .comment-footer a{propriedades}

Sabendo o nome de cada área, você pode personalizar aquela área em especifico.

Separar, ou destacar o fim de um comentário e inicio de outro

Vou mostrar como você pode usar uma borda na base do rodapé de cada post, assim, esse rodapé servirá como um 'separador' de cada comentário.

#comment .comment-footer{border-bottom:1px solid red;}

red é a cor vermelha da borda, e você pode usar outro nome de cor em inglês, nesse código acima, o que está entre-chaves é a propriedade borda de baixo, não é uma borda em toda a volta do rodapé de um comentário, é a borda só de baixo de cada comentário, isso faz parecer um separador(uma linha).

Fundo ou borda no comentarista para destacar e separar os comentários

A área onde fica o nome do comentarista dá para usar uma borda e imagem de fundo que pareça uma linha ou risco horizontal, ou, também dá para colocar um fundo em toda essa área, tanto para destacar ela como para ficar mais claro onde começa outro comentário.

Borda de topo do nome do autor do comentário

Para colocar uma borda no topo da área de identificação do comentarista vou mostrar 3 códigos e cada um com uma cor, branca, preta e cinza, você pode escolher um.

Borda ou traço branco:

#comment .comment-author{border-top:solid 1px white;display:block;}

Borda ou traço cinza:

#comment .comment-author{border-top:solid 1px gray;display:block;}

Borda ou traço preto:

#comment .comment-author{border-top:solid 1px black;display:block;}

Identificação do comentarista com fundo, para destacar e separar

Difícil
Para dar um destaque e também separar os comentários, é possível dar um fundo numa área, onde fica o nome do comentarista é um bom local, e, para deixar meio pronto para qualquer pessoa adicionar no blogger, eu criei 4 imagens semi-transparentes usando um editor grátis e bom para isso, essas 4 imagens são de duas cores, preto e branco, duas delas estão super opacas(semi-transparentes), com apenas 15% de cor e outras duas com 30% de cor, sendo assim, se você usar uma imagem branca e bem transparente em um layout azul, esse fundo ficará azul um pouco mais claro e se usar uma imagem preta bem transparente o azul irá parecer mais escuro, é um pouco difícil de explicar, o melhor é você aplicar os códigos abaixo em um blog de testes e ver como fica...

Fundo do comentarista com imagem mais clara 30%

#comment .comment-author,.comment-author{background-image: url(http://2.bp.blogspot.com/-LibU7UorO5M/Tnk6j54_v7I/AAAAAAAAFpA/xX3cpULcess/s1600/fundo-branco-30.png);
background-repeat:repeat-y;
background-position:38px;
display:block;}

Fundo do comentarista com imagem mais clara 15%

#comment .comment-author,.comment-author{background-image: url(http://3.bp.blogspot.com/-f9OwMeJaoKM/Tnk57YP69MI/AAAAAAAAFo4/LZEe_dWbEOE/s1600/fundo-branco-15.png);
background-repeat:repeat-y;
background-position:38px;
display:block;}

Fundo do comentarista com imagem mais escura 15%

#comment .comment-author,.comment-author{background-image: url(http://3.bp.blogspot.com/-9E7j1_9Y_G8/Tnk60sZRsjI/AAAAAAAAFpI/zmfEKPf3D6E/s1600/fundo-preto-15.png);
background-repeat:repeat-y;
background-position:38px;
display:block;}

Fundo do comentarista com imagem mais escura 30%

#comment .comment-author,.comment-author{background-image: url(http://4.bp.blogspot.com/-F77n12N5gEc/Tnk7OHx4I6I/AAAAAAAAFpQ/ZJVZSc2kp1g/s1600/fundo-preto-30.png);
background-repeat:repeat-y;
background-position:38px;
display:block;}

Nos códigos acima, entre parênteses() está o endereço Url da imagem e se você quiser pode substituir por outra, e, você pode mudar o número 38 para mais ou menos, ele irá regular se a imagem de fundo vai mais para a direita ou esquerda, se aumentar o número a imagem vai mais para a direita e se diminuir ele vai para a esquerda e assim ficará atrás do avatar, se você usar esses últimos códigos, deve procurar no seu Css por .comment-author e ver se, entre-chaves logo após .comment-author existe uma linha que começa com background-position: se tiver essa propriedade em .comment-author é bom que você apague aquela linha, pois ela irá interferir na posição vertical da imagem de fundo, prefira sempre um blog de teste.

• Configurar e mostrar os comentários no BlogSpot
• Mudar aparência de comentário do autor no Blogger
• Regras para colocar no comentários do blog?
• Como configurar a moderação de comentários do blogger
• Estilo para frase no comentário do BlogSpot