Mudar a cor e tamanho da fonte, link, e fundo do blogger

Vou mostrar como mudar o tamanho e a cor de letra, link, fundo do BlogSpot e também a cor da navbar.

Algo que para alguns é muito simples, mas pra quem está iniciando, saber como fazer essas mudanças no blogspot, pode ser complicado.

Isso não é possível para quem usa um modelo clássico(antigo), entenda o que é, por que mudar e como nesse post: Mudar modelo do blogger para layout

Atualização 2010: A opção de Mudar Cores e fontes do blogger mudou, clique aqui

Para mudar as cores da fonte(letra), dos links, a cor de fundo e título do seu blog, assim como estilo e tamanho da fonte é tudo na mesma página do blogger.
Siga esses passos:

• Acesse o blogger.com e depois de ter feito login, ou procure o link Painel.
• Procure o link Layout e clique.
• na página que abrir procure o link Fonte e cores. Irá a uma página com a aparência parecida com as 2 imagens abaixo.
• Vai ter um menu a esquerda da página onde é possível escolher as opções e ao lado as cores ou estilos disponíveis, fazer as mudanças que você quiser, e, visualizá-las.
• Pra concluir clique em SALVAR AS ALTERAÇÕES ou se não gostou LIMPAR EDIÇÕES.

Cores da fonte, cor de fundo e cor do título do blogger[imagem ultrapassada]
A imagem abaixo mostra a opção de mudar a letra(fonte), aumentar e diminuir a fonte e seu tipo.
O tamanho da letra do blogspot já tem um bom tamanho, você pode mudar isso, mas, uma fonte muito maior ou muito menor, pode ficar desconfortavel para muitas pessoas.
Como mudar o tamanho e estilo da fonte do blogspot[Imagem ultrapassada]

Mudar o estilo ou cor da navbar do BlogSpot:

• Depois de logado acesse blogger.com ou procure o link Painel.
• Procure o link Design e clique.
• Procure o link Elementos da página, clique.
• Procure por navbar, observe que próximo ao nome(navbar) tem um link editar, clique, na janela que abrir escolha uma cor e clique em SALVAR e depois SALVAR na janela que está aberta.
  

Não é aconselhável usar o a tag css DISPLEY: NONE para esconder a navbar, ela irá continuar tendo o mesmo peso para o carregamento do blogger e você tira a opção boa de busca no seu blog, se um visitante viu um post seu, e, lembra de parte de uma frase; a busca da navbar poderá ser mais útil que outra pesquisa.

• Como colocar busca google ou gadget no blogspot
• código: Menu muda de cor e link aumenta
  

Apartir daqui é só para quem já possui um bom conhecimento em CSS e HTML, e só mostra uma das opções de criar forma de permitir ao usurário personalizar as cores usando o blogger, porém, não tem como explicar como fazer as alterações pois cada modelo é diferente.

Nem todos os modelos do blogger tem todas as opções, alguns não tem mudar cor de fundo. Você pode mudar o modelo, ou...

Isso pode ser corrigido, usando a opção Editar HTML do blogger; mas, é bom um pouco de dedicação e persistência.


Se você optar por esse procedimento faça um backup de seu código antes, ou crie um blog pra testes.

Para usuário "avançado", são mudanças que podem ser desfeitas se você fizer um backup(salvar seu código antes).

Por exemplo se o modelo que você escolheu não tem como mudar a cor de fundo dos posts, esse código vai criar a opção:

<Variable name="mainBgColor" description="Main Background Color" type="color" default="#ffffff" value="#ffffff">

Ele deve ser colocado no HTML, abaixo desse trecho de código css:
/* Variable definitions
==================

E, também é necessário encontrar esse código:
#outer-wrapper {
e inserir ou substituir o background existente por:

background: $mainBgColor;

O código ficaria parecido com isso:

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: $startSide;
background: $mainBgColor;
font: $bodyFont;
}


Se houver uma imagem em background, essa pode se sobrepor a cor de fundo não permitindo a visualização de sua mudança(uma forma de saber pode ser testando)

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: $startSide;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) repeat;
font: $bodyFont;
}

Outros problemas podem ocorrer com mudanças feitas em seu código HTML anteriormente, ou, se você pegou um template da web que não tem essas opções.