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!!