Efecto de mostrar/ocultar la Navbar (Barra de Navegación) de Blogger

17 de diciembre de 2014

Para dejar la Navbar (Barra de Navegación) de Blogger y crear un efecto de mostrar/ocultar que se ejecute al pasar el mouse, logrando que la barra aparecerá y al quitarlo desaparecerá.

Para ello debemos ingresar a nuestro blog y luego

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado
pegamos el siguiente estilos css:

#navbar-iframe {
opacity:.0;
filter:alpha(Opacity=0,FinishedOpacity=0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

podemos agregarle color de fondo

#navbar-iframe {
background:#6CD1E7; /* Color de la navbar */
position:absolute;
top:-30px;
height:60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
background:#F06969; /* Color al pasar el cursor */
top:0;
height:30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}