Onde e como adiciona código Css no Blogger

Onde e como adiciona código Css no Blogger

Mostrarei onde começa o Css no blogger e onde adicionar alguns novos estilos Css no Html do blogger.

Esse post tem a função de facilitar e esclarecer onde se coloca estilos Css no blogger de forma a evitar alguns erros e, você pode usar um blog de testes  para praticar ou até mesmo fazer as coisas mais difíceis nele antes de aplicar ao seu blog.

1. Acesse o blogger.com
2. Clique em Layout Design (Design substituiu a palavra Layout. Atualização:2010)
3. Clique em Editar HTML
4. Para fazer uma cópia de seu código clique em Baixar modelo completo, e após isso salve em seu computador
   Se algo der erro você poderá usar esse fazer um upload para deixar como estava.
5. Você deverá localizar esse código:
   ]]></b:skin>
   Exatamente antes/acima desse código ]]></b:skin> pode deixar uma linha em branco e adicionar códigos Css
6. Depois clique em VISUALIZAR para ver como ficou e, se gostar pode clicar em SALVAR MODELO

Clique para aumentar

Nesse local mostrado acima você poderia adicionar algo assim:

.post {color:green;
font-size:110%; }

O código acima tornaria a cor da fonte do post do blogspot verde e aumentaria ela 110%.

Mas o correto mesmo seria primeiro procurar no Css do blogger se já existe .post{ e entre-chaves{} adicionar o código que já está entre-chaves ou estilos Css que você queira adicionar.

Você deve ter cuidado para não apagar nem um caracter, qualquer caracter nesse local é importante, até um ponto ou uma vírgula tem sua função.

Outra coisa que poderia dar erro é adicionar um código no local errado, Veja um exemplo errado:

.post {color:green;
font-size:color:blue;110%; }

Nesse código acima color:blue; está no lugar errado e faria esse tamanho da fonte(font-size:110%;) não funcionar.

Você pode entender melhor o Css do blogger se observar a forma como está organizado, as semelhanças, onde tem cada caracter...

O Css do Html do blogger começa com esse código:

<b:skin><!--[CDATA[

O Css do blogger termina com esse:

]]></b:skin>