Como eliminar, quitar, o ocultar la Barra de Blogger Navbar

Hablamos de  la barra azul que aparece por defecto en blogger, llamada navbar, que afortunadamente se puede quitar y es muy sencillo.

1) Vamos a Diseño
2) Edición HTML
3) Buscamos la siguiente parte del código: <head> (tecleamos Ctrl + F para buscar más rápido)
4) Justo después añadimos el siguiente código:



<style type='text/css'>
#navbar-iframe{
height: 0px;
visibility: hidden;
display: none;
}
</style>





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

1) Vamos a Diseño
2) Edición HTML
3) Buscamos la siguiente parte del código: body{ (tecleamos Ctrl + F para buscar más rápido)
4) 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)
}





Por último, si queremos que sea invisible menos cuando pasemos el cursor del ratón por encima debemos hacer lo siguiente:

1) Vamos a Diseño
2) Edición HTML
3) Buscamos la siguiente parte del código: </head> (tecleamos Ctrl + F para buscar más rápido)
4) Pegamos el siguiente código antes de </head>

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

Comentarios

Entradas populares de este blog

5 alternativas open source a Loquendo

Que es microsoft silverlight