5 de mar. de 2010

Header ocupando toda a área do cabeçalho do blog


Para que seu cabeçalho seja todo ocupado por uma imagem ou mesmo uma cor de fundo como nesse modelo AQUI, vá até o HTML de seu blog e procure pelo seguinte trecho:
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.




<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='AQUI DEVERÁ TER O NOME DE SEU BLOG' type='Header'/>
</b:section>
</div>


Copie-o e apague .

Agora procure pelo seguinte código:

</head>

Agora cole-o abaixo dele.


Procure então pelo seguite trecho:


#header-wrapper {AQUI TERÁ UM MONTE DE CÓDIGO NO MEIO}


O que você devará fazer com bastante atenção é apagar tudo que estiver dentro das chaves{} e substituir pelo código abaixo.
*Preste atenção pois a chave terá que abrir e fechar o código.





width:100%;background: #808080;margin:-24px 0 0 0; border-bottom: 15px solid #cccccc;

Portanto o código completo ficará assim:

#header-wrapper {width:100%;background: #808080;margin:-24px 0 0 0; border-bottom: 15px solid #cccccc;}


Código na cor azul representa a cor de fundo.
Código na cor amarela representa a cor do linha de baixo.

Elke, a d o r e i, mas vem cá, gostaria de colocar uma imagem...

Ah sim, então o código que você deverá colocar emtre  os colchetes será o código abaixo.

width:100%;background: url(AQUI O ENDEREÇO DE SUA IMAGEM) repeat;margin:-24px 0 0 0; border-bottom: 15px solid #cccccc;

Portanto o código completo ficará assim:
#header-wrapper {width:100%;background: url(AQUI O ENDEREÇO DE SUA IMAGEM) repeat; margin:-24px 0 0 0; border-bottom: 15px solid #cccccc;}

8 comentários:

  1. Olá Elke muito bom este novo post, mas tenho uma dúvida pois não quero mudar o fundo, somente quero que o header fique por toda extensão da página!!!
    E se for parecido o cdg para deixar o footer inteiro também seria bem legal!!
    A proposito não quero mudar o fundo, pois tenho um cdg java que alterna as imagens do fundo da minha página cada vez que o visitante volta esta com uma imagem diferente!!!
    Se quiser te passo o cdg para que vc possa postar aew é bem simples !!!

    Neste site tem exatamente o que queria para meu header e para o footer também http://www.filmeshd.tv/

    Bjão.

    ResponderExcluir
  2. Boa orientação.
    Volto depois para entender melhor.
    Obrigada

    ResponderExcluir
  3. Não consegui. O código de minha HTML é

    id='header-wrapper'>





    portanto, bem diferente do seu. Alterei para ficar exatamente como vc orientou e a figura aparecia duplicada (uma maior, à esquerda e outras menores embaixo e à direita). Fiz tudo como vc orientou, mas, não deu...

    ResponderExcluir
  4. AAAAAAAAAAAAH É LINDO, SÓ QUE NÃO CONSIGO PEGAR :(

    ResponderExcluir
  5. Oi Elke! Seu blog é show! Sempre venho aqui (e virei cada vez mais) pois comecei a montar um novo blog recentemente e suas dicas são d+! Tem como fazer muitas coisas!

    Pena que eu não consegui fazer o que você disse! Primeiro eu consegui excluir o cabeçalho pra por uma imagem no lugar dele. Mas seguindo suas dicas não consegui fazer essa imagem ocupar toda a header... Sempre fica um espaçãããoo em branco :(
    Imagina porque isso pode ter acontecido?

    Abraço e continue com esse blog mara! *_*

    ResponderExcluir
  6. galera colocquei no meu olhem como fiko manero www.zoafc.blogspot.com.br vlw

    ResponderExcluir
  7. Oiii, eu não estou conseguindo achar a tag no meu blog. Como faço?

    ResponderExcluir
    Respostas
    1. eu nao sou a dona do blogger mais vou te ajuda e esse nome aqui /* Header e a mesma coisa que #header-wrapper {

      Excluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube