English Português

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

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Shadows of Mind / Hace 10 años /

      genial, funciona perfectamente. lo uso en mi blog shadowsofmind.blogspot.com/

      gracias

      Responder a Shadows of Mind →
    2. Niko / Hace 10 años /

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

      Responder a Niko →
    3. Francisco / Hace 10 años /

      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!

      Responder a Francisco →
    4. Axiarel Sobernek / Hace 10 años /

      me ha funcionado perfectamente, muchas gracias por este pequeño truco

      Responder a Axiarel Sobernek →
    5. kios / Hace 10 años /

      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

      Responder a kios →
    6. kurotashiO! / Hace 10 años /

      Agradecido de vuestro tip!!! Me sirvió bastante para poder ocultar la barrita :D!!!!

      Saludos!

      kurotashiO!

      Responder a kurotashiO! →
    7. adrianiko / Hace 10 años /

      Me ha funcionado correctamente en mi blog, muy fácil, y sencillo.

      Thanks!

      Responder a adrianiko →
    8. goethemola / Hace 10 años /

      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!

      Responder a goethemola →
    9. Lordvader / Hace 9 años /

      Quitada, bueno, mejor dicho, ocultada. Y ahora… ¿Como desplazo el header hacia arriba?

      Responder a Lordvader →
    10. pablo / Hace 9 años /

      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

      Responder a pablo →
    11. orop999 / Hace 9 años /

      buen codigo grasias me funciono

      Responder a orop999 →
    12. oscar Rios / Hace 9 años /

      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.

      Responder a oscar Rios →
    13. acginc / Hace 8 años /

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

      Responder a acginc →
    14. osmur / Hace 8 años /

      Gracias me sirvio mucho

      Responder a osmur →
    15. @memo_alo / Hace 8 años /

      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?

      Responder a @memo_alo →
    16. gervi / Hace 8 años /

      gracias brodeth me funciono te doy un 10

      Responder a gervi →
    17. miguelins / Hace 8 años /

      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.

      Responder a miguelins →
    18. Nemo / Hace 8 años /

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

      Responder a Nemo →
    19. Manel / Hace 8 años /

      Gracias, funcionó perfectamente.

      Responder a Manel →
    20. Rosa / Hace 8 años /

      Muchas gracias. ¡Es fácil y funciona! Me gusta porque queda más limpio el blog.

      Responder a Rosa →
    21. Josae / Hace 7 años /

      Ok, funciona perfecto!!!! Gracias

      Responder a Josae →
    22. Byron / Hace 7 años /

      ME FUNCIONO WOW, ESO QUERIA JAJA GRACIAS POR EL TUTO

      Responder a Byron →
    23. Audón / Hace 7 años /

      gracias por el aporte funciona perfectamente en mi blog

      Responder a Audón →
    24. pilar / Hace 7 años /

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

      Responder a pilar →
    25. pilar / Hace 7 años /

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

      Responder a pilar →
    26. vlad / Hace 7 años /

      Pilar. Gracias por este tutoríal. Ha sido de ayuda.

      Responder a vlad →
    27. ALugiqn / Hace 7 años /

      Gracias, funciona!
      Por cierto, al principio pensaba que no funcionaria,, pero tachan!
      funciono

      Responder a ALugiqn →
    28. YaGrEoR / Hace 7 años /

      No joda, tú si sabes. Gracias por compartir tu conocimiento. xD

      Responder a YaGrEoR →
    29. Roser / Hace 7 años /

      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

      Responder a Roser →
    30. Nati / Hace 7 años /

      Gracias!!!, de nuevo

      Saludos…

      Responder a Nati →
    31. MIGUEL CINTRON / Hace 6 años /

      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

      Responder a MIGUEL CINTRON →
    32. beth / Hace 6 años /

      genialisimo! me funciono !!
      Gracias Franky!

      Responder a beth →
    33. Jackiecarola / Hace 6 años /

      Muchas gracias!!! justo lo que estaba buscando! a mi también me funciona en Chrome.

      Responder a Jackiecarola →
    34. Joyas / Hace 6 años /

      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.

      Responder a Joyas →
    35. A-Te! / Hace 6 años /

      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,

      Responder a A-Te! →
    36. Ezkielnet / Hace 6 años /

      Muchas Gracias por el tutorial. Voy a probarlo 😉

      Responder a Ezkielnet →
    37. Abraham / Hace 6 años /

      Funciona perfectamente gracias!

      Responder a Abraham →
    38. yedi / Hace 5 años /

      Muchas gracias Francisco. Gran ayuda!!

      Un saludo

      Responder a yedi →
    39. Luis Jaramillo / Hace 5 años /

      Amigo Gracias.

      Responder a Luis Jaramillo →
    40. Marcelo / Hace 5 años /

      Muchas gracias, saludos!
      Marcelo

      Responder a Marcelo →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad