Cabeçalho do blogger - Aprenda a fazer e ajustar

Oi gente! Eu tenho recebido muitos pedidos de ajuda em relação ao cabeçalho do blogger. A maioria tem dificuldade em ajustar a imagem para pegar a tela inteira. Como essa imagem a cima.

Não é tão difícil quanto parece, seguindo umas dicas e usando os códigos certos, vocês conseguirão um resultado incrível! A primeira coisa que vocês precisam saber é: O nome do seu blog precisa ser feito separado da imagem de fundo, e não junto como a maioria faz. Então vou ensinar vocês a fazer o logo, fundo e depois a ajustar tudo no seu layout. Vamos lá? 

Cabeçalho com flores e nome do blog

Aviso: Não tente fazer diretamente no seu blog. Crie um blog de teste com uns 4 posts e marcadores. Copie o layout do seu blog e cole no blog de testes. Assim, você pode usar ele sempre antes de tentar fazer algo no seu blog, pra não correr o risco de estragar o layout ou algo assim, ok? Esse blog de testes será bem útil!

O nome do seu blog

Fazer a parte do nome do seu blog é fácil. Você só vai precisar de um editor de fotos, uma fonte legal, e escrever como você achar que fica melhor. Lá vai algumas dicas:

– Use uma fonte bonita e legível. A que eu usei é a Little Cutie
– Faça a imagem com o fundo transparente – isso é essencial, já que você quer colocar uma imagem ao fundo do blog. Pode clicar no espaço em branco a seguir, e salvar essa imagem transparente para montar seu logo em cima dela:
Imagem transparente para usar no photoscape

– Faça em tamanho grande, uns 800px de largura – para garantir a qualidade.
– Corte o quadrado do tamanho certinho do logo, não deixe espaços em branco em volta, não precisa.

Eu fiz isso e ficou assim:

Exemplo de logo

Aí é só salvar em png (para o fundo ficar transparente).

Fazendo o fundo

Também aconselho fazer o fundo com uma imagem transparente. Para montar ele, você vai precisar fazer ou achar imagens que tenha a ver com o que você queira. Um jeito legal é procurar as imagens em inglês e com o final “png”, por exemplo: watercolor png, flowers png, flowers brushes png, tumblr png. Só com esses exemplos que eu dei, da pra achar bastante coisa legal.

Eu acho muita coisa bacana no pinterest, eu procuro do mesmo jeito, só que em vez de png eu coloco free no lugar: watercolor free, flowers free, geralmente aparece bastante coisa legal! Essas flores que usei de exemplo no post, encontrei lá no pinterest mesmo! Elas são do site Mandy Art Market.

Então é só você montar a imagem como quiser, e depois salvar em png. Pra imagem e fundo eu costumo usar 1900px de largura, e quanto eu achar que fica bom de altura 😀

A minha ficou como na imagem abaixo. (Deixei essa imagem em tamanho grande, então você pode usar no seu blog se quiser, só salvar!)

Fundo do cabeçalho com flores para download

Ajustando o fundo

Salvou sua imagem de fundo? Agora você precisa hospedar a sua imagem! Para isso, é só entrar no site imgur.com , clicar lá em cima no botão verde em “New Post”, depois em “Browse” e escolher sua imagem para fazer upload. Então você poderá copiar a url dessa imagem.

Agora será preciso mexer com os códigos. Vá em Modelo > Editar Html, clique no meio dos códigos e aperte ctrl+f no seu teclado. Procure por:

body {

Ele deve estar mais ou menos assim:

body {
  codigo;
  codigo;
  codigo;
}

É claro que no lugar de “código” terá outras coisas escritas né hahaha, mas a questão importante aqui é que após cada código sempre há um ; (ponto e vírgula) para separar um do outro, não apague nenhum desses códigos que já tem* e principalmente os ; (pontos e vírgulas), porque esses códigos são importantes para o seu layout, então cuidado!

*Pode ser que já tenha no seu layout, alguns dos códigos que vou pedir para acrescentar, então é só você comparar direitinho se já tem, e modificar nos lugares certos. É só comparar meus códigos com os do seu layout com calma que você vai conseguir saber!

Lembre-se sempre que toda tag abre { e fecha } ou seja, se body { então depois dos códigos sempre terá um } , não se esqueça disso, porque um { } a mais ou a menos pode bugar todo o seu layout (e seu pc pode explodir – a parte de explodir é brincadeira).

E agora que você já sabe, antes do } você deverá acrescentar:

background-image: url(‘URLDASUAIMAGEM‘);
background-size: 100%;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: no-repeat;
background-attachment: scroll;

Deverá ficar parecido com isso:

body {
background-image: url(‘URLDASUAIMAGEM’);
background-size: 100%;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: no-repeat;
background-attachment: scroll;
}

Depois é só ajustar de acordo com o que você precisa:

URLDASUAIMAGEM – você vai substituir pela url da imagem que você hospedou lá no imgur

background-size: 100%; – é o tamanho do fundo, 100% quer dizer que ele sempre vai pegar a tela inteira, independente do tamanho da tela.

background-position-x: 0px; – quanto maior o número, mais pra direita a imagem vai.

background-position-y: 0px; – quanto maior o número, mais pra baixo a imagem vai.

background-repeat: no-repeat (não vai repetir) ou repeat (vai repetir).

background-attachment: scroll (quando descer a página, a imagem não vai junto) ou fixed (quando descer a tela a imagem vai junto)

Depois é só salvar e ver como ficou, se não tiver ficado bom, é só continuar ajustando até acertar. Se algo tiver dado errado, é só dar ctrl+z pra desfazer o que você fez.

Ajustando o logo

No painel do blogger, vá em Layout e clique pra editar o gadget do cabeçalho. Lá você poderá escolher a imagem que você fez com o nome do seu blog, fazer o upload e depois salvar. Veja no seu blog como ficou.

Para ajustar o logo (deixar maior, menor, ir para o lado, pra cima, pra baixo), vá em Modelo > Editar Html. Clique no meio dos códigos e aperte ctrl+f no seu teclado. Então procure por

#Header1 {

Se você usa meu tema base, dentro do div#Header1 você encontrará

width: 40%;  – que é a largura, você pode mudar o número pra maior ou menor.

margin-top: 147px; – que é altura que o logo está posicionado. Quanto menor o número, mais pra cima ele fica.

Se você não usa meu tema base, pode ser que as coisas dentro do #Header1 estejam diferentes, e infelizmente não tem como eu saber. O que você pode fazer é ver se já tem width e margin-top e caso tenha, só alterar o valor de acordo com o que você quer.

Se não tiver, antes do fechamento } acrescente esses códigos (width: 40%; margin-top: 147px; ) e altere o valor de acordo com o que você quer.

– ♥ – 

Essas são as dicas e a forma como posso ajudar vocês a ajustar o cabeçalho do blog de um modo geral. É claro que cada layout tem seus códigos, seu jeito de funcionar, e pode ser que tudo não esteja exatamente como o que eu falei. Mas se você prestar atenção nos meus códigos e explicações, você conseguirá identificar no seu layout e alterar como você quer. Essas coisas funcionam muito na tentativa e erro.

Se você não conseguir mesmo, pode comentar aqui deixando o problema + o link do seu blog, para eu dar uma olhada e tentar te ajudar!

Se tiver alguma dúvida, fique a vontade para perguntar nos comentários. E não se esqueça de dizer o que achou do tutorial! Beijinhos <3