31/07/2012

Navbar com efeito Hover / Mostra e Oculta


Hayo!!! Bem tem alguns tutoriais que mostra como remover a  Navbar,  mas tem pessoas que gostam dela mais não quer que fique aparecendo.  Então irei mostrar como oculta-la ok? E quando passar o mouse ela aparecer. Basta apenas passar o mouse lá no topo.


Primeiro passo é ir em:
Design >> Editar HTML (Antiga interface)
Modelo >> Editar HTML >> Prosseguir (Nova interface)
Então use o atalho Ctrl+F
 
Então você procure pela tag chamada ]]></b:skin>
Logo após achar cole o seguinte código a cima dela.

Códigos
/* ----- Efeito de esconder e mostrar a navbar ----- */
 #navbar-iframe {
 opacity:0;
 -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
 -o-transition: all 1s ease;
transition: all 1s ease;
}
#navbar-iframe:hover {
 opacity:1;
}


Agora irei mostrar como retirar o espaço que ficar.
Ainda usando o atalho procure por essa frase /* Variable definitions
e bem a cima dela cole o codigo a baixo

Códigos
#navbar-iframe {
 } body .navbar
 {
height:0px; }
 .content-outer
{
margin-top:0px; }


Mas se quiser remove la definitivamente! E o espaço também e só procurar por   /* Variable definitions  e colar o código a baixo em cima dela.

Códigos
#navbar-iframe {
display: none !important;
}
body .navbar
 { height:0px;
}
.content-outer {
margin-top:0px;
}

Se usar a ultima opção Não use a primeira etapa apenas essa. Espero que tenham gostado até a próxima kiss

4 comentários:

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345