10/12/2012

Cabeçalho em toda a largura do blog

Yo!(descobri que era só com um o) Liiin-san aqui! Hoje vai ter um tuto blogger aqui! Recentemente, estava passando pelo Trechy Teen e vi o lindo cabeçalho de natal, e percebi que como todos os outros oucupa todo o espaço do blog, depois pequisei em uns blogs que conheco e achei o tutorial no Go Imagines um blog super fofo junto com a Anny, e descobri que era um background! Mas antes você precisa de uma imagem transparente um pouco maior que o cabeçalho! Vamos ver?



Materiais: 
-Uma Imagem transparente, 50pixels maior que o cabeçalho.
-Um cabeçalho, com um fundo com a cor de sua preferência, tem que ser maior que a largura do blogger, aconselho 1024x400

Let's Go!

1. Hospede a imagem do cabeçalho, e coloque a imagem transparente no lugar do cabeçalho, porque, sem essa imagem os posts e a sidebar vão subir e o cabeçalho original vai ficar por baixo deles, então nem pense em pular!

2.Vá em Modelo>Editar HTML>Prosseguir e procure (CTRL+F) por body {, aparecerá algo assim:
body {font: $(body.font);color: $(body.text.color);background: $(body.background);}
3. Substitua por:
body, html {height: 400px;margin: 0;padding: 0; }
body {background: url("URL do cabeçalho") repeat; }
html {background: #cor; }

Explicação:
400px: Altura do cabeçalho, se seu cabeçalho for maior ou menor que isto  troque, se não irá ficar menor ou repetirá!
URL DO CABEÇALHO: Lembra que eu pedi para você hospedar seu cabeçalho, depois de hospedada pegue o link direto e cole aí.
#cor: cor do background que ficará abaixo do cabeçalho.

Pronto!

Liiin



14 comentários :

  1. Respostas
    1. Esqueceste-te de acabar a frase ... acho que o unico podre aqui és tu :)

      Excluir
    2. Olha Anônimo, sabe que me esforço muito aqui? Eu LUTO para tentar postar aqui, e lá vem tu me chamando de Podre, Você que é podre. Eu tenho um time, Edito Imagens de GRAÇA para pessoas, Faço Layouts de graça para as pessoas. E você? Você vê um tutorial e chama ele e a dona de Podre. O único podre aqui é você.

      Excluir
  2. Esse tuto foi milagrosa *OOO*
    Sério, a séculos eu procuro um tuto assim e NUNCA achei, esse blog salva minha vida.

    Parabéns flor, o blog é diwo >3<

    ResponderExcluir
  3. Oii, amei o blog, mas nunca consigo entender a parte do do HTML, o meu sempre dá errado, embaixo fica a cor certinha, mas em cima (onde era pra ficar o cabeçalho) fica vários cabeçalhos, não fica só um no canto certinho, me ajudem D:
    (Fiz no blog teste)

    ResponderExcluir
  4. Poxa, não deu certo :(
    Fiz duas vezes e tudo direitinho mas continua não dando certo, o cabeçalho fica bom e no lugar onde deveria, mas embaixo fica branco não sei porque '-'

    ResponderExcluir
    Respostas
    1. Diminua o 400px no código pela altura de seu cabeçalho, ai vai dar certo ;)

      Excluir
  5. owwwwwwwwwww nao e faci criar foto invisivel nao

    ResponderExcluir
    Respostas
    1. Procure uma foto invisivel bem grande e a corte para a largura do cabeçalho. Isso é facil até em photoscape

      Excluir
  6. Tem gente que não dá mesmo valor ao trabalho dos outros ein, mas não liguem, adorei a postagem. Parabéns

    ResponderExcluir
  7. Demais valeu só queria saber como faço para colocar uma imagem no lugar de uma cor no plano de fundo

    ResponderExcluir
  8. Estava doido atras desse tuto...vou tentar aqui e depois posto se consegui.vlw

    ResponderExcluir

Leia a nossa página de Regras antes de comentar, por favor :3