22 abril 2018

Como colocar cabeçalho no blog + FREEBIE

background no blog

Você está cansada da cara do seu blog e não sabe o que fazer para mudar? Então hoje minha dica é para você! Neste post ensinarei como colocar um cabeçalho no blog que fique com a largura total para deixar seu layout bem mais bonito.

Há um tempo comecei aqui no blog uma saga personalizando um layout do zero.
AQUI você pode ver todos os tutoriais que já fiz para este layout.
AQUI você pode vizualizar o layout e este tutorial.


1- Crie um nome para seu blog com o fundo transparente ( salve em formato PNG ). Para isso você precisará usar um editor de imagens, geralmente eu uso o Photoshop CS6, mas você pode usar um de sua preferência. A minha imagem ficou assim:

cabeçalho free 

Usei a fonte Wildera
2- Agora você precisa criar o background que você acha que combina com seu blog. Use elementos que você gosta, como flores, aquarela, borboletas, formas geométricas... O que você quiser!
Logo em seguida hospede onde preferir ( eu recomendo o Imgur.com, uso há anos e nunca deu problema ).
Na minha imagem usei folhagens que achei pesquisando no google e usei a função de imagem Tons de Cinza no photoshop. Para usar essa imagem no seu layout você pode fazer o download aqui.
freebie

Agora temos que colocar essa imagem no layout e é ai que entra os códigos mas fica tranquila que é tudo bem facinho!

Entre em Tema > Editar HTML > Clique em qualquer espaço dentro do código e aperte Ctrl + F  ( vai aparecer uma pequena caixa no canto direito do código) > pesquise por body {

Substitua pelo seguinte código:
body {
    background: #f7f7f7 url('LINK-DA-SUA-IMAGEM') no-repeat;
    background-size: 100%;
    background-position-y: 0;
    background-position-x: 0;
    background-attachment: scroll;
}
#f7f7f7 - Substitua pelo código da cor que você deseja que fique em todo o layout. 
LINK-DA-SUA-IMAGEM -- Substitua pelo link da imagem de fundo que você criou, aquela que você hospedou.
background-size: 100% - Aqui estamos definindo que a imagem sempre ficará no tamanho total do layout, ela sempre ficará completa, do jeito que você criou.
background-position-y: 0; - Aqui estamos definindo a altura que ficará a imagem, quando maior o número que você colocar, mais a imagem vai descer. ( No meu layout eu coloquei 48px, pois nele tem um menu fixo e a imagem fica logo abaixo do menu )
background-position-x: 0; - Quanto maior o número que você colocar mais a imagem vai para a direita. Números abaixo de 0 a imagem vai para a esquerda.
background-attachment: scroll; - Você quer que a imagem role com a página ou não? É aqui que vamos definir isso. quando você coloca scroll, a imagem não vai descendo junto com a página. Se você trocar scroll por fixed, a imagem vem acompanhando o mouse.

E é isso. Bem simples, não é? Se você gostou, comente aqui para eu saber ❤ Continue acompanhando o blog, sempre trarei tutoriais como esse. Até logo.

15 comentários:

  1. Nossa acho que vou seguir a tua dica
    Beijinhos
    Novo post (Review Batom Matte) // CantinhoDaSofia /Facebook /Intagram
    Tem post novos todos os dias

    ResponderExcluir
  2. Adorei a dica.
    Muito simples para colocar em pratica.
    Beijos

    https://glamour-02.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Beijos

      Excluir
    2. OLA ALEXIA - SEGUE MEU BLOG -https://dudureceita.blogspot.com/2019/03/como-fazer-receitas-de-comida.html

      Excluir
  3. O cabeçalho na minha opinião é o que dá um charme ao blog ou a qualquer outro site. Boa dica :) Bjos

    Faça-me uma visita -> LEH BLOG | INSTAGRAM

    ResponderExcluir
  4. Dica ótima! Eu adoro o seu layout, é tão lindo haha

    Beijos <3
    Menina, nem te conto! | @isabellabernardes

    ResponderExcluir
  5. Hola Alexia!!
    Muchas gracias por la cabecera, es muy bonita :D
    Obrigada!!
    Besos :33

    ResponderExcluir