Header que se ajuste em outras telas

Oi seus lindos, como vão? Eu estou cansada e acabei de almoçar, eu e minha irmã estamos mudando de quarto ( nos separando, vamos dizer ) e então tive que tirar todas as roupas do meu guarda-roupa, ajudar meu pai a trocar os móveis, etc. Mas isso foi ontem, hoje eu fiquei na rua com a minha irmã ( de vela, masok ) e conheci meu amigo virtual, foi bem legal também, mas estava muito calor e eu estou com muita dor no pé, me obrigaram a andar de skate ç.ç. Ah, dia 24 a lista da minha escola de quem caiu em qual ano vai sair, e a de vocês? Estou super ansiosa, e nervosa também  >3<

Enfim, talvez a maioria das pessoas que estão lendo agora não entenderam nada do título, mas vou explicar: Pra você que tem um cabeçalho/header como o meu, e está irritado porque em telas menores ele se repete, ou fica pela metade, eu trouxe esse tutorial. Caso você não entendeu, olhe o Blog, e diminua o zoom da tela, você ve que o 'fundo' dele continua em toda a largura do Blog, não é? Então, é isso que eu vou ensinar! É bem simples se você prestar bastante atenção. Let's go?

Primeiro, faça o fundo de seu cabeçalho, esse por exemplo (x) e sem seguida,  você deve seguir o tutorial de dois backgrounds no Blog. Vou passa-lo pra vocês, avisando que peguei o tuto no Blog Birthday Cake, só modifiquei um pouco. 


Vá em seu HTML, tecle Ctrl + F e procure por body {, você encontrará mais ou menos isso:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
Apague tudo isso e substitua por:

body, html {
height: ALTURApx;
margin: 0;
padding: 0; }
body {
font: $(body.font);
color: $(body.text.color);
background: url("LINKDOFUNDODOHEADER") repeat-x; }
html {
background: url("LINKDOBACKDEBAIXO") repeat; } 

ALTURA: A altura do fundo do cabeçalho.

LINK DO FUNDO DO HEADER: Você vai colocar o link do fundo de seu cabeçalho, no meu caso é esse.

LINK DO BACK DE BAIXO: Bom, esse será o link do background que quer que fique em baixo, exemplo

Pronto, já temos o fundo ajustado para outras telas. Agora, vamos 'colocar' o cabeçalho em geral, e que se alinhe também. Agora você apenas precisa fazer seu cabeçalho completo, exemplo. Mas agora, você vai cortar ele apenas onde tem o conteúdo, afinal já temos o fundo dele no Blog, não é? Então você vai salvar o cabeçalho desse jeito. Agora, vá em layout > E no gadget de cabeçalho, você coloca a url da imagem que você salvou, que contém apenas o conteúdo do cabeçalho, assim. É provável que seu cabeçalho ficará desalinhado comparado ao fundo, mas aí é  só  usar esse tutorial

RESULTADO


DIMINUINDO O ZOOM


Desculpem se expliquei muito mal, é porque estou cansada e porque não sou boa com explicação mesmo q, dúvidas nos comentários ^.^

50 comentários:

  1. Meodeus é exatamente o que eu tava procurando :3
    Vou deixar até nos favoritos aqui HAUSHA
    Bem útil adorei

    Beijos <3
    http://p-erfectthings.blogspot.com.br/

    ResponderExcluir
  2. Ah, conheceu um amiga virtual? Eu tenho muita vontade de conhecer um também mas e-e Enfim, ótimo tutorial Elo, adorei *-*

    Beijos | Grandes Sonhadores

    ResponderExcluir
  3. Ain é massa conhecer pessoalmente um amigo virtual eheuh' Adoro andar de Skate :33
    O tuto ficou muito bom, tipo super bem explicado adorei beijos ^^
    http://secretempir-e.blogspot.com.br/

    ResponderExcluir
  4. A lista das séries e das classes sai dia 22 :3 Estou nervosa e esperançosa, IUAHSIHSA' q.

    Adorei o tutorial! Realmente não fazia ideia! É horrível quando nos deparamos com um header desproporcional a nossa tela, né? =3

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. A minha é dois dias depois da sua ~avá~ UHEUHE também *u*

      Que bom flor! Pois é uheuhe >3<

      Excluir
  5. Explicou bem sim! Meu Deus, é perfeito, obrigada! *u*

    ResponderExcluir
  6. Conheceu seu amigo virtual? sempre quis conhecer um dos meus mas nunca da :( Adorei esse tutorial eu sempre procuro ele,agora sei onde tem =)

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Siim, mas eu já sabia que ele morava na minha cidade, conheci pelo computador e ontem me encontrei com ele >3< Que boom fror *u*

      Excluir
  7. Muito bom o tuto. Que lay diwooooo >u<

    h-world.blogspot.com
    diamond-resources.blogspot.com

    ResponderExcluir
  8. Amei o tuto,é perfeito ^ - ^!Beijos♥

    http://garota-com-lilas.blogspot.com.br/ Visita?

    ResponderExcluir
  9. Fica bem legal o resultado , e é bem simples Haha'
    Eu já disse que esse lay tá lindo ? Acho que não então ;
    Que layout lindo *u*

    D-Resources

    ResponderExcluir
  10. Explicou muito bem Dona Heloísa uha3uhe3ue3h -q Esse tutorial é bem útil :3
    -
    snowing-wishes.blogspot.com

    ResponderExcluir
  11. Hihi nunca conheci um amigo virtual pessoalmente, deve ser um máximo u.u Amo andar de skate.. O tutorial é bem útil, é verdade que quando um layout é grande fica bem esquisito em computadores pequenos :p

    http://maiira-t.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tenho uma amiga virtual que mora na minha cidade e eu nem sabia *0* Estou cheia de sorte q. Eu tenho medo :c UEUHE que bom que acha >3<

      Excluir
  12. Já conhecia esse tutorial, mas é sempre bom relembrar.

    Sweet of Cherry

    ResponderExcluir
  13. Eu já comentei? Acho que sim, não sei, eu comentei quando coisou a postagem, mas ok, vou comentar de novo. O tutorial é super útil, e fica muito legal, parabéns :3

    Visite o blog :3 | Etc For Me :3

    ResponderExcluir
    Respostas
    1. UHEUHEUH ai desculpa, eu tive que 'coisar' por causa da ilustração o3o Mesmo assim, obrigada >3<

      Excluir
  14. hey!
    Achei esse tutorial super útil! Vou tentar fazer no meu blog, e deixar nos favoritos também :D

    Adorei seu blog, já estou seguindo, te espero no meu! <3
    Um grande beijo,
    Duda.

    fashiondudaah.blogspot.com

    ResponderExcluir
  15. Esse tutorial é bem útil , vou até deixar nos favoritos *-*

    Queria pedir algum tutorial para ps , tipo como fazer alguma coisa para lays , poderia fazer , amor ? <3

    XOXO <3 || Senhorita Liberdade

    ResponderExcluir
    Respostas
    1. Ok *uu*

      Tipo, cabeçalhos, faixinhas, avatares...? Pede na ask linda
      (ノ⊙ヮ⊙)ノ

      Excluir
  16. Eu amo usar esse tutorial <3
    Já estava com saudades daqui <33'

    ha-unting.blogspot.com

    ResponderExcluir
    Respostas
    1. AAAAAAAAH que lay divo o seu Ana *00* ~

      Eu também q. Awn ♥

      Excluir
  17. este tuto e otimo,muda totalmente a aparencia do blog ^^

    awn helo sz tava com saudades daqui e resolvi visitar oo lay ta tão fofo que nem da vontade de ir embora suhushuahush bjoss ^^ !!

    ResponderExcluir
    Respostas
    1. Verdade *0*

      Lôôô (╯°□°)╯ Que saudades ♥♥♥♥

      Excluir
  18. O resultado ficou ótimo haha!
    Já add no favoritos porque se eu precisa eu venho aqui :D
    Cate-land.blogspot.com

    ResponderExcluir
  19. Ótimo tuto! Estava procurando por ele! 'HAUEAUHEU
    Blog muuito fofo o seu *-*
    Um beijão!
    http://infinitiesbooks.blogspot.com.br/

    ResponderExcluir
  20. Muito útil o tutorial, o meu realmente não esta ajustado se diminuir ele repete. Adorei o tutorial, muito bom <3

    cherrycookiie.blogspot.com.br

    ResponderExcluir
  21. MDS ESSE TUTO é um tutorial dos deuses HUAUAUAUAHUAHAUA
    Adorei de mais isso, super fácil e simples <3
    Mds, do no pé e te obrigaram a andar de skate, que dó ç.ç

    XOXO :D
    {Joven Clube}

    ResponderExcluir
  22. Eu já reparei isso que muitas vezes fica diferente dependendo da tela e acho bem ruim, seria bom se se ajustasse sozinho auhhaua. E juro que eu li que você tinha que tirar fotos do seu guarda-roupa em vez de tirar as roupas UHAUHAUH
    beijos
    sim senhorita (clique aqui ou no perfil)

    ResponderExcluir
  23. Rsrs, sempre fico de vela '-' Amigo virtual? Eu tenho vários, é bem legal conhece amigos virtuais! Adorei o tutorial, eu estava precisando de algum *U*

    http://bomb-dreams.blogspot.com.br/

    ResponderExcluir
  24. Adorei o tuto, é bem útil ^~^

    breathingnewthings.blogspot.com.br

    ResponderExcluir
  25. Adorei esse tutorial =)

    girlsofthemoonlove.blogspot.com

    ResponderExcluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!