Dicas - Modificar As Cores Do Seu Template

Quer Mudar a Cor do Template?

Para o novo blogger, existem duas formas de mudar as cores do template. 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!

O que vamos precisar:

01 - Tabela de cores:

Para modificar as cores do seu template, você vai precisar saber o código correspondente a cor que você deseja usar.

Tabela De Cores:

NOME		CÓDIGO
	aliceblue	#f0f8ff
	antiquewhite	#faebd7
	aquamarine	#7fffd4
	azure	#f0ffff
	beige	#f5f5dc
	bisque	#ffe4c4
	black	#000000
	blanchedalmond	#ffebcd
	blue	#0000ff
	blueviolet	#8a2be2
	brown	#a52a2a
	burlywood	#deb887
	cadetblue	#5f9ea0
	chartreuse	#7fff00
	chocolate	#d2691e
	coral	#ff7f50
	cornflowerblue	#6495ed
	cornsilk	#fff8dc
	cyan	#00ffff
	darkblue	#00008b
	darkcyan	#008b8b
	darkgoldenrod	#b8860b
	darkgray	#a9a9a9
	darkgreen	#006400
	darkkhaki	#bdb76b
	darkmagenta	#8b008b
	darkolivegreen	#556b2f
	darkorange	#ff8c00
	darkorchid	#9932cc
	darkred	#8b0000
	darksalmon	#e9967a
	darkseagreen	#8fbc8f
	darkslateblue	#483d8b
	darkslategray	#2f4f4f
	darkturquoise	#00ced1
	darkviolet	#9400d3
	deeppink	#ff1493
	deepskyblue	#00bfff
	dimgray	#696969
	dodgerblue	#1e90ff
	firebrick	#b22222
	floralwhite	#fffaf0
	forestgreen	#228b22
	gainsboro	#dcdcdc
	ghostwhite	#f8f8ff
	gold	#ffd700
	goldenrod	#daa520
	gray	#7f7f7f
	green	#008000
	greenyellow	#adff2f
	honeydew	#f0fff0
	hotpink	#ff69b4
	indianred	#cd5c5c
	ivory	#fffff0
	khaki	#f0e68c
	lavender	#e6e6fa
	lavenderblush	#fff0f5
	lawngreen	#7cfc00
	lemonchiffon	#fffacd
	lightblue	#add8e6
	lightcoral	#f08080
	lightgoldenrodyellow	#fafad2
	lightgray	#d3d3d3
	lightgreen	#90ee90
	lightpink	#ffb6c1
	lightsalmon	#ffa07a
	lightseagreen	#20b2aa
	lightskyblue	#87cefa
	lightslateblue	#778899
	lightslategray	#888888
	lightsteelblue	#b0c4de
	lightyellow	#ffffe0
	limegreen	#00ff00
	linen	#faf0e6
	magenta	#ff00ff
	maroon	#800000
	mediumaquamarine	#66cdaa
	mediumblue	#0000cd
	mediumorchid	#ba55d3
	mediumpurple	#9370db
	mediumseagreen	#3cb371
	mediumslateblue	#7b68ee
	mediumspringgreen	#00fa9a
	mediumturquoise	#48d1cc
	mediumvioletred	#c71585
	midnightblue	#191970
	mintcream	#f5fffa
	mistyrose	#ffe4e1
	moccasin	#ffe4b5
	navajowhite	#ffdead
	navy	#000080
	oldlace	#fdf5e6
	olivedrab	#6b8e23
	orange	#ffa500
	orangered	#ff4500
	orchid	#da70d6
	palegoldenrod	#eee8aa
	palegreen	#98fb98
	paleturquoise	#afeeee
	palevioletred	#db7093
	papayawhip	#ffefd5
	peachpuff	#ffdab9
	peru	#cd853f
	pink	#ffc0cb
	plum	#dda0dd
	powderblue	#b0e0e6
	purple	#800080
	red	#ff0000
	rosybrown	#bc8f8f
	royalblue	#4169e1
	saddlebrown	#8b4513
	salmon	#fa8072
	sandybrown	#f4a460
	seagreen	#2e8b57
	seashell	#fff5ee
	sienna	#a0522d
	skyblue	#87ceeb
	slateblue	#6a5acd
	slategray	#708090
	snow	#fffafa
	springgreen	#00ff7f
	steelblue	#4682b4
	tan	#d2b48c
	thistle	#d8bfd8
	tomato	#ff6347
	turquoise	#40e0d0
	violet	#ee82ee
	wheat	#f5deb3
	white	#ffffff
	whitesmoke	#f5f5f5
	yellow	#ffff00
	yellowgreen	#9acd32

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!