20 dezembro 2016
COMO COLOCAR 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.
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!
vou ver os outros post para montar o background do meu blog.
ResponderExcluirBoa sorte na montagem <3
Excluir