Cabeçalho ocupando toda a largura do blog
Trago esse tutorial de como fazer para o cabeçalho ocupar toda a largura do blog. Tem duas formas de faze-lo e vou ensinar os dois modos.
1° Modo: Faça uma imagem em .png ( Transparente) do mesmo tamanho que da imagem do cabeçalho que você vai usar cabeçalho.
Vá no painel do seu Blog em Layout > Cabeçalho > Editar. E carregue a imagem TRANSPARENTE e salve. Depois vá em Modelo > Personalizar > Plano de Fundo e carregue a sua imagem de cabeçalho como se fosse o plano de fundo do blog.
Quando ela carregar, coloque para Não dividir em blocos, e selecione a opção Rolar com a página. E salve! Se o seu blog ficar sem nenhuma cor, ainda no designer do modelo, clique em Avançado > Página e lá vai ter Fonte, Cor do plano de fundo e Cor do texto.
A Cor do plano de fundo, escolha a cor que você quer que seu blog fique, e salve. Se tiver dúvidas de como o seu blog vai ficar, veja o meu blog. Eu usei essa técnica nele.
2° Modo: Vá em do seu Blog depois em Modelo > Editar Html . Procure por font: $(body.font); . Você encontrará o código abaixo:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
Substitua todo o código acima por esse abaixo:
body, html {height: 400px;
margin: 0;padding: 0;
}
body {
background: url("URL do cabeçalho") no-repeat; }
html {
background: url("URL do background") repeat;
}
Na primeira parte, a que está escrito:
body {
background: url("URL do cabeçalho") repeat;
}
Substitua o trecho URL do cabeçalho pela URL da sua imagem de cabeçalho. E na segunda parte em que está escrito:
html {
background: url("URL do background") repeat;
}
Substitua o trecho URL do background pela url da imagem que você quer colocar no título. Para que a imagem não se repita coloque no - antes de repeat: no-repeat. Você pode fazer a mesma coisa na imagem do cabeçalho, o que não é recomendavel.
1 Comentários
Olá, Gostei de sua Dica, porem fiz tudo direitinho mais não funcionou, alguma coisa impede, e não sei o que é?
ResponderExcluirDa uma olhadinha no meu blog. www.adalgisoalvesfotos.blogspot.com