15 de dez. de 2011

Colocando dois backgrounds no blog

Tumblr_ldyauyhbva1qa3jido1_500_large_large
Uma das coisas que eu mais quis fazer antes de trocar o design do blog foi colocar dois backgrounds (plano de fundo) no blog. Notaram né que mais pra cima o background é branco é mais pra baixo o background é preto, então é esse resultado bonito que fica. Eu sei que esse tutorial já é bem conhecido no blog Menina Nerd, mas eu adaptei de minha forma, pois não estava dando certo. Mas mesmo assim, deixo todos os créditos ao MN.
Vamos ver?
Então, vá em design, editar HTML, abra a caixa de pesquisa (Ctrl + F) e procure por:
body {
Caso você alterou o background do seu blog no Designer de modelo, você vai encontrar depois dele assim:
body {  font: $(body.font);  color: $(body.text.color);  background: $(body.background);}
Já se você alterou o background do seu blog por HTML, você vai encontrar depois dele assim:
body {background:  url(url da imagem ) repeat;margin:0;color:#333333;font:x-small Georgia Serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;} 
Então, você precisa apagar todo esse código, inclusive o body { e colocar no lugar dele esse:
body, html { height: 300px; margin: 0; padding: 0;  }
body {background: url("URL do 1º background") repeat; }
html { background: url("URL do 2º background") repeat; } 
Daí, o código em vermelho é a altura do background, tipo até onde você quer que ele vá e entre parênteses a url do 1º e do 2º background. Mas ao salvar e visualizar, você percebe que a fonte está diferente, então faça o seguinte, acima de body {background: url("URL do 1º background") repeat; } coloque esse código:

body {
font: $(body.font);
color: $(body.text.color);

Então vai ficar assim:
body, html { height: 300px; margin: 0; padding: 0;  }body {
font: $(body.font);
color: $(body.text.color);
body {background: url("URL do 1º background") repeat; }html { background: url("URL do 2º background") repeat; } 
ATENÇÃO:  Esse código que eu disse para adicionar, é apenas  para quem não trocou a fonte por HTML, ou seja, trocou a fonte por Designer de modelo, se você trocou por HTML adicione o código da sua fonte e da cor da sua fonte.

Entenderam?

3 comentários:

Marcinha disse...

poxa parece ser difícil. Ficou lindo aqui no GDA *--*
Fique com Deus, beijoOo

Bruna disse...

é fica lindo mesmo aqui ficou muito lindo adorei o tutorial beijos

wwwstartyley.blogspot.com

tem post novo lá comenta?

Carla Wolf - Vestindo Ideias disse...

É lindo mesmo!
Adorei o tutorial!
Estou seguindo aqui!
wolftheideia.blogspot.com/

Postar um comentário

Só comente quando saber pelo menos 10% do post e escolha a opção "Nome/URL". Ah e não aceito selos/tags e nem parceria. Obrigada pela visita.