Muita gente pediu para eu ensinar como fiz o cabeçalho ocupando toda a largura do blog, e hoje vou revelar o segredo. Na verdade não é um cabeçalho e sim um background (HÁ! por essa você não esperava!)
É bem simples de fazer e existem duas formas, uma com HTML e outra sem! Go!
Materiais
Obviamente você vai precisar de uma imagem (cabeçalho) pra colocar no background. Recomendo a largura 1365px (é a que eu uso) mas pode ser maior. Aqui no meu note dá direitinho! Quanto a altura, 400px tá de bom tamanho.
Você também vai precisar de um cabeçalho transparente, pra que? Porque sem nada no cabeçalho, as postagens e a sidebar vão para cima e vão tapar seu background, então já faça uma imagem transparente de altura um pouquinho maior que o back e coloque no lugar do cabeçalho normal (no gadget do cabeçalho na guia design)
Você também vai precisar de um cabeçalho transparente, pra que? Porque sem nada no cabeçalho, as postagens e a sidebar vão para cima e vão tapar seu background, então já faça uma imagem transparente de altura um pouquinho maior que o back e coloque no lugar do cabeçalho normal (no gadget do cabeçalho na guia design)
1ª forma: Pelo designer do modelo
Essa é a maneira que eu mais recomendo, pois é bem mais prático e fácil do que da outra forma que vou ensinar, mas tem um porém: Só da pra fazer upload de imagens com até 300KB, no meu caso não deu, pois a minha imagem é bem maior. Então se sua imagem tem mais que 300KB tente a outra forma porque essa não dá :(Após ter feito a imagem vá até: Design >> Designer do Modelo >> Plano de fundo e faça o upload da imagem, deixe na opção "não dividir em blocos" ou "dividir horizontalmente", as duas são boas!
2ª forma: Pelo HTML
1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body {
Você irá encontrar um código assim:
Você irá encontrar um código assim:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
3°) Substitua o código acima por esse:
body, html {
height: 400px;
margin: 0;
padding: 0; }
body {
background: url("URL do cabeçalho") repeat; }
html {
background: #cor; }
Substitua onde esta escrito "URL do cabeçalho" pela url da imagem e onde está #cor coloque o código da cor que desejar. Lembre-se de mudar a altura (400px) para a altura do seu cabeçalho/back!
Créditos a GO IMAGINE
Créditos a GO IMAGINE
Nossa muito bacana sua dica "aula" rsrs
ResponderExcluirhttp://apreendendoamaquiar.blogspot.com.br/
Que bom que gostou Jéssica.. Beijos
ExcluirPra mim aparece o seu cabeçalho todo pro lado esquerdo, aqui na minha tela, que é de 1920x1080.
ResponderExcluirhttp://i.imgur.com/BabpapI.jpg
No meu aparece como mostrei, depende do tamanho da sua tela.
ExcluirNossa que bacana sempre quis aprender a fazer isso rsrs
ResponderExcluirhttp://sendomenina2.blogspot.com.br/
Ta ai Luana, mãos na massa! rss
ExcluirEu acho que você deveria pelo menos colocar os créditos do tutorial de onde você copiou ele né ?
ResponderExcluirhttp://goimagines.blogspot.com.br/2012/06/o-motivo-do-sumico-cabecalho-em-toda.html
Alice eu copiei e mudei algumas partes, mas tem razão, irei colocar os créditos obrigada
Excluirhumm...aqui na tela do meu computador o seu cabecalho nao ta na tela toda. Isso eh mto relativo, pois oq fica na tela toda do seu pc pode nao ficar na tela toda do pc de outra pessoa (como nao ta na minha).
ResponderExcluirAqui o seu cabecalho ta a 8 cm de distancia do lado direito da tela.
Quero aprender a fazer isso, ficou demais!!!!
ResponderExcluirEstou seguindo, um beijo.
http://guriasdeluxo.blogspot.com.br