O motivo do sumiço + Cabeçalho em toda a largura do blog

Acho que vocês sabem, to na 8ª série do fundamental e tá sendo tudo muito corrido. Desde o ano passado faço dois cursos de computação (web designer e operador de computador) e semana passada comecei um curso preparatório para as provas de seleção, como to saindo do fundamental tenho que garantir minha vaga em uma escola de ensino médio, e pra isso tenho que fazer umas provas ~tensas~ Esse cursinho é dois dias por semana, ou seja: tenho 2 cursos na terça (preparatório+webdesigner) um na quarta (operador de pc) e um na quinta (preparatório), então só tenho a segunda e a sexta livres (fora o tempo que tenho antes e depois dos cursos) e ainda tenho que conciliar o blog com trabalhos escolares.  Espero que entendam que tá difícil atualizar o blog e que provavelmente ele vai continuar assim meio parado, infelizmente, mas fazer o que né?

Muita gente pediu para eu ensinar como fiz o cabeçalho ocupando toda a largura do blog, e hoje vou revelar o segredo. Na verdade não é um cabeçalho e sim um background (HÁ! por essa você não esperava!) 

Há uns tempos atrás eu visitei o Madtown e vi que o cabeçalho ocupava toda a largura, achei lindo e só depois raciocinei que era um background. Me inspirei na ideia e coloquei aqui no blog também! :3 Tava só esperando a Laís postar o tuto primeiro (já que foi ela que inventou seria injusto eu postar antes né?).

É bem simples de fazer e existem duas formas, uma com HTML e outra sem! Go!

Materiais

Obviamente você vai precisar de uma imagem (cabeçalho) pra colocar no background. Recomendo a largura 1365px (é a que eu uso) mas pode ser maior. Aqui no meu note dá direitinho! Quanto a altura, 400px tá de bom tamanho.

Você também vai precisar de um cabeçalho transparente, pra que? Porque sem nada no cabeçalho, as postagens e a sidebar vão para cima e vão tapar seu background, então já faça uma imagem transparente de altura um pouquinho maior que o back e coloque no lugar do cabeçalho normal (no gadget do cabeçalho na guia design)

1ª forma: Pelo designer do modelo

Essa é a maneira que eu mais recomendo, pois é bem mais prático e fácil do que da outra forma que vou ensinar, mas tem um porém: Só da pra fazer upload de imagens com até 300KB, no meu caso não deu, pois a minha imagem é bem maior. Então se sua imagem  tem mais que 300KB tente a outra forma porque essa não dá :(

Após ter feito a imagem vá até: Design >> Designer do Modelo >> Plano de fundo e faça o upload da imagem, deixe na opção "não dividir em blocos" ou "dividir horizontalmente", as duas são boas! 

Para deixar o fundo cinza no resto do blog -como aqui no GI- vá em Design >> Designer do Modelo >> Avançado >> Planos de fundo e na caixinha "Plano de fundo externo" coloque a cor que desejar.

2ª forma: Pelo HTML

1°) Vá em modelo > Editar HTML.
2°) Aperte Ctrl+F e procure por body { Você irá encontrar um código assim:

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: #cor; }

Substitua onde esta escrito "URL do cabeçalho" pela url da imagem e onde está #cor coloque o código da cor que desejar. Lembre-se de mudar a altura (400px) para a altura do seu cabeçalho/back!

É isso, desculpem-me por ter escrito tanto e ter dito quase nada, isso é fato nos meus posts né? haha