16 de maio de 2014

Cabeçalho em toda a largura do blog


                              

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)

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! 

Para deixar o fundo cinza no resto do blog -como aqui no GI- vá em Design >> Designer do Modelo >> Avançado >> Planos de fundo e na caixinha "Plano de fundo externo" coloque a cor que desejar.

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:
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
Gostou? Compartilhe!
  • Facebook
  • Tweet this
  • Google Buzz

Comente com o Facebook:

10 comentários:

  1. Nossa muito bacana sua dica "aula" rsrs

    http://apreendendoamaquiar.blogspot.com.br/

    ResponderExcluir
  2. Pra mim aparece o seu cabeçalho todo pro lado esquerdo, aqui na minha tela, que é de 1920x1080.
    http://i.imgur.com/BabpapI.jpg

    ResponderExcluir
    Respostas
    1. No meu aparece como mostrei, depende do tamanho da sua tela.

      Excluir
  3. Nossa que bacana sempre quis aprender a fazer isso rsrs
    http://sendomenina2.blogspot.com.br/

    ResponderExcluir
  4. Eu acho que você deveria pelo menos colocar os créditos do tutorial de onde você copiou ele né ?
    http://goimagines.blogspot.com.br/2012/06/o-motivo-do-sumico-cabecalho-em-toda.html

    ResponderExcluir
    Respostas
    1. Alice eu copiei e mudei algumas partes, mas tem razão, irei colocar os créditos obrigada

      Excluir
  5. humm...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).
    Aqui o seu cabecalho ta a 8 cm de distancia do lado direito da tela.

    ResponderExcluir
  6. Quero aprender a fazer isso, ficou demais!!!!
    Estou seguindo, um beijo.
    http://guriasdeluxo.blogspot.com.br

    ResponderExcluir

 
Veja os últimos posts

Design e programação: Carol Mascarenhas
Aline Indecisa - COPYRIGHT © 2015 TODOS OS DIREITOS RESERVADOS