Estilo das postagens do BlogSpot com Css

Mostrarei como mudar o tamanho e cores da fonte e, o plano de fundo dos posts do BlogSpot, usando Css no Html do blogger.
Essas alterações mudam todas as postagens de uma vez.

Entender a área das postagens

Nem sempre você percebe, mas, como muitas páginas Html o blogger é feito de quadros(retângulos), são as DIVs, geralmente uma DIV tem outras dentro delas. Essas DIVs tem nomes ou apelidos(ID ou class) e, são através desses nomes que cria-se, para a DIV, um estilo no Css do Html.
Duas DIVs no blogger; uma usa ID main e outra class post, a DIV #main inicia bem acima da postagem e geralmente vai até o final dos comentários, já .post inicia pouco antes do título da postagem e vai até o final dos marcadores, antes do início dos comentários, e para cada uma delas você pode colocar um estilo, isso depende de ou até onde você quer que esse estilo permaneça.

Além disso, pode haver alguns conflitos com o estilo que você decidir usar nelas, por exemplo, se colocar color:red para deixar a cor da fonte de #main vermelha, e, a cor da fonte de .post é azul, a cor da fonte vai ser azul dentro da postagem e vermelha fora dela.

Essas imagens abaixo mostram um pouco onde é .post e #main, deixei a cor de fundo de ambas amarela, isso foi feito nesse blog, claro que pode ser diferente de seu blog, mas da para distinguir onde começam essas duas áreas de um BlogSpot e ver qual o mais apropriado para a mudança que você quer.

Clique nas imagens para ver melhor
.post
#main

Entender os códigos Css do blogger para modificar

Depois de entender um pouco as mudanças que terá que fazer, a primeira coisa é encontrar um desse código abaixo dentro do Html do blogger:

.post {

Ou


#main {

Se não existir um código igual esse acima você poderá adicionar, mas terá que trabalhar(entender) eles.

E entender que, .post se refere a postagem do BlogSpot e #main se refere a área das postagens do BlogSpot e, o que estiver { entre as chaves, são propriedades, qualidades ou estilos }

.post {propriedades, qualidades ou estilos }

#main {propriedades, qualidades ou estilos }

Creio que o melhor para fazer alterações é .post, mas isso depende de suas intenções. No blogger existem as opções fontes e cores, que é possível fazer alterações sem código, e se no Css do Html existir esse caracter $ para uma propriedade, isso indica que para mudar ela é possível usar fontes e cores do blogger.

Veja o exemplo:

.post {color:green;
border-bottom:1px dotted $bordercolor;
font-size:90%;
}

Esse código acima indica que a postagem terá:

color:green;Cor da fonte verde
border-bottom:1px dotted $bordercolor; Borda embaixo de estilo dotted e essa palavra com $ indica que a cor dela pode ser alterada em Fontes e cores do blogger, e, você poderia substituir por qualquer cor escrita em inglês ou usando um código (hexadecimal html) como esse #000000 mas perderia a opção de mudar isso em fontes e cores no blogger.
font-size:90%; Tamanho da fonte um pouco menor que o estabelecido...

Deu para perceber que quando houver esse caracter $ no Css do blogger é algo não deveria ser alterado.Veja outro exemplo:


.post {color:$mainTextColor;
border-bottom:2px solid blue;
font-size:110%;
background:#cccccc;
}
color Indica cor de fonte
color:$mainTextColor; Se houvesse um código como esse para a cor da fonte indicaria que era possível mudar em fontes e cores do blogger, claro que isso é raro acontecer para a área do post, mas é só um exemplo.
border-bottom:2px solid blue; Borda embaixo de 2 pixeis e estilo solida e azul
font-size:110%; Tamanho da fonte um pouco maior que...
background:#cccccc; Cor de fundo, o código hexadecimal #cccccc significa cinza em Html e Css

Se você comparar esses códigos de exemplos acima, pode perceber a semelhança e, ver que no segundo foi mudado e adicionado algumas coisas como a propriedade background que é para a cor de fundo, e cinza #cccccc em Css ou Html, observe os códigos, veja semelhanças e "padrões" que eles tem. Isso mostra que você pode estilizar, com um pouco de atenção e empenho.

Mudar o estilo do post ou área das postagens com Css

1. Acesse o blogger.com
2. Clique em Layout(Design)
3. Clique em Editar HTML
4. Faça um backup de seu modelo, por segurança
5. Você deverá localizar esse código:

   ]]></b:skin>

6. Acima/antes desse código ]]></b:skin> mude e/ou adicione os códigos para:

   • Personalizar o post:

     
     .post {color:#000000;
border-bottom:1px dotted #000000;
font-size:110%;
bacckground:#ffffff;
}

   • Ou personalizar a área da postagem:

     #main {color:#000000;
border-bottom:1px dotted #000000;
font-size:110%;
background:#ffffff;
}

   • Substituir os códigos

     
     A primeira coisa a se fazer é procurar no Css de seu blogger se já existe .post { ou se preferir #main { e se já existir pode adicionar ou mudar as propriedades que estão entre-chaves, você não precisa usar essas propriedades acima e pode adicionar novas, porém elas não devem repetir.
     
     Os códigos em vermelho podem ser substituídos:
     color:#000000; É a cor da fonte, e #000000 é um código de cor preta
     
     background:#ffffff; É a cor de fundo, e #ffffff é cor código da cor branca, Você pode ver mais cores aqui
     
     border-bottom:1px dotted #000000; É borda de baixo, ela tem 1px de espessura, estilo dotted que é pontilhado e cor preta(#000000)
     
     font-size:110%; É o tamanho da fonte, o normal seria 100% mas se é para deixar no tamanho normal, não é necessário adicionar, para deixar menor você poderia usar 90% ou qualquer valor menor de 1oo ou qualquer valor maior para aumentar. Você também pode adicionar/mudar o tipo de fonte para Css blog.
7. Após ter feito as alterações clique em VISUALIZAR para ver como ficou seu BlogSpot ou/e se gostou clique em SALVAR MODELO

• Colocar e mudar estilo da data da postagem do Blogspot
• Aparência de comentário do autor no Blogger
• Aumentar tamanho da fonte do titulo do post
• Mudar cores e fundo do título do post do BlogSpot