como trocar as cores de background do seu template no blogger!

Hoje vamos aprender como trocar as cores de background (fundo) do seu template para quem usa o Blogger. E no caso existem duas formas de mudar as cores do template (ou mudar cor fundocomo dizem nossos pesquisadores malucos que tem chegado por aqui!  ). A mais usada é na aba "Fontes e cores" (Layout -> Fontes e cores). Porém, existem alguns modelos padrão do blogger que não tem como mudar partes distintas do template, então, o que acontece é um template todo da mesma cor. O que quando é o branco, até passa, o problema são as outras cores.

Então, primeiro vá até a página Fontes e cores e veja se tem como modificar as cores de fundo do seu template por lá. Não seja tímido(a) clique em todas as opções, pois mesmo que você não saiba o que está fazendo, você poderá ver os resultados na parte inferior da tela e se não gostar do que vê, basta clicar em LIMPAR EDIÇÕES para descartar tudo. 

Caso não tenha como mudar as cores de fundo na aba Fontes e cores ou apenas certar partes, aí está o problema!

E para resolver o problema de vez e deixar o seu template com a sua cara, ao menos com relação a cor de fundo, vamos trabalhar!

Leia também como ganhar dinheiro divulgando cursos online no Facebook

01 - Tabela de cores

Para começar a modificar as cores do seu template, você vai precisar saber o código correspondente a cor que você deseja usar. Para tanto, basta clicar no link abaixo para chegar a uma tabela de cores que eu já postei aqui no blog:

Tabela de cores

02 - O código

Para mudar as cores de fundo de todas as áreas do template, vamos precisar de um único código, fazendo apenas modificações simples para cada cor que quisermos usar. O código:

                                                         

     background: #000000;         

No caso, o código acima se refere a cor preta. Basta olhar a tabela para escolher as cores que quiser. 

Supondo que você queira a cor branca em alguma parte, basta usar o código referente ao branco (#ffffff). Ficaria assim:

 background: #ffffff;           

Dica: Se o seu template já tem o "background" na área que você quer alterar (e que estão explicadas abaixo), basta mudar o código da cor.

03 - Alterações

Vá até a área de edição de html do blog (Layout -> Editar HTML).

Clique em "Baixar modelo completo" e salve uma cópia do seu template.

E vamos as alterações propriamente ditas:

Lembrando mais uma vez que se você encontrar o "background" em um dos trechos mencionados abaixo, basta modificar o código da cor, ok?

a) Cor de fundo de toda a "tela" Se você deseja mudar a cor de fundo da página (toda a tela que aparece quando vemos o blog), procure pelo trecho abaixo e adicione o background ou mude o código da cor:

body {             

Ficaria assim:

body {
background: #000000;
...restante do código...
}

b) Cor de fundo da página  Só se o "corpo" do seu template for mais estreito que a tela. Procure pelo trecho abaixo e adicione o background ou mude o código da cor:

#outer-wrapper {   

Ficaria assim:

#outer-wrapper {
background: #000000;  
...restante do código...
}

c) Cor de fundo do cabeçalho do blog Para modificar o cabeçalho ou header do blog, procure pelo trecho abaixo e adicione o background ou mude o código da cor:

#header {

Ficaria assim:

#header { 
background: #000000; 
...restante do código... 
}

d) Cor de fundo da barra lateral
Para modificar a cor de fundo da barra lateral ou sidebar do blog, procure pelo trecho abaixo e adicione o background ou mude o código da cor:

#sidebar-wrapper {

Ficaria assim:

#sidebar-wrapper { 
background: #000000; 
...restante do código...
}

e) Cor de fundo do post ou artigo
Para modificar a cor de fundo do post, procure pelo trecho abaixo e adicione o background ou mude o código da cor:

#main-wrapper {

Ficaria assim:

#main-wrapper { 
background: #000000; 
...restante do código...
}

f) Cor de fundo do rodapé do blog Para modificar a cor de fundo do rodapé ou footer do blog, procure pelo trecho abaixo e adicione o background ou mude o código da cor:

#footer {

Ficaria assim:

#footer {
background: #000000;
...restante do código...
}

Depois de adicionar todas as cores desejadas, basta clicar em VISUALIZAR e estando tudo bem, clique em SALVAR MODELO e pronto!

Faça bom uso!