Como fazer uma navbar (Estilo Novo)

229688_255472001138088_164607746891181_1042352_5575470_n_large

Oii amorecos, tudo bom? O tutorial de hoje é sobre como fazer uma navbar com um estilo NOVO, não é bem novo mas é um jeito mais simples e bonito de se fazer ok? Para saber qual o estilo da navbar basta clicar aqui e ver. Então vamos ao tuto...

Vá no html do seu blog e procure(Ctrl + F) por: <body


ABAIXO dessa LINHA que normalmente é essa: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> cole o código a seguir:
<div id="nav-tg"></div>
Agora procure(Ctrl + F) por: ]]></b:skin>


e ACIMA cole o código a seguir:

#nav-tg{
width: 100%;
height: 50px;
background: url('http://static.tumblr.com/4bage8q/97Xlmqw2h/01.png');
border: 1px none #000;
z-index: 100;
position: fixed;
}

Lilás: Altura da navbar
Vermelho: Link do fundo da navbar
Azul: Borda da navbar

Dúvidas? Comentem! Espero que tenham gostado do tuto e até amanhã... Beijos

Comente usando seu facebook!


Comente!

  1. Estava procurando como fazia isso. :x HAHAH
    Adorei, vou ver se da certo. Beijos flor

    http://a-crossthestreet.blogspot.com/

    ResponderExcluir
  2. oooi fofa!
    Adorei o blog!
    Me segue no twitter (te sigo de volta) pq eu preciso falar ctg: @susanstumm

    bjs

    ResponderExcluir
  3. Oi tem um selo para vc lá no meu blog!
    http://garotassuperfashions.blogspot.com/

    ResponderExcluir
  4. Oie! Gostei do seu blog e achei bacana que também conhecesse o meu. Ele engloba bastante coisa, ilustração, música, literatura, moda e coisas que toda mulher adora!
    Se tiver um tempinho passa lá depois e me diz o que achou, se gostar e se identificar, siga, comente ou divulgue que fico muuuuuuuuuito grata, sua opinião vale muito pra mim viu!
    Ahhh lembrando que o blog está com 3 sorteio super legais acontecendo, participa!
    Beijos :D http://www.agirlaplanet.com

    ResponderExcluir
  5. Hoje,foi a primeira vez que entrei no blog e a primeira coisa que noite foi isso.
    Super diferente e inovador, A.D.O.R.E.I!^.^
    Bjão amiga . :*

    www.caprichospace.com

    ResponderExcluir
  6. Nossa amei, meu sonho era saber fazer isso, sério! obrigadaaaa:) haha
    beijooo;*

    http://www.ilovevoogue.blogspot.com/

    ResponderExcluir
  7. Gente, para tudo! Que blog é esse? LINDO *-* Me apaixonei!
    Desculpa por ter retribuído o comentário agora, é que tô ficando sem tempo pra postar por causa de escola, afins. Mas seu blog é tudo! Inovador, criativo, fofo, parabéens! É óbvio que estou seguindo ;)

    Beijãao, Geoô A.

    http://closetteen-ct.blogspot.com

    ResponderExcluir
  8. Nossa. Adorei o tutorial! Bem mais rápido, eu sou tão tola para achar códigos assim, que o meu ficou beeeeem mais extenso. Beijos.

    ResponderExcluir
  9. Ai que tudo. Estava procurando este tutorial *o*
    Muito obrigada mesmo *-*

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  10. se colocar no no lugar de position: fixed colocar moved, ela fica só lá em cima e não desse com a barra de rolagem, pelo menos no meu!
    mas eu retirei a usebar, e fica um espaço que não consigo tirar(mesmo sem modifica-la como fiz) entre o topo e a nova barra, que seria preenchido pela usebar se ela estivesse lá.
    o que faço?
    PS.: responde aqui porque meu blog está em reforma!
    kissus

    ResponderExcluir
  11. Flor, você tirou a navbar? Ou deixou? Tenta colocar:

    #nav-tg{
    display:none;
    }

    ResponderExcluir
  12. amor eu amei o tutorial mais to com um probleminha, conforme a barrar de rolagem desse, a navbar tbm desse '-'

    ResponderExcluir
  13. OIIi!!!!Mes egue??to divulgando meu blog e ficaria muito feliz se vc entrassse no meu blog e me seguisse!!!Tbm queria te pedir que faça um tuto de como colocar barrinhas entre as postagens(se ja tiver feito foi maus)beijoks
    www.osonhodamoda.blogspot.com

    ResponderExcluir