Todas as Sagas e Arcos
de One Piece!

Guia Completo


sample18
  Inspirações: Tatuagens de Mascaras Hannya (Leia +)
profile-sample1
sample10
 Primeiras Impressões: Sono Bisque Doll wa Koi wo Suru (Leia +)
profile-sample5


Cabeçalho na largura total do blog e outros tamanhos



[ #18 | B E D A ] Konnichiwa fadinhas & elfos! Como estão? Hoje resolvi ajudar a como fazer um banner na largura total, do blog. O que tenho visto muito na blogosfera é a pessoa fazer apenas se baseando na própria tela, na própria proporção, mas não deveríamos fazer assim. Nesse post darei algumas dicas, espero que gostem! Let's Go? 

Esses dias tenho visitado alguns blogs que não visito sempre, e percebi que muitos o cabeçalho ficava torto, e ele todinho do lado esquerdo e o conteúdo do blog no meio. Acabo vendo isso, pois a tela do meu pc é grande, já que uso pra TV também. Eu fiz o meu, acreditando que a minha tela era grande suficiente e que colocando ''width:100%'' iria funcionar, mas quando cheguei no meu curso de design ficou incompleto no canto direito, a partir disso ajeitei na maior resolução que consegui, esse post é baseado na minha experiencia então aconselho isso para vocês também! Vou explicar melhor vem comigo!



Nome do blog


Antes de começar a fazer a imagem do cabeçalho eu recomendo que apenas o nome/logo do seu blog seja feito por fora e salvo em png! O beneficio disso é que o blogger centraliza para você e ainda na visualização de mobile vai aparecer o nome certinho, faça assim:





Ele está em png, na largura de 700px +/- e a altura é de acordo com o tamanho da letra, não pode deixar nenhum espaço transparentes sobrando nos cantos! Se usa Photoshop, é só ir em ''imagens'' + aparar + pixels transparentes + OK . Salve em png e prontinho! É só colocar no blog por aqui:
Imagem relacionada
Layout =Tema

Fazendo o fundo e ajustando


A arte do fundo do cabeçalho normalmente é usado 1600px de largura. Mas pode também usar o tamanho de 2160px de largura e 400px altura, deu super certo , é a imagem de exemplo acima.  

Obs: Caso seu html não identifique o width 100% que foi o caso do SM, use o tamanho 2800pxele não sobra em quase nenhuma resolução de tela!

Agora vamos colocar esse fundo, vá em Tema + Editar HTML, clique na caixa de html, aperte Ctrl+F , procure por body {  , substitua por :

body { 
background-image: url('URL DO FUNDO DE CABEÇALHO'); 
background-size: 100%;
background-position-x: 0px; 

background-position-y: 0px; 
background-repeat: no-repeat;
background-attachment: scroll; 
}

Para colocar o fundo você vai precisar saber a url da sua imagem, para isso recomendo que hospede no imgur e ele te dará o link, cole dentro das aspas e salve! Ajuste oque achar necessário e prontinho!

~ Outras opções ~

Meu blog bugou! O que fazer? Teste colocar do jeito mais simples, apenas assim: body {
background: url("URL DO FUNDO DE CABEÇALHO") no-repeat;
background-color: #fff; }

Uso um template baixado no meu blog, o que fazer? Nesse caso, procure por body , não substitua nada! Apenas adicione antes de fechar as chaves e acima da cor de fundo: background: url("URL DO FUNDO DE CABEÇALHO") no-repeat;  

Ainda não foi, existe outro código? Sim! Pode testar também: 
body, html { height: 400px; margin: 0; padding: 0; }
body {background: url("URL DO FUNDO DE CABEÇALHO") no-repeat; }
html{ background-color: #fff; }
html body .region-inner { min-width: 0; max-width: 100%; width: auto; } 


Por hoje é só! Qualquer duvida é só perguntar ok?! 
Espero que tenham gostado ! Hoje fiquei com o probleminha de internet de novo, mas não abandonarei o BEDA! Então visite sempre ok?! Até mais! Kissus e fique na paz!
Resultado de imagem para bye kawaii gif

Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *  

16 comentários:

  1. Essas suas dicas são mara! Vou ver se altero no meu, fiz baseado no meu computador mesmo e nem sei mexer direito >.<

    Bom domingo!
    tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Owwn que legal que gosta! Mas até que no seu combinou ele é junto com a área do post, mas qualquer duvida é só falar tá? <3 Obrigada pela visita! Kissus

      Excluir
  2. Eu quero aumentar uma imagem do cabeçalho do template Amália. Como posso fazer?

    ResponderExcluir
    Respostas
    1. Você pode pegar a imagem e editar de novo com um tamanho maior. Ou adicionar width e height no css, (exemplo: width: 500px;) você escolhe o tamanho pela numeração

      Excluir
  3. Oi amei sua dica... Eu realmente precisando... Amei seu blog
    Beijinhos

    Cátila Santos

    ResponderExcluir
  4. Gostei muito da sua explicação. Tudo foi muito claro, mas no meu blog https://www.apoiopedagogico.blog.br/ ou ele estica para baixo, ou fica muito pequeno. Não estou conseguindo ajustar. Tem algum problema deixar sem a descrição de cabeçalho? no caso de SEO?. Abraço e obrigado pelo conteúdo.

    ResponderExcluir
    Respostas
    1. Oláa, fico feliz que gostou! Você fez o nome separado do fundo? Pq a resolução ficaria melhor também e deixava só o fundo pelo html.

      Realmente eu dei uma olhada no seu, a parte do seu cabeçalho é divido, o espaço todo não é uma div só, tem centered-top, hamburger-section, blog-name, header-widget na mesma parte. Você teria que mexer bastante, mas testa adicionar no CSS do cabeçalho (position:absolute;)

      Descrição é importante pro SEO mas você pode deixar apenas oculta (não aparece no blog mas aparece na pesquisa do Google) selecionando: Imagem sem título nem descrição na parte de Layout, ou adicionando a descrição na parte de configurações do Blogger só.

      Nadaa, obrigada pela visita!

      Excluir
    2. Obrigado por responder. Fiz uma série de testes a acho que agora ficou o melhor que pude fazer. Estou satisfeito agora, suas dicas me ajudaram, depois você da uma olhada. Ganhou mais um seguidor kkk. Abraço e mais uma vez obrigado pela ajuda.

      Excluir
  5. meu blog n tem isso, uso o tema Awesome Inc. Icy... help

    ResponderExcluir

Tecnologia do Blogger.