20 dezembro 2016

COMO COLOCAR DOIS BACKGROUNDS NO BLOG

DOIS BACKGROUNDS NO BLOG

O manual da blogueira te ensina hoje como adicionar dois background no blog de uma forma bem simples e rápida! Venha conferir!

A pedido de uma leitora o manual hoje vai ensinar a colocar dois backgrounds no blog. O primeiro back faz parte da estrutura do topo do blog, onde fica o nome, o menu, o slide e qualquer outro tipo de elemento. O segundo back ocupa todo o resto do blog. Na série layout dos sonhos ensinamos como criar um cabeçalho com largura total, a personalização seria feita em uma base que já tinha esse código, e ainda não ensinamos como colocar dois backgrounds no blog e por esse motivo cá estou pra vos ensinar. Mas antes quero que você entenda como tudo  isso vai funcionar em seu blog.



Na ilustração abaixo o layout possui dois backgrounds. O primeiro fica no topo ocupando toda largura, o segundo ocupa o restante do blog. Você pode optar em adicionar duas imagens, ou somente cor, você é quem decide. 


DOIS BACKGROUNDS NO BLOG

COMO COLOCAR DOIS BACKGROUNDS NO BLOG

1º) No painel do blogger, vá em modelo > editar html.

2º) Aperte crtl+f e pesquise por body { e você vai encontrar o seguinte código:


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


3º) Apague o trecho encontrado e adicione o seguinte código no lugar:

body, html {
height: 500px; 
margin: 0; 
padding: 0; 
body { 
font: $(body.font); 
color: $(body.text.color); 
background: url("url do 1º background") no-repeat center top; 
html { 
background: url("url do 2º background") repeat; 


Em height é adicionado a altura do primeiro background que deve ser a mesma da imagem. Para conseguir a url da imagem é super fácil, basta adiciona-la no próprio blog em uma postagem de teste e com o botão direito do mouse clicar em copiar endereço da imagem e colocar no local indicado, dentro das aspas. 


E se você gostou já sabe o que deve fazer: Compartilhe com os amigos, curta nossa página no facebook e siga o manual em "faça parte" que fica na lateral do blog. Um enorme beijo a até a próxima!

0 comentários:

Postar um comentário