Tutorial: Personalizar Cabeçalho ocupando toda a largura do blog



Hey galerinha, neste tutorial irei mostrar para vocês como personalizar o cabeçalho do blog de vocês, ocupando toda a largura, com e sem fundo.

Esta é a largura do blog.
Para personalizar o seu blog a imagem deve ter 1920 x 500 pixels. Este tamanho pode aumentar ou diminuir depende do seu blog, mas creio que irá funcionar. Após personalizar a imagem como quer, você deve fazer upload dela, já vou avisando para não fazer upload em um blog de teste, pois ele corta a imagem, e não deixa ela no tamanho original. Ah, e no seu cabeçalho é melhor que já deixe o nome do seu blog, ou não irá funcionar.

Eu usei este site AQUI para fazer o upload da minha imagem. Agora com o cabeçalho que você quer pronto, o que resta agora é colocar no blog.


Tem duas maneiras de fazer isso: 
1. Postar o cabeçalho, mas ficar sem plano de fundo.
2º Postar o cabeçalho e ficar com o plano de fundo.

Então vamos lá.

Cabeçalho sem plano de fundo.
Já vou avisando que sua imagem não deve ter mais de 300 kb, se tiver mais que isso não tem como, então você deve diminuir o tamanho da imagem, geralmente eu faço isso usando o photoshop. Na hora de salvar a imagem, ele te mostra o tamanho dela, ai você pode aumentar ou diminuir. 

Você deve ter o seu cabeçalho pronto, e uma imagem transparente, isso mesmo sem nada! Este transparente deve ter as mesmas medidas que o cabeçalho que você fez.

Com a imagem transparente, você irá em Layout > Cabeçalho > Fazer upload da imagem transparente. 
Marque a opção "Em vez de título e descrição".
Salve.

Feito isso, agora você irá em Modelo>Personalizar>Imagem de fundo > Carregue o cabeçalho que você quer que apareça, o que você personalizou, e marque a opção Não dividir em blocos quando terminar de carregar.

Prontinho, seu cabeçalho sem plano de fundo irá funcionar!


Cabeçalho com plano de fundo
Agora com o plano de fundo, assim como no anterior você deve ter duas imagens, a transparente, e a com imagens, brushes e outras coisas que você queira. Lembrando que a transparente deve ter as mesmas medidas que o cabeçalho que você quer.

Agora para colocar o cabeçalho no blog vá em Modelo > Editar HTML > Clique dentro da caixa do HTML e aperte Ctrl+F. Na caixinha de pesquisa que aparecer, pesquise pelo seguinte código:

body {

Assim que pesquisar, você vai encontrar o seguinte código:

body {
font: $(body.font);

color: $(body.text.color);

background: $(body.background);
}

Apague o código e substitua por este:

body, html {
height: 400px;

margin: 0;

padding: 0; }

body {

background: url("URL do cabeçalho") no-repeat; }
html {
background: url("URL do background") repeat; }


Preste bastante atenção agora, onde está escrito URL do cabeçalho você vai colocar o URL (link) do cabeçalho que você hospedou em algum site.
E no em URL do background você vai colocar o link da imagem de fundo que você quer.


Depois de ter feito tudo isso, e salvar, provavelmente o seu cabeçalho será tampado pelo blog, não vai ficar aquele espaço dele, não é mesmo? Então, é agora que você irá usar a imagem transparente do seu cabeçalho.

Vá em Layout > Cabeçalho > Upload de Imagem > Carregue a imagem transparente com as mesmas medidas do seu cabeçalho, e não esqueça de marcar a opção "Em vez de título e descrição" e salve.

Prontinho! Agora seu cabeçalho está funcionando perfeitamente. Qualquer dúvida deixem nos comentários!!


Compartilhe este post:

Comentários
23 Comentários

23 comentários :

  1. Me ajudou muuuuito, Gessica! <3
    Beijos

    ResponderExcluir
    Respostas
    1. Que bom que ajudou Marina! *----*
      Tentarei postar mais tutoriais aqui!!!
      Beeijos!

      Excluir
  2. Como você fez esse menu de categorias ao lado? Amei *-*
    já vi muitos videos, postagens de como fazer, mas fica muito complicado pra mim pois não tenho conhecimento em PhotoShop! Você poderia ensinar?
    meu blog é http://alwaysdelicate.blogspot.com.br/ Obrigada!

    ResponderExcluir
    Respostas
    1. Oi Marcela.
      É uma boa ideia, vou se programa algo.

      Beijinhos.

      Excluir
  3. Oi linda c:
    Eu estou tendo um robleminha aqui! Estou a começar a fazer um blogue a um bom tempo, e agora, não está dando certo!
    O fundo fica tapando o cabeçalho!
    Dá para resolver ? :c
    Dá uma passadinha para ver o que está se passando, e já agora Obrigada pela atenão!
    http://minimundosoutrosjogos.blogspot.pt/ < Link do blogue

    ResponderExcluir
    Respostas
    1. Olá!
      Você colocou as imagens na ordem que eu coloquei no tutorial?
      Eu não tive nenhum problema... =/
      Não sei o que deu errado, assim, não sei como posso resolver, sinto muito.

      Beijinhos!

      Excluir
  4. Bom dia ! Gostaria de saber como vc criou uma imagem transparente.
    Grato pela ajuda.

    ResponderExcluir
    Respostas
    1. É no Photoshop.
      Ao criar um novo arquivo ele pergunta como você quer o fundo: branco ou transparente. Ai você coloca transparente.

      Excluir
  5. Olá! Eu adquiri um template já pronto, e pelo personalizar, aparece que a imagem de plano de fundo não é aplicável a este modelo. Tem como eu alterar pelo editar do HTML? Obrigado

    ResponderExcluir
    Respostas
    1. Ixi...
      Aí eu já não sei, teria de procurar outros tutoriais na net pra ver se tem como.
      Talvez se você procurar como baixar a sidebar e o local onde fica as postagens, talvez dê.
      Espero ter ajudado.

      Excluir
  6. OMG, você é a melhor, com certeza!!! Muito, muito obrigada mesmo! De todos os jeitos que pesquisei, somente o teu site entendeu a minha busca doida rsrsrs, Enfim, me judou muitíssimo *-----*

    ResponderExcluir
    Respostas
    1. Oieee!
      Ai que booom que ajudou hehehehe!

      Excluir
  7. nao consegui se eu criei a imagem do computador onde acho o link, blog napontadalingua131.blogspot.com

    ResponderExcluir
  8. Maria Luísa21 dezembro, 2016

    Oi Géssica! Já fazia um tempinho que eu tentava fazer isso, e só depois do seu tutorial eu consegui, deu super certo! Muito obrigada! <3

    ResponderExcluir
  9. Boa dica Gessica mas, uma imagem No cabecalho elimina sua H1 que eh a mais importante para Seo. Se vc usa Seoquake, clicando em diagnostico vc vai notar isso. Tenho um Blog e nao uso foto no cabesalho por isso procuro uma maneira de colocar uma himagem la sem afetar meu Seo me responde se descubrir alguma coisa por favor obrigado!

    ResponderExcluir
    Respostas
    1. Olá.
      Infelizmente não sei como resolver esse problema

      Excluir
  10. Muito bom o post, visitem meu blog http://doctormrp.blogspot.com.br
    Varias dicas para gerar trafego organico no facebook e muito mmais

    ResponderExcluir

Não esqueça de deixar o seu comentário! Pode não parecer, mas um blogueiro vive de comentários e sugestões, faça a sua parte e deixe esta blogueira feliz!

Dicas:
- Deixe o link do seu blog/site, eu sempre dou uma olhada!

Regrinhas básicas:
- Por favor não usem palavras de baixo calão.
- Comentários desrespeitosos serão excluídos.

 
Copyright © Cantinho Geek. Designed by OddThemes