9 de ago. de 2011

Barra no topo (imagem)

Depois de muitos pedidos de como colocar essa barrinha no topo, enfim vou postar para vocês. O código que eu uso aqui no blog pertence ao blog Menina Nerd, da Andreza (portanto os créditos são para ela!). Primeiramente proucure pela tag: body { e apague todo o código que o acompanhe, como no exemplo do MN:
body {
background: url("http://www.backgroundlabs.com/backgrounds/202.gif") repeat;
margin:0;
color:#333333;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Substitua tudo o que acompanhe a tag body { pelo código abaixo:
body, html {
height: 50px;
margin: 0;
padding: 0; }

body {
background: url("URL da barra") repeat-x; }

html {
background: url("URL do background de fundo") repeat; }
Troque aonde está escrito "URL do background de fundo" pelo url da sua imagem de fundo. Agora salve a imagem abaixo e edite a seu gosto. Esta cortininha pertence ao I love HTML.


OBS: Caso fazer uma barrinha maior que 50px de altura modifique o numero que está em vermelho no código. Ele fica atrás da navbar e do cabeçalho com fundo colorido, ou seja para aparecer bem é necessário retirar a navbar e colocar o fundo do cabeçalho na cor "transparent". Lembrando: O código é do blog Menina Nerd. Bom espero que tenham gostado do tutorial. Não testei no Internet Explorer pois não estou conseguindo abrir, mas creio eu que funcione.
Beijos, 
Emily

22 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. No meu blog fiz a mesma coisa rsrs
    Mas não conseguir deixar a barra realmente fixa como aqui no EPF >.<
    1bj♥

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  3. Muito bom o tutorial mas eu já tinha testado, rsrs Beijos!

    http://trasshygirl.blogspot.com

    ResponderExcluir
  4. Oiii fofa tem selinho para vc la no meu blog!!!!beijinhos seguindo retribui?
    http://sweetdreamsoficial.blogspot.com/

    ResponderExcluir
  5. Ótimo tutorial, adorei!
    Vou com certeza usar em um dos layouts do mnq!

    Beijos!
    http://meianoiteequinze.blogspot.com

    ResponderExcluir
  6. Ótimo post o/
    Amei seu blog seguindo kerida!
    Kiss ♥

    http://fanideisi.blogspot.com

    ResponderExcluir
  7. Obrigada por esse tutorial, no Google os resultados ensinavam a fazer isso só no Tumblr.

    http://viihs-place.blogspot.com/

    ResponderExcluir
  8. Ah sim, vou linkar vcs hj mesmo!
    Kissus

    ResponderExcluir
  9. Adorei!To usando no meu,aceita parceria com meu blog lovelytutoriais.blogspot.com ?
    Beijos :*

    ResponderExcluir
  10. Adorei, acho que vou colocar no meu blog... Emily, faz um tutorial de como colocar paginação no blog? Beeeijo

    ResponderExcluir
  11. Olá , adorei o tutorial , embora já o conhecesse do M.N.
    Estou seguindo, faz o mesmo ?
    http://meninasantenadas-revista.blogspot.com/

    ResponderExcluir
  12. Mas como deixa ela rolar com a página, e ficar assim no topo quando desce um pouco a página?

    ResponderExcluir
  13. efeito over na imagem da post:
    http://carol-and-teens.blogspot.com/

    ResponderExcluir
  14. efeito over na imagem da post:
    http://carol-and-teens.blogspot.com/

    ResponderExcluir
  15. Adorei aqui, os tutoriais são ótimos! Poderia fazer um tutorial de como personalizar a barra de rolagem, pra deixar colorida? Já tentei em vários blogs, mas não consegui :(

    Aceita parceria? www.conselhosdostardoll.blogspot.com

    ResponderExcluir
  16. Não consegui e já tentei de tudo, help :( Já estou seguindo muito lindo aqui, tenho certeza que vai fazer muito sucesso ;D
    http://meninasapeca-ms.blogspot.com/

    ResponderExcluir
  17. Tipo, em baixo do post não tem escrito COMENTÁRIOS? então, ele está sublinhado de cinza, como você faz para que fique daquele jeito?

    Besos,

    http://paraisodemenina.blogspot.com/

    ResponderExcluir
  18. Mega feliz por você ter comentado lá!Assim:
    Eu uso o modelo viajem, mas mesmo assim tenho plena noção que os códigos não são iguais, ou seja no meu blog pode ser um e no blog de outra pessoa pode ser outro!
    Não vi nenhum código em baixo de body { por isso acrescentei o código abaixo só que a barra se repetiu pela página toda!
    http://meninasapeca-ms.blogspot.com/

    ResponderExcluir
  19. HOY *_*
    Seeeu Blog é tudo de bom. Já ta nos favoritos. Vou seguir, jájá!!
    Bom estou modificando o templante, do meu blog e quero saber sobre este Tutorial. Tenho uma dúvida, eu li e reli. Mas não entendi que URl eu coloco onde está escrito o seguinte no 2º Código: " URL da Barra ". Qual é está url que pede !

    Você poderia me responder !! Ficarei grata #
    Beijinhos

    chicretiililas.blogspot.com

    ResponderExcluir
  20. Eu queria aprender a colocar essa barrinha em baixo, no final do blog, alguém me entende? se alguém me entender, me ajuda?
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  21. bom de maiss seu blog todas dicas de mais esta de parabéns sou menino e me ajudou muito vou dar os seus devidos

    créditos no meu bloggggg

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.