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:
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.
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 {#f7f7f7 - Substitua pelo código da cor que você deseja que fique em todo o layout.
background: #f7f7f7 url('LINK-DA-SUA-IMAGEM') no-repeat;
background-size: 100%;
background-position-y: 0;
background-position-x: 0;
background-attachment: scroll;
}
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.
Nossa acho que vou seguir a tua dica
ResponderExcluirBeijinhos
Novo post (Review Batom Matte) // CantinhoDaSofia /Facebook /Intagram
Tem post novos todos os dias
Siga sim, seu blog ficará lindo! Beijos :*
ExcluirAdorei a dica.
ResponderExcluirMuito simples para colocar em pratica.
Beijos
https://glamour-02.blogspot.com.br/
Que bom que gostou! Beijos
ExcluirOLA ALEXIA - SEGUE MEU BLOG -https://dudureceita.blogspot.com/2019/03/como-fazer-receitas-de-comida.html
ExcluirDica muito boa , adorei!! Bjo
ResponderExcluirObrigada pela visita!
ExcluirO cabeçalho na minha opinião é o que dá um charme ao blog ou a qualquer outro site. Boa dica :) Bjos
ResponderExcluirFaça-me uma visita -> LEH BLOG | INSTAGRAM
Concordo com você!! Beijos
ExcluirAmei a dica, obrigada ♥
ResponderExcluirBeijo!
Coruja Doce Blog
Fico feliz que gostou :)
ExcluirDica ótima! Eu adoro o seu layout, é tão lindo haha
ResponderExcluirBeijos <3
Menina, nem te conto! | @isabellabernardes
aaa muito obrigada <3 Beijão :*
ExcluirHola Alexia!!
ResponderExcluirMuchas gracias por la cabecera, es muy bonita :D
Obrigada!!
Besos :33
amei amore <3 estou usando <3
ResponderExcluir