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