Jugando con la NavBar de Blogger

Hace muchos años pocos querían conservar la Navbar, esa barra que está arriba del todo y que nos permite compartir el blog, buscar o acceder a las funciones básicas. El único color disponible que había era el azul así que no a todos les iba bien con el diseño de su plantilla. Hoy la barra de navegación (Navbar) dispone de más colores, y podemos jugar un poco con ella para hacerla ver más dinámica. O si prefieres ocultarla, también te diremos cómo hacerlo.

Ocultar la navbar

Ocultarla es más sencillo que antes, digo eso porque hasta hace poco teníamos que ingresar códigos a la plantilla para poder ocultarla, ahora no.

Si deseas ocultar la navbar ingresa a la sección Diseño, da click en Editar sobre la Navbar (Barra de navegación) y selecciona Desactivado.

Hacer flotante la navbar

Si por el contrario te gusta que se vea la barra de navegación entonces puedes hacerla flotante para que se siga viendo aun cuando bajes el scroll de la página. Para ello entra en la Edición HTML de la plantilla y antes de ]]></b:skin> pega lo siguiente:

#navbar-iframe {
left:0;
top:0;
position:fixed;
}

Si quisieras que la navbar este igual flotante pero en la parte de abajo entonces cambia top:0; por bottom:0;
Con cualquiera de esas dos opciones la barra siempre estará visible aunque se suba o se baje la página.

Aparecer la navbar al pasar el cursor con desvanecimiento

Una buena opción es mantener oculta la navbar y hacer que aparezca sólo si pasamos el cursor arriba del blog, y usando las transiciones haremos que aparezcan con un efecto de desvanecimiento como se aprecia en la imagen.

Para que se vea de esta manera sólo hay que añadir antes de ]]></b:skin> lo siguiente:

#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;
}

Aparecer la navbar al pasar el cursor de arriba a abajo

Una opción similar a la anterior es que la navbar esté oculta y aparezca al pasar el cursor sobre su área pero esta vez aparecerá de arriba a abajo.

Para ese caso el código que hay que añadir antes de ]]></b:skin> es este:

#navbar-iframe {
position:absolute;
top:-30px;
height:60px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
top:0;
height:30px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Cambiar el color de la Navbar

Aunque Blogger nos permite cambiarle el color, sólo nos ofrece 6 opciones de color, los cuales pueden no ser del gusto de todos, sin embargo podemos ponerle el color que queramos y no sólo eso, también podemos hacer que cambie de color al pasar el cursor con un efecto de desvanecimiento.

Para conseguirlo, sigue el paso del primer ejemplo que es para ocultarla, pero en lugar de desactivarla deberás seleccionar Claro transparente. Luego pega antes de ]]></b:skin> estos estilos:

#navbar-iframe {
background:#B40431; /* Color de la navbar */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#navbar-iframe:hover {
background:#000; /* Color de la navbar al pasar el cursor */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}

Ahí verás dónde poner el color que quieras tanto para el estado normal, como el color que tendrá al pasar el cursor.
¿Una imagen? También se puede, en ese caso la línea que especifica el color irá de esta manera:

background:url(URL de la imagen);

Como puedes ver, la navbar puede verse más atractiva si lo deseas y sólo añadiendo un poco de CSS que hasta puedes combinar y conseguir el resultado que quieras.

Quizá haga falta recordar que en el caso de los efectos de desvanecimiento con CSS son transiciones que sólo son soportadas con navegadores modernos, así que en navegadores antiguos (o Internet Explorer) aunque no se verá ese desvanecimiento los demás estilos sí se ejecutarán.