Navbar escamoteable | Oloblogger Este truquillo es antiguo, pero por la pregunta de un lector, me he dado cuenta de que no lo tenía publicado. Se trata de ocultar la navbar ...

11 de noviembre de 2008

Navbar escamoteable

Este truquillo es antiguo, pero por la pregunta de un lector, me he dado cuenta de que no lo tenía publicado. Se trata de ocultar la navbar -la barra superior de todos los blogs Blogger-, pero sin hacerla desaparecer. Sencillamente, se "esconde" al cargar el blog y al pasar el puntero por la zona dónde debería estar, aparece de nuevo.


El efecto se consigue con scriptaculous, por lo cual es imprescindible tenerlo previamente instalado. Si no lo teneis, aquí podeis ver cómo hacerlo. Una vez comprobado esto, sólo hay que insertar justo antes del <head> </head> el siguiente código:

<script type='text/javascript'>
function navbarShow() {
new Effect.Opacity(&#39;navbar-iframe&#39;, {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity(&#39;navbar-iframe&#39;, {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe(&#39;navbar-iframe&#39;, &#39;mouseover&#39;, navbarShow, false); Event.observe(&#39;navbar-iframe&#39;, &#39;mouseout&#39;, navbarHide, false); navbarHide();
}
Event.observe(window, &#39;load&#39;, navbarHack, false);
</script>

Como podreis comprobar actualmente en este otro blog, la barra sale poco a poco con un efecto muy elegante, que va desde la transparencia hasta la opacidad total.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

30 comentarios :

  1. Lo estudiaré jeje... Gracias Olofenómeno!! xDD

    ResponderEliminar
  2. El código está bien, pero has puesto mal donde se debe colocar Oloman ;-)

    Has puesto poner antes del Head y no es ahí, si no en el Head cerrado ( /head ), es decir, que te comiste la barra invertida.

    No pongo los >< porque me da error y no me deja enviar el comentario jeje.

    Me ha quedado bien jeje http://blogcastillosenelaire21.blogspot.com/

    Por cierto Oloman, soy el Sr. Stromboli, pero con mi otra cuenta, xD.

    ResponderEliminar
  3. Exacto Stromboli. Una errata ya corregida. Gracias

    ResponderEliminar
  4. Mira te consulto esto porque no sé porque es, si utilizo un ordenador puedo ver el icono de acceso rápido ("la llave y el destornillador cruzado") o el lápiz de acceso rápido a las entradas. Sin embargo, si utilizo otro ordenador que hay en casa no puedo ver ninguno de estos iconos.En ambos entro al blog a través de mi login y por tanto debería ver estos iconos ¿Cómo puedo solucionar esto? Un saludo, me encanta tu blog.

    ResponderEliminar
  5. ¿Usas en ambos el mismo navegador...? Es que no se me ocurre ningún otro motivo para que pase eso.

    Quizás tengamos que avisar a Iker Jiménez :D

    ResponderEliminar
  6. Si utilizo, el mismo navegador: Firefox. He observado que esto ocurre cuando instalo el antivirus (Norton). Pero no entiendo porqué???

    ResponderEliminar
  7. ¡Pfff! Eso ya escapa a mis (pocos) conocimientos. Lo siento pero no tengo la menor idea. Un saludo

    ResponderEliminar
  8. En cualquier caso, muchísimas gracias. Me encanta tu blog.

    ResponderEliminar
  9. Perfecto. De nuevo mil gracias.

    Saludos.

    ResponderEliminar
  10. no lo consigo.. me sale error en la pagina abajo a la izq en la barra deestado, y no desaparece:
    http://tragavientos.blogspot.com

    ResponderEliminar
  11. lo e conseguido con mi otro blog ralongboard.com,
    pero este otro no m funcionan muchos chismes, porq sera??

    granblog.

    ResponderEliminar
  12. solucionado con Tragavientos.com! era volver a probarlo!

    enorabuena de nuevo.

    ResponderEliminar
  13. Anónimo7/9/09, 2:05

    Hey..!
    Olomio, no se si falta por ahi algo,o sera que talvez le sobre lo que le falta, pero codigo que pusiste alla arribita simplemente -no quiere- es que se amacha y noy ningun efecto con el jodido puntero, jeje...
    hechame un gritillo o lo que tu quieras pa/ saber que rollo con este pu nto.

    Muchas gracias las del payaso:)
    Un beso:-)te.

    ResponderEliminar
  14. @Ra, pues nada, me alegro. Supongo que algo copiabas de más o de menos.

    @Anonimo. Primero instala SCRIPTACULOUS y PROTOTYPE (si no lo tienes ya) y luego copia y pega el código dónde se indica. Si una vez que tienes ambas cosas no funciona, comprueba que no tienes algo tipo...

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

    ...porque si es así, el DISPLAY:NONE; hace que la barra no se vea en ningún caso. Tendrías que quitarlo.

    ResponderEliminar
  15. Hola de nuevo, he ocultado la barra, me sale bien pero, cuando no se muestra la barra me deja un espacio en blanco por encima de la cabecera, porque?

    ResponderEliminar
  16. El truco simplemente hace transparente la barra, pero no hace que desaparezca el espacio que ocupaba. Si fuera así, todo el blog se desplazaría molestamente arriba y abajo al tocar la barra y volverla a tocar.
    En tu caso, quizás se arregle algo haciéndole a la cabecera un borde gris por su parte superior del mismo ancho y color que los laterales. Otra manera sería cambiar el fondo principal en la parte central, la que ahora sale en blanco.

    ResponderEliminar
  17. pero no se podría poner la imagen mas arriba y que al salir la barra la pise?

    ResponderEliminar
  18. Prueba a poner esto en tu código CSS, aunque no lo he probado y no sé si funcionará:
    #navbar-iframe {
    position:absolute;
    }

    ResponderEliminar
  19. donde lo pongo exactamente, perdona pero aún me pierdo con el html, muchas gracias

    ResponderEliminar
  20. tengo un globo que me esta chivando tu posicion espero que no te moleste, un saludo

    ResponderEliminar
  21. por cierto muy bonita tu tierra

    ResponderEliminar
  22. La parte CSS es lo que está antes de
    ]]></b:skin>. Echa un vistazo a un post que se llama CSS y HTML.

    Lo acabo de probar y parece que funciona. Para que no molesten mientras son visibles, casi mejor coger uno de los nuevos modelos de NAVBAR semitransparentes.

    Y no cojo lo del globo... Mi posición es pública: Cartagena

    ResponderEliminar
  23. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  24. si que funciona, eres un fiera, gracias
    ahora intentaré bajar el globo para que la barra aparezca en su sitio

    ResponderEliminar
  25. pues no es por el globo, la barra al mostrarse no está en el sitio correcto

    ResponderEliminar
  26. ya lo conseguí poniendo


    #navbar-iframe {

    position:absolute;

    top:0px;

    left:0px;

    }


    ResponderEliminar
  27. Lo tenía puesto en el blog y la verdad por más que repaso el código no sé que he hecho, me podrías ayudar, gracias
    www.luz-tic.blogspot.com

    ResponderEliminar
  28. Lo unico que he intentado hacer es poner un indice como indica http://www.pazosblogger.com/2010/07/poner-indice-en-blogger-con-efecto.html
    y al no funcionar probé con este
    http://www.pazosblogger.com/2010/07/nuevo-estilo-de-indice-para-blogger.html
    pero al eliminar la entrada la barra no se oculta, te agradezco la ayuda

    ResponderEliminar
  29. Solucionado, perdona la molestia, había puesto un trozo de código en un lugar equivocado

    ResponderEliminar
  30. No hay nada que perdonar Luz. Al igual que en tu anterior consulta en otro post, tú te lo guisas, tú te lo comes :D

    ResponderEliminar