Salirse por la Tangente: Modificar la Navbar de Blogger

Una de las cosas que me pregunté cuando comence a escribir este blog, es como quitar u ocultar la "barra de navegación", o NavBar.

Después de varios intentos fallidos, encontre los códigos para poder realizar lo que al final es una sencilla operación.

- Para eliminar la "barra de navegación", basta con realizar unos sencillos pasos:

Iremos a nuestro blogger y seleccionaremos la pestaña diseño.
Dentro de la pestaña Diseño seleccionaremos la opción “Edición de HTML”.
Posteriormente buscamos la etiqueta <head> (tecleamos Ctrl + F para buscar más rápido).

Justo después añadimos el siguiente código:

 
#navbar-iframe{
height: 0px;
visibility: hidden;
display: none;
}

- Si queremos ocultarla y no borrarla, los pasos a seguir son los siguientes:

Iremos a nuestro blogger y seleccionaremos la pestaña diseño.
Dentro de la pestaña Diseño seleccionaremos la opción “Edición de HTML”.
Posteriormente buscamos la etiqueta body{(tecleamos Ctrl + F para buscar más rápido).

Justo antes añadimos el siguiente código:



#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}

- Si queremos que sea invisible menos cuando pasemos el cursor del ratón por encima:

Iremos a nuestro blogger y seleccionaremos la pestaña diseño.
Dentro de la pestaña Diseño seleccionaremos la opción “Edición de HTML”.
Posteriormente buscamos la etiqueta </head> (tecleamos Ctrl + F para buscar más rápido).

Justo antes añadimos el siguiente código:



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

Nota: si ya hemos instalado previamente alguna vez un código con scriptaculous sólo deberemos copiar esta parte del código anterior:

<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);

Salirse por la Tangente

lunes, 30 de agosto de 2010

Modificar la Navbar de Blogger

No hay comentarios:

Publicar un comentario