Anuncio layout

Anuncio layout
Encomende já o seu layout!
- 17.11.16

Cabeçalho do blogger

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 :D

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

Comente com o Facebook:

11 comentários:

  1. arrasou no tutoriaaaal, miniiinaa <3 vai ajudar muita gente, parabéns!

    ResponderExcluir
    Respostas
    1. Muuuuuuito obrigada Jaque, sua linda <3 <3 Espero ajudar sim, obrigada!

      Excluir
  2. Aiii Lariz, você sempre salvando nossa vida! Obrigada por esse tutorial super explicadinho! Vou tentar fazer depois e te falo (to com pouco tempo pra mexer no blog, tem monte de coisa q quero fazer mas não consigo :/ ) Mas ai vou salvando todas suas dicas aqui e compartilhando tb!
    Você arrasa sempre!
    beijos
    Tamara
    Blog Tamaravilhosamente

    ResponderExcluir
    Respostas
    1. Tamara, sua linda, eu que agradeço por todo esse carinho, sério mesmo! Se conseguir me avisa, quero ver como ficou <3 kkkkkk. Obrigada linda, se precisar tamo aqui! Beijão ♥

      Excluir
  3. Que post top! Adorei! Eu amo mexer no meu blog, fazer imagens e o cabeçalho, por isso adorei seu post.
    E seu blog, muito lindo, não dá vontade de sair daqui rs,
    Um beijo
    www.esteticando-se.com

    ResponderExcluir
    Respostas
    1. Obrigada Emanuelly (que nome lindo *--*), aqui tem vários tutoriais, espero te ajudar <3 kkkk. Beijos pra você também!

      Excluir
  4. Obrigado por atender os nossos pedidos...
    Adoreíiii o tiro, vc e demais. ❤❤❤❤
    To esperando os vídeos sobre sua transição no yt hahaha ,bjo

    ResponderExcluir
    Respostas
    1. Imagina, eu que agradeço pelas sugestões que vocês me dão, e por toda a companhia hehe.
      Obrigada linda, e prometo que não vai demorar pra sair mais aluns kkkk. Beijos <3

      Excluir
  5. eu não tô conseguindo achar o body {

    ResponderExcluir
  6. Lariz, eu fiz esse tutorial no seu tema base e deu certinho, mas ele não quer aparecer no celular, deu pra entender?

    ResponderExcluir
  7. Eu tentei de novo, mas a imagem de fundo não aparece de jeito nenhum. Eu hospedei ela no tinypic e n funciona DD:

    Ta ótimo esse tutorial, mas algo aqui desse lado ta dando errado kkk

    ResponderExcluir

• 2015 - 2017 Feito com ♥ por Lariz Santana