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

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, 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, 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