dicas blog
Home » , , » Como deixar a imagem do cabeçalho do blog ocupando 100% da pagina

Como deixar a imagem do cabeçalho do blog ocupando 100% da pagina

25
Quer   curte   tem  um   blog   bem  arrumado personalizado,   e  gosta   de    fazer   alterações  avançadas  pode  gostar   dessa  dica . Você  não  sabe do  que  estou  falando.  tratasse  da  imagem que  vai   no  cabeçalho  do  blog  ou  cor  ocupando  todo o  espaço de ponta   a  ponta  dando  como  o  que  uso  aqui   no   blog    uma  cara  mais personalizado   ao  blog,  deixando   mais  elegante  vamos   dizer   assim  isso  não  muito  difícil  de  se  fazer,   mas   temos  que  tomar  cuidado   pois  alguns   blogs   podem  não  ter   o  mesmo  código   então  isso   pode  não  dar   tão  certo.   geralmente   da  para  modelos  do  blog  siga  o  tutorial  abaixo e  deixe   seu  blog  com  a   sua cara .
 
Vá em DESIGN + EDITAR HTML
 Dê um CTRL+F e procure por: body {
 Você irá encontrar algo parecido com  o codigo abaixo:



body { font: $(body.font); color: $(body.text.color); background: $(body.background); }


Apague todo esse código e substitua por esse:


body, html { height: 216px; margin: 0; padding: 0; } body { background: url("imagem do cabeçalho") repeat-x; } html { background: url("imagem da pagina blog") repeat; }


No lugares destacadas, substitua pela a URL do seu background

Imagem do  cabeçalho  devi  ter  medidas: 1324x517
1324 largura 517 altura a altura dela pode ser  alterado a onde   esta escrito  height: 216px; aumentando os  valores aumenta o  tamanho  diminua até  onde preferir

Imagem  da  pagina body pode ter 600x500 já esta  de   bom  tamanho pois ela  ira  repetir 
 
Continuando em  EDITAR HTML, tecle ctrl+f e procure por: .header h1 { Abaixo desta tag (.header h1 {), cole: margin-top: -30px;

Clique em  visualizar e vá  mudando  o valor  do px até seu  cabeçalho  ficar  ajustado na imagem do seu background. 
Dê um ctrl+f novamente e procure por: <div class='content-inner'>
 Abaixo dessa tag cole: <div style='margin-top: 50px;'>
 
para finalizar  tudo de um ctrl+f e procure por: </body>
 Acima desta tag, cole: </div>
 , se estiver  tudo ok,   salve!

25 comentários:

  1. Parabens Ricardo. muito bom o seu blog, muitas dicas, você ensina tudo bem explicado. Muito bom mesmo

    ResponderExcluir
    Respostas
    1. Que bom que tenha gostado Jovinha fico feliz com seu elogio e comentário
      Obrigado pela visita.

      Excluir
  2. Muito bom mesmo, Ricardo, ajudou bastante aqui!

    ResponderExcluir
  3. valeu cara por colaborar com suas ideias!

    ResponderExcluir
  4. ta subestitua pela url da imagem mas a imagem é direta do meu pc como faço ?

    ResponderExcluir
    Respostas
    1. Ola amigo a imagem do seu pc mas você tem que hospedar ela para pegar o código url aqui vai um serviço grátis e do Google procure no Google por (picasaweb) e hospeda La sua imagem, de um clique com o mouse em cima da imagem e copiar o endereço da imagem depões cole o endereço nos locais indicados no tutorial só isso abraço cara.

      Excluir
  5. "margin-top: -30px" Não tá descendo ... O que faço? Está estranho

    ResponderExcluir
    Respostas
    1. Me manda o link do seu blog que vou dar uma analisada e ver o real problema.
      Só o nome do seu blog e o final ex: seublog.blogspot.com sem http//

      Excluir
  6. Veio pq num ta dendo nem pra mim copiar as palavras aki do blog ?

    ResponderExcluir
    Respostas
    1. Veio eu estava com um problema em um script, mais já revolvi isso. desculpe pelo transtorno!

      Excluir
  7. não consegui :( Mas suas dicas são ótimas!

    ResponderExcluir
    Respostas
    1. Ola Yasmin, ele funciona eu acabei de usar em um trabalho!
      Veja aqui:http://www.planetagameboy.com.br/

      Excluir
  8. Muito bom!!! Tudo muito bem explicado!!!
    Será que você poderia me ajudar a deixar a minha foto do cabeçalho abaixo do título e da descrição??? Ela está atrás deles...
    Meu blog é o: www.goularzinha.blogspot.com

    ResponderExcluir
  9. Da O Seguite Erro Não foi possível carregar a visualização do modelo: Erro ao analisar XML, linha 716, coluna 12: The value of attribute "class" associated with an element type "h1" must not contain the '<' character. Ocultar notificação

    ResponderExcluir
  10. Ficou Meio Estranho Da Uma olhada: http://alexandreultradownloads.blogspot.com.br/

    ResponderExcluir
  11. Obrigada!
    Meu template não continha os mesmos dados do post mas com suas dicas consegui encontrar e resolver o problema.
    Ótimo blog!

    ResponderExcluir
  12. O cabeçalho do meu blog ficou em varias imagens pequenas o que eu faço me ajuda

    ResponderExcluir
  13. não deu certo! :( gostei das dicas, mas não funciona para mim! meu blog é oceansweetescape.com.br

    ResponderExcluir
  14. Eu tenho um blog, o sitesparameninas.blogspot.com, que sempre dava problema no html, sempre que eu ia mudar alguma coisa, dava ctrl+f e procurava, mas dava 0 de 0, sempre, sempre. Resolvi fazer outro blog, na mesma conta. Mas o problema continua. Esse blog que eu fiz agora não tem nada, eu só queria testar se o problema era mesmo com o meu blog, mas talvez seja com a minha conta. eu vou fazer outra, mas, se puder, queria tua ajuda pra saber se tem alguma coisa com os dois blogs mesmo. Desde já obg <3
    -Beijocas :*

    ResponderExcluir
  15. Não encontro isso body { font: $(body.font); color: $(body.text.color); background: $(body.background); }

    ResponderExcluir
  16. Obrigada :)) Consegui, vai me ajudar muito com meus trabalhos !
    http://www.omelhordemim.com/

    ResponderExcluir
  17. Obrigada!!! Me ajudou bastante!
    Beijos!

    ResponderExcluir
    Respostas
    1. Ola Giselly, fico feliz que tenha conseguido.

      Excluir