Tutorial - Cabeçalho ocupando toda a largura do blog


Enfim, o que eu vim mesmo fazer hoje, é atender a um pedido. Me pediram que ensinasse como colocar o cabeçalho, cobrindo toda a largura do blog. Aprendi a fazer lá no Go Imagine (créditos), e resolvi compartilhar com vocês já que me pediram. Vamos ao tutorial.

Primeiramente, faça sua imagem, e 'guarde' a altura, logo irá entender para que.

1- Vá no seu HTML, aperte Ctrl+F e pesquise por: body {

2- Ao chegar lá, você irá encontrar isso:
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: url("URL do background") repeat; }

O 400 você muda pela altura da sua imagem, e o resto, acho que dá para entender. 

48 comentários:

  1. Awn, eu já uso :3 Fica lindo em blogs pequenos, super cute. /Seguindo e prometo vir aqui frequentemente!

    ResponderExcluir
  2. Acho super útil, sempre usava antes ^^ OMG, obrigada por aceitar afiliação, já te coloquei ♥

    UnicornParadise.blogspot.com

    ResponderExcluir
  3. Bem útil o tutorial!
    Fica super bonito ♥
    Adorei adorei amei aqui!
    Seguindo!
    xoxo
    www.fofokisteen.blogspot.com

    ResponderExcluir
  4. Adorei tutorial, ajudou bastante *-*
    teen-girl-fashion.blogspot.com

    ResponderExcluir
  5. Muito bom, estava procurando este tutorial! :)
    manual-girls.blogspot.com

    ResponderExcluir
  6. Já usei este tutorial, mas acho que não utilizarei mais ele, pelo fato de não gostar do cabeçalho na largura toda do blog =/ Amei o tuto ;3 Beijão!

    Ju, do Epílogos e Finais.

    ResponderExcluir
  7. Oi flor!!
    Amei seu blog,é tipo muito fofo.
    Seguindo.visita??
    OBS:voce pode me ajudar indicando alguns de seus leitores ao meu blog quero atingir minha mata de 100 seguidores tenho 78.MUITISSMO obrigado se me ajudar.


    http://luanagarcia-sos-beleza.blogspot.com.br/

    ResponderExcluir
  8. Obrigada Ingrid, no próximo layout vou usar esse tutorial. Salvei nos favoritos a página.
    Kisses.

    ResponderExcluir
  9. Adorei o tutorial, procurei por ele por muito tempo, mas nunca achei algum que me ajudasse, bjus!

    ResponderExcluir
  10. Adorei o tuto, sempre quis saber como fazia isso ^^

    ResponderExcluir
  11. eu amo esse tuto,
    é um tutorial organizado e deixa o blog fofin'

    http://design-of-html.blogspot.com.br/ <~ visita?

    ResponderExcluir
  12. Eu estava precisando desse tutorial favoritei pra usar no meu layout

    wonderland-crazy-blogger.blogspot.com.br/

    ResponderExcluir
  13. Bem fácil de fazer, e o resultado fica lindo ^^

    Beijos ~
    ~ APPLES FLYING - http://blog-wonderland-cherry.blogspot.com.br/
    VISITA?

    ResponderExcluir
  14. Tava precisando desse tutorial mesmo , próximo layout vou usar

    http://worldofgirl-official.blogspot.com.br

    ResponderExcluir
  15. Ótimo tutorial, fica lindo assim *u*
    Caramba eu me apaixonei pelo seu blog, sério! Tudo muito lindo e organizado... Claro que estou seguindo :3

    Beijo,
    crazyforhtml.blogspot.com.br

    ResponderExcluir
  16. No meu nunca dá certo :c Mas fica muito lindo!

    Beijos...
    Batom De Framboesa - Fan Page - Twitter.

    ResponderExcluir
  17. ótimo tutorial,Ingrid *-*
    Amei,Aceita afiliação? já vou abrir o blog acho que dia 25/1 ou 26,daí pode me mandar a resposta? Beijos

    ResponderExcluir
  18. Eu amo esse tutorial, fica muito lindo e está bem explicado Ingrid! :3
    Beijos!

    ResponderExcluir
  19. Já conhecia o tuto, usei uma vez no meu blog, mas tem um problema, em computadores com a tela maior, fica horrível|! Tudo sai fora do lugar e o cabeçalho repete!
    Por isso que eu tirei o lay tão rápido, algumas pessoas reclamaram que estava dando esse "erro".
    Beijos!

    http://euemeujardimsecreto.blogspot.com.br

    ResponderExcluir
  20. Eu acho que um blog que tem o cabeçalho em toda a largura é um charme ^-^
    {euamohtml.blogspot.com}

    ResponderExcluir
  21. ta bem explicadinho, rs eu já usei esse tutorial;)

    http://conectadas2.blogspot.com.br/

    ResponderExcluir
  22. Ótimo tutorial, vou usar em um dos meus lays... Não sabia fazer isso ainda.. Kkkkkk...

    Amei seu blog... Estou seguindo... Dá uma passadinha no meu cantinho?

    http://docediamantenegro.blogspot.com

    ResponderExcluir
  23. Adorei o tutorial, eu até já uso e amo o resultado *---*
    Beijocas!

    PiinkCookie.blogspot.com

    ResponderExcluir
  24. É o mesmo tutorial de colocar 2 cabçalhos. Nem sabia ^^ muito fácil.
    >>> República Crash

    ResponderExcluir
  25. Perfeito!
    Beijos!
    http://cantinhodaslovelys.blogspot.com.br/

    ResponderExcluir
  26. Awwn esse tutorial é divo e o resultado também.
    Beijos,morango mordido (visita?)

    ResponderExcluir
  27. Que legal esse tuto! Queria fazer um pedido, como colocar blogroll no cabeçalho do blog?
    Bj!

    rascunhosdecaneta.blogspot.com

    ResponderExcluir
  28. Esse era, exatamente, o tutorial que eu estava procurando *--* Muito obrigada, mesmo. Adorei!

    aperta-o-start.(blogspot.com)

    PS: Tira os parênteses.

    ResponderExcluir
  29. Esse era, exatamente, o tutorial que estava procurando. Muito obrigada! (:

    aperta-o-start.(blogspot.com)

    PS: Tira os parênteses.

    ResponderExcluir
  30. Onde consigo o url do cabeçalho?

    ResponderExcluir
    Respostas
    1. Faça o cabeçalho e o hospede em um site tipo esses: tinypic.com ou imgur.com

      Excluir
  31. Não estou conseguindo achar o código acho que mudou tudo, me ajuda por favor!

    ResponderExcluir
  32. Olá, poderia me ajudar? não consegui achar o código acho que o meu blogger está diferente, ja tentei achar com ctrl+f e não deu mesmo assim.
    Beijos

    ResponderExcluir
    Respostas
    1. Você tem que abrir todas aquelas setinhas que se encontram do lado, no HTML.

      Excluir
    2. oi flor , então no meu blog tbm não deu certo e eu abri as setinhas e mesmo assim não achei ;( e agora oq eu faço ?

      Excluir
    3. Abriu todas? Tem certeza que procurou certo flor? Procura por /* Content pra ver. :3

      Excluir
  33. O cabeçalho fica muito ao pé da caixa das mensagens. Como faço para por a caixa das mensagens mais para baixo?

    ResponderExcluir
    Respostas
    1. Usa esse tuto aqui: http://space-sweet-girl.blogspot.com.br/2013/01/como-subir-sidebar-e-area-das-postagens.html mas ao invés de colocar número negativo, coloca positivo.

      Excluir
  34. Ingrid, qual é a URL do background? Eu utilizo um modelo padrão do blogspot.

    ResponderExcluir
    Respostas
    1. Você tem que escolher um background e o hospedar em um site tipo esses: tinypic.com ou imgur.com

      Excluir
  35. Consegui colocar mais a imagens repete tipo fica a parte normal e em baixo aparece a a imagem de novo,como arrumo isso?

    Princesa Descolada

    ResponderExcluir
    Respostas
    1. Você deve ter deixado uma altura muito grande no código. :3

      Excluir
  36. Ele esta cortando um pedacinho do meu cabeçalho, o que faço ?
    -> alwaysdreeam.

    ResponderExcluir
  37. Bom ficou no jeito que é para ficar, mais agora esta aparecendo o começo de novo do cabeçalho, e eu salvei ele em 400, não entendo o que esta acontecendo '-'

    ResponderExcluir
    Respostas
    1. Então o tamanho do seu cabeçalho não é 400 c:
      Ah, lembrando que 400 é a altura.

      Excluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +