31/07/2012

Tutorial: Navbar Hover (Ocultando)

||

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. Demostração aqui, 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.

/* ----- 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

#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.

#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:

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram