Tutorial: Cabeçalho Ocupando Toda a Largura do Blog

Hey Yo!

E ai, galera! Tudo bem com vocês? Não sei por quê, mas estou tão animada em voltar a postar aqui. O RV fez certa falta para mim nesses últimos tempos. Nesse nosso comeback inesperado, resolvi começar com um tutorial que, na minha opinião, fica uma gracinha em qualquer layout, tanto que eu usei esse tutu no lay atual do blog. Como vocês já devem ter visto no título, irei ensinar como deixar o cabeçalho ocupando toda a largura do blog. Sem mais delongas, bora pro tutu?

Antes de começar, preciso dar uma aviso básico: recomendo que você faça um cabeçalho de tamanho padrão da largura. "Como assim tamanho padrão?" o tamanho padrão de largura é 1280 px, então faça um cabeçalho de largura nesse tamanho e você não terá nenhum problema em colocá-lo no blog. Já a altura, você que decide, eu optei por usar 333 px.

Bom, é muito simples. Primeiramente, vá em Modelo e depois e depois clique no botão "Editar HTML". Clique no primeiro triângulo preto em frente ao número das linhas para abrir o restante do código. Depois disso, clique no HTML e dê um Ctrl + F no seu computador para abrir uma barra de pesquisa. Pesquise:

/* Content

Abaixo desse código, provavelmente você encontrará:

body {

  font: $(body.font);

  color: $(body.text.color);

  background: $(body.background);

}

Apague esse código e substitua por esse:

body, html {

height: 300px;

margin: 0;

padding: 0; }

body {

background: url("Link do Cabeçalho") repeat; }

html {

background: url("Link do Background") repeat; }

Você só pode editar 2 coisas nesse código: a altura e os links. "height: 300px;" é a altura do cabeçalho. Edite o número para a mesma altura do seu cabeçalho. Agora você precisa de uma imagem de fundo transparente. "Onde eu arranjo isso?" você pode fazer no SumoPaint com a altura e largura do seu cabeçalho e salvar no computador ou usar essa imagem, que é a mesma que eu estou usando. Porém, o tamanho da imagem é 1280x333, então eu sugiro que você faça a imagem de fundo transparente no SumoPaint caso a altura do cabeçalho não seja 333px. Agora, vá em Layout e clica no gadget Cabeçalho. Depois, clique em: "Em vez de título e descrição", adicione a sua imagem de fundo transparente e depois é só visualizar para ver se está tudo certinho!

Bom, galera, esse foi o tutu! Espero que tenham gostado. Os créditos pelo tutu vão ao blog Caramelos Encantados. E ai, já tentaram? Deu certo? Me contem! Por enquanto é só, um beijo e até logo!