Como fazer cabeçalho ocupar toda a largura do blog!

21 janeiro 2014




Oi gente, hoje vou ensinar pra vocês como fazer o cabeçalho ocupar toda a largura do blog, não vou dizer que é simples, mas também não é tão dificil... bem, existem duas maneiras de ajustar o cabeçalho com todo o blog, sem um plano de fundo e com um plano de fundo eu usei a primeira porque não tive muita paciência, e ainda sim o meu cabeçalho não ficou beem do jeito que eu queria mas deu pro gasto rs, vamos lá...

Opção 1. sem o plano de fundo:
Primeiramente tem que ter o seu cabeçalho pronto e um cabeçalho transparente, sem brush, sem nada. depois vá em modelo > Layout > cabeçalho (onde tem o nome do seu blog) > editar e carregue a imagem transparente.
Depois vá em modelo > personalizar > plano de fundo > e carregue o seu cabeçalho (normal, com brush etc) Não esqueça de marcar a opção "NÃO DIVIDIR EM BLOCOS" quando a sua imagem carregar.

ATENÇÃO: seu cabeçalho não pode ter mais que 300 kb, se tiver vai aparecer uma mensagem dizendo que o arquivo é muito grande, por isso quando você estiver fazendo o seu cabeçalho preste atenção no tamanho da foto das ilustraçoes se voce for usar é claro, escolha imagens com poucos kb! e sempre redimensione o seu cabeçalho! no meu eu usei 1444 de largura! mas isso depende do seu layout, você vai ter que procurar uma largura que ajuste perfeitamente com o resto do blog, ( foi nessa parte que me faltou a paciência heuheu )

Opção 2. com um plano de fundo:
 Vá em modelo > Editar HTML clique dentro da caixa do html primeiro agora aperte Ctrl+f e vai abrir uma caixinha de pesquisa em cima, na caixinha cole o seguinte codigo >  font: $(body.font);  ou esse >  body {  
pronto depois de ter pesquisado você vai encontrar o codigo abaixo >  

body {
font: $(body.font);

color: $(body.text.color);

background: $(body.background);

}

Apague o codigo acima e substitua por este:


body, html {
height: 400px;

margin: 0;

padding: 0; }

body {

background: url("URL do cabeçalho") no-repeat; }
html {
background: url("URL do background") repeat; }



Onde está escrito "URL do cabeçalho" troque por a url (endereço) do seu cabeçalho, que tem que está hospedado na internet.

Onde está escrito "URL do background" troque por a url do background que você vai usar! 



                                             Então é isso galera espero que tenham gostado do tutorial, beijos :3



12 comentários :

  1. Respostas
    1. Izabelly você tem que ir redimensionando a imagem no photoscape de preferencia, e vai salvando no html, até ficar do tamanho certo, e altura você ajusta aonde tem height: 400px; de acordo com a sua imagem de cabeçalho, porque não tem como eu falar uma largura e altura certa pro se cabeçalho, pois todos os layouts tem larguras e alturas diferentes qualquer coisa me chama no fb que eu te explico melhor :3 https://www.facebook.com/dara.naoki

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Hello, jovem!

    Deixando meu agradecimento... sério mesmo: seu tuto super me ajudou. ^_^

    bjux

    ~ Illana Beatriz ♡
    http://goingto25.blogspot.com.br/

    ResponderExcluir
  4. tem certeza q isso funciona? Aqui no meu monitor o seu cabecalho vai ate a metade soh...

    ResponderExcluir
    Respostas
    1. metade eh exagero, mas seu cabecalho nao ocupa a pagina toda na minha tela.

      Excluir
    2. funciona sim! é porque tem que ficar ajustando a largura e altura e vendo como ta ficando até achar uma largura certa que fique na mesma largura do blog, e isso dá muito trabalho, ae eu deixe assim msm kkk, mas daqui uns dias vou mudar meu layout msm *-*

      Excluir
  5. Me ajudou muito adorei, e conssegui, so que a imagem do cabeçalho nao ficou no meio, mas amei

    ResponderExcluir
    Respostas
    1. que bom Isabella, *-* continuem acompanhando o blog, que vai ter varios tutos legais para vcs *-*

      Excluir
  6. Só tem um problema, como faz imagem transparente? Eu não sei.

    ResponderExcluir

 
Design e programação: Letícia Persi | Ilustração da header: Akeno Kurokawa Ilustrações | Todos os direitos reservados - Copyright © 2015 | VOLTAR AO TOPO