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:
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.
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
<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>
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>
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.
Y muchos más artículos interesantes si nos sigues en...
Lo estudiaré jeje... Gracias Olofenómeno!! xDD
ResponderEliminarEl código está bien, pero has puesto mal donde se debe colocar Oloman ;-)
ResponderEliminarHas 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.
Exacto Stromboli. Una errata ya corregida. Gracias
ResponderEliminarMira 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¿Usas en ambos el mismo navegador...? Es que no se me ocurre ningún otro motivo para que pase eso.
ResponderEliminarQuizás tengamos que avisar a Iker Jiménez :D
Si utilizo, el mismo navegador: Firefox. He observado que esto ocurre cuando instalo el antivirus (Norton). Pero no entiendo porqué???
ResponderEliminar¡Pfff! Eso ya escapa a mis (pocos) conocimientos. Lo siento pero no tengo la menor idea. Un saludo
ResponderEliminarEn cualquier caso, muchísimas gracias. Me encanta tu blog.
ResponderEliminarPerfecto. De nuevo mil gracias.
ResponderEliminarSaludos.
no lo consigo.. me sale error en la pagina abajo a la izq en la barra deestado, y no desaparece:
ResponderEliminarhttp://tragavientos.blogspot.com
lo e conseguido con mi otro blog ralongboard.com,
ResponderEliminarpero este otro no m funcionan muchos chismes, porq sera??
granblog.
solucionado con Tragavientos.com! era volver a probarlo!
ResponderEliminarenorabuena de nuevo.
Hey..!
ResponderEliminarOlomio, 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.
@Ra, pues nada, me alegro. Supongo que algo copiabas de más o de menos.
ResponderEliminar@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.
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?
ResponderEliminarEl 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.
ResponderEliminarEn 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.
pero no se podría poner la imagen mas arriba y que al salir la barra la pise?
ResponderEliminarPrueba a poner esto en tu código CSS, aunque no lo he probado y no sé si funcionará:
ResponderEliminar#navbar-iframe {
position:absolute;
}
donde lo pongo exactamente, perdona pero aún me pierdo con el html, muchas gracias
ResponderEliminartengo un globo que me esta chivando tu posicion espero que no te moleste, un saludo
ResponderEliminarpor cierto muy bonita tu tierra
ResponderEliminarLa parte CSS es lo que está antes de
ResponderEliminar]]></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
Este comentario ha sido eliminado por el autor.
ResponderEliminarsi que funciona, eres un fiera, gracias
ResponderEliminarahora intentaré bajar el globo para que la barra aparezca en su sitio
pues no es por el globo, la barra al mostrarse no está en el sitio correcto
ResponderEliminarya lo conseguí poniendo
ResponderEliminar#navbar-iframe {
position:absolute;
top:0px;
left:0px;
}
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
ResponderEliminarwww.luz-tic.blogspot.com
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
ResponderEliminary 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
Solucionado, perdona la molestia, había puesto un trozo de código en un lugar equivocado
ResponderEliminarNo 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