Como colocar efeito hover na navbar - blog


Yoo !
 
Esse é um tutorial bem básico, pra quem ainda quer aprender a fazer o próprio template.

Muitos de vocês já devem saber como ocultar a navbar e fazer ela aparecer quando colocar o mouse por cima e também sabem como retirar o espaço deixado por ela, mas por via das dúvidas é bom trazer.

Por ser muito fácil de fazer, demora-se cerca de 2 - 5 minutos.





1. Vá em Design > Editar HTML e marque a caixinha de "Expandir Modelos de Widget"
 

2. Com o CTRL + F procure por:



]]></b:skin>

 3. Acima dessa tag, cole:
#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;
}

PS: Estão vendo o número 1? Ele determina os segundos de transição. Se você aumentar, vai demorar mais para que o hover termine por completo. 


Esse código abaixo é para quem não quer a sidebar de modo algum, quer que ela desapareça e não deixe espaço. Faça o seguinte:

1. Com o CTRL + F procure por:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

2. Acima desse código cole e depois salve:
<!-- Navbar-->
<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
<!-- Navbar-->

3. Uma aviso dizendo que oWidget Navbar1 vai ser excluido aparecerá, clique em Excluir Widget e pronto (:


 

Nenhum comentário:

Postar um comentário