» » Alterar cor do blogger com HTML usando a tabela de cores

Dicas Blogger 17:13
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. Por  tanto, é só  clicar no link abaixo para chegar a uma tabela de cores.

Confira a >> Tabelas de cores para usar em blogger

02 - O CÓDIGO

Para mudar as cores de fundo de todas as áreas do template, você vai  precisar de um único código.  veja o código abaixo.

background: #000000;

 O código acima se refere a cor preta. Basta olhar a tabela para escolher as cores que quiser. 

Exemplo: você quer 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. ( é importante salvar, você pode perder tudo se fizer algo errado ) Vamos as alterações.

1) Cor de fundo de toda a "tela" Se o seu desejo é  mudar a cor de fundo da página, procure pelo trecho abaixo e adicione o background ou mude o código da cor:

body {
Vai ficar desse jeito:
body {
background: #000000;
...restante do código...
}

b) Cor de fundo da página Procure pelo trecho abaixo e adicione o background ou mude o código da cor:

#outer-wrapper {
Vai ficar desse jeito
#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 {
Vai ficar desse jeito:
#header {
background: #000000;
...restante do código...
}

d) Cor de fundo da barra lateralPara 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 {
Vai ficar desse jeito:
#sidebar-wrapper {
background: #000000;
...restante do código...
}

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

#main-wrapper {
Vai ficar desse jeito:
#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 {
Vai ficar desse jeito:
#footer {
background: #000000;
...restante do código...
}

 Qualquer dúvida, deixe logo abaixo nos comentários.

author

Este post foi escrito por: Matheus Ribeiro

Sou especialista em blogs e sites desde 2010, tento trazer conteúdos que os leitores procuram na internet.

Postado por Matheus