Efectos para la Navbar de Blogger

Había visto esto implementado en algunos blogs pero nunca se me ocurrió averiguar de que se trataba. Gem@ lo hizo y la respuesta la muestra en su blog así que simplemente, paso a transcribirla.

Este truco hará que la Navbar aparezca y desaparezca gradualmente cuando acercamos el puntero del ratón.

Para implementarlo, basta agregar el script en la plantilla. Vamos a DISEÑO / EDICION HTML y justo antes de </head>; añadimos lo siguiente:

<script src='http://www.google.com/jsapi'/><script>
  google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
  google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>

<script type="text/javascript">
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window, 'load', navbarHack, false);
</script>

Como prototype y scriptaculous son scripts muy utilizados por muchos efectos, conviene verificar si ya no las tenemos incluidas; de ser así, no debemos volver a hacerlo y sólo es necesario agregar la última parte.

El truco es parte de una serie de posts publicados en hodavame, que, bajo el título de Jugando con la Navbar, muestra algunas posibilidades conocidas y desconocidas.

Otra alternativa que desarrollan es la hacerla semi-traslúcida, controlando su opacidad, de tal modo, se pueden obtener combinaciones de color más adecuados al estilo de cada blog.

Nuevamente, vamos a DISEÑO / EDICION HTML y justo antes de </head>; añadimos lo siguiente:

<style type="text/css">
#navbar {
filter: alpha(opacity=50);
  opacity: .5;
  -moz-opacity: 0.5;
}<style<g;

Por último, también es posible ocultar la Navbar automáticamente según sea la posición del puntero del mouse. El efecto, mantiene oculta la barra y la muestra cuando se coloca el mouse en la parte superior de la pagina.

<style type="text/css">
#navbar-iframe {
  opacity: 0.0;
  filter: alpha(Opacity=0)
}
#navbar-iframe:hover {
  opacity: 1.0;
  filter: alpha(Opacity=100,FinishedOpacity=100)
}
</style>