Blogger

Ocultar la barra Blogger (navbar) automaticamente

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

  1. 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”.
  2. Ahora buscamos el siguiente código:
    body {
  3. 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)
    }
  4. Guardamos y listo.

Funciona bien en Firefox, Opera, Safari e IE7

Deja un comentario

43 Comentarios

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

  • 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

  • […] Fungit Blog and Web Artículos relacionados: Dos primeras plantillas para BloggerImportar los posts del […]

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

  • 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

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

  • […] este artículo en español: Ocultar la barra Blogger (navbar) automaticamente. Design, Header, Intermediate […]

  • Muchas gracias esto era justo lo que necesitaba, la verdad no tengo mucho conocimiento de Html o CSS y esto me salvo la vida.

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

  • 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}*/

  • @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!

  • 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

  • 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

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