14May
Ocultar la barra Blogger (navbar) automaticamente
Francisco / Publicado hace 1727 días / 40 ComentariosEn el artículo “Quitar la barra Blogger” te mostramos como ocultar esta famosa barra permanentemente, pero si quieres conservala y que no estorbe en tu diseño, una mejor solución puede ser que se oculte automaticamente, es decir, que sólo se muestre cuando el cursor pase por el lugar donde se encuentra normalmente.
Una forma de hacer esto es la siguiente:
- Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.
- Ahora buscamos el siguiente código:
body { - Y de acuerdo a tu versión de Blogger, justo arriba de este código, ponemos el siguiente:Nuevo Blogger
#navbar-iframe { opacity:0.0; filter:alpha(Opacity=0) } #navbar-iframe:hover { opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100) }Blogger Clásico
#b-navbar { opacity:0.0; filter:alpha(Opacity=0) } #b-navbar:hover { opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100) } - Guardamos y listo.
Funciona bien en Firefox, Opera, Safari e IE7
genial, funciona perfectamente. lo uso en mi blog shadowsofmind.blogspot.com/
gracias
Lo he probado en mi blog ya que la opción de quitar la navbar no me gustaba, hacia mas incomodo entrar a hacer nuevas entradas y tal…
http://realmadrid07.blogspot.com/
el caso es que ahora se me queda un trozo blanco, cuando cambie eso subi de nuevo la imagen con mas tamaño pensando que se quedaría bien.. pero no, qué puedo hacer para ocupar ese trozo por la imagen??
Que tal niko?
Por alguna razón, algunas plantillas de blogger dejan ese espacio, yo mismo tube ese problema con una y no puede encontrar el error, es una de las razones por lo que en las plantillas que adapto no coloco la navbar. Lamento no poder darte una solución. Un saludos!
me ha funcionado perfectamente, muchas gracias por este pequeño truco
Hola te hago una consulta,yo tengo esta plantilla “Plantilla Blogy-Azul” la baje de aca ,pero al poner el código me corre la imagen de la cabecera hacia abajo y queda un pedazo mas arriba y otro mas abajo se entiende?,tenes idea que puede ser ya que no le encuentro la vuelta
Agradecido de vuestro tip!!! Me sirvió bastante para poder ocultar la barrita
!!!!
Saludos!
kurotashiO!
Me ha funcionado correctamente en mi blog, muy fácil, y sencillo.
Thanks!
Buenas!
Tengo un problemilla con la navbar, aunque soy consciente que no es culpa de vuestro código, sino mío. La cuestión es que acabo de cambiar de plantilla, y no lo graba hacer que apareciera una imagen de cabecera, por lo que toqueteando en l aplantilla al final lo lgr-e. Pero ahora me encuento con que:
1) la navbar no queda en lo alto, sino justo por debajo del logo de cabecera.
2) Cuando pasas el ratón no se ve la barra a través de la imagen de cabecera, pero sí a través del resto.
¿Alguna solución antews de que toque algo más y mi PC explote o algo? Mi blog es el siguiente: http://sinpelosenlalengua-cine.blogspot.com/
Gracias!
Quitada, bueno, mejor dicho, ocultada. Y ahora… ¿Como desplazo el header hacia arriba?
Hola, tengo un problema con esto de la navbar. Tengo una plantilla de blog&web y no me resulta esto de ocultar automáticamente la navbar.
No sé pq, pues cuando le pongo el código me desconfigura todo el blog :S
bueno eso salu2
de antemano gracias
buen codigo grasias me funciono
y para mostrar la nav bar? hay unas plantillas que no la tienen y yo quisiera saber como ponerla, y tambien el icono de mostrar edicion rapida…
espero me puedan contestar.
Muchas gracias esto era justo lo que necesitaba, la verdad no tengo mucho conocimiento de Html o CSS y esto me salvo la vida.
Gracias me sirvio mucho
Hola, primero muy interesante el post, solo una pregunta no es ilegal esto de ocultar o quitar la barra, ya me e chutado todos los terminos y condiciones pero no entiendo bien si se puede o no hacer esto, digamos si es legal?
gracias brodeth me funciono te doy un 10
Mi problema es que no me aparece la ‘navbar’ en el blog, me imagino que será por la plantilla que uso. Me podrías explicar como hago para que aparezca la barra y así ponerla en modo oculto.
Saludos,
PD: Muy bueno el blog, me está sirviendo de mucha ayuda.
miguelins, para que te aparezca la navbar vete a Diseño, Editor de HTML, busca la expresión navbar-iframe y coméntala:
/* #navbar-iframe {height:0px;visibility:hidden;display:none}*/
Gracias, funcionó perfectamente.
Muchas gracias. ¡Es fácil y funciona! Me gusta porque queda más limpio el blog.
Ok, funciona perfecto!!!! Gracias
ME FUNCIONO WOW, ESO QUERIA JAJA GRACIAS POR EL TUTO
gracias por el aporte funciona perfectamente en mi blog
@Niko:
Hola NIko, al verme con el mismo problema que tú hice unas prubas y ¡listo!
Para quitar ese espacio tienes que entrar en la plantilla y localizar lo siguiente:
#header-wrapper {
width:960px;
margin:-30px auto 0px;
border:5px solid $bordercolor;
}
lo que te quita el espacio es darle un valor negativo al margen, en mi caso -30px.
Prueba hasta que consigas el espacio que quieres.
¡Suerte!
@Lordvader:
A ti te digo lo mismo , tienes que darle un valor negativo al margen del header. Localiza en la plantilla lo siguiente
#header-wrapper {
width:960px;
margin:-30px auto 0px;
border:5px solid $bordercolor;
}
y sustituye el -30 por el valor negativo que a ti te vaya bien.
¡Suerte a ti tambien!
Pilar. Gracias por este tutoríal. Ha sido de ayuda.
Gracias, funciona!
Por cierto, al principio pensaba que no funcionaria,, pero tachan!
funciono
No joda, tú si sabes. Gracias por compartir tu conocimiento. xD
Hola, gracias por tus explicaciones, me gustaria hacer un cambio en mi blog, estoy modificando la plantilla un poquito y me preguntaba si puedes orientarme de como poner tres post-fotos en cada hilera en mi página principal, como puedes ver solo hay dos.
Puedo mandarte el documento html, por mail.
Gracias eres un crack!
Roser
Gracias!!!, de nuevo
Saludos…
Ahora si mi blog luce como una pagina WEB gracias por el tips super facil y hace lucir mejor mi site sin tener que pagar hosting, para que se les haga mas facil busquen la pala content y debajo veran body{
es mas o menos como a un 10% bajando el html de su pagina blog.
super facil.
pacen y vean mi pagina como se ve sin el navbar.
Miguel
genialisimo! me funciono !!
Gracias Franky!
Muchas gracias!!! justo lo que estaba buscando! a mi también me funciona en Chrome.
Lo voy a probar a ver que tal queda en mi blog de joyas.
Yo entro vía el escritorio, o sea directamente en mi cuenta y no via el blog, esta barra me quita un espacio que es util.
Gracias por el truco.
Lo que a mí me gustaría saber es, después de quitar la navbar, como puedo poner los botones de compartir y de RSS en ese mismo lugar.
No lo encuentro por ningún lado!!!
Gracias y un saludo,
Muchas Gracias por el tutorial. Voy a probarlo
Funciona perfectamente gracias!