14 ene. 2011

Cómo ocultar la barra de navegación de Blogger (navbar)



Por defecto, en nuestro blog, aparece una barra de navegación que permite al usuario avanzar o retroceder a otro blog, acceder directamente al panel de control y buscar en blogs. Realmente, esto no aporta nada al nuestro, ocupa un espació y en este post veremos cómo ocultarlo.

Este elemento no puede configurarse desde las opciones de interface de Blogger por lo que tenemos que editar la plantilla HTML.
Barra de navegación de Blogger
Pasos para quitar la barra de navegación de Blogger
Como siempre que tocamos la plantilla HTML te recomiendo copia de seguridad antes. Sigue estos sencillos pasos:
  1. Accede a la pestaña Plantilla y haz clic en el botón Crear copia de seguridad/Reestablecer
  2. Una vez hayas creado tu copia de seguiridad, presiona el botón Edición de HTML
  3. Busca Ctrl F o Ctrl B (en Mac en Mac ⌘F o ⌘B) y busca  Body { 
  4. Justo encima pega el siguiente código:
    #navbar {display: none !important;}
  5. Guarda la plantilla y visualiza tu blog
Si bien ocultar esta barra no atenta contra las condiciones de uso de blogger, ni afecta al posicionamiento del mismo, se pide en algunos foros tener la deferencia de colocar el logo de Blogger (es un gadget y puede añadirlo a través de la Pstaña Diseño->Agregar Gadget->Logotipo de Blogger)

Como siempre, te invito a utilizar los comentarios para dejar tu opinión en este artículo. Si te ha gustado esta publicación y no quieres perderte ninguna otra, sígueme a través de Facebook, Twitter, suscripción por email, Google Friend , RSS ahora también en Google +. Usa los botones sociales al pié de la publicación para recomendarla a tus amigos. ¡Gracias! ;-) 

Actualizado el 03 de Febrero de 2012

51 comentarios:

  1. ¡Listo!
    Muchas gracias por tus consejos.

    ResponderEliminar
  2. Muchas gracias, una gran ayuda.

    ResponderEliminar
  3. Gracias Carlos por tu comentario...me encanta ver gente nueva por este humilde blog.

    Un fuerte abrazo.

    Saludos,
    Jesús

    ResponderEliminar
  4. Antes de ocultar la barra de navegación me queda una duda que no he visto en el turorial; ¿cómo se accede después a la página de diseño, etc.? No quiero ocultarla y que luego no sepa como entrar.

    Muchas gracias.

    ResponderEliminar
  5. Hola Damián,

    Para acceder a blogger solo tienes que poner blogger.com en la barra de navegación de tu explorador o bien crearte un acceso en favoritos.

    En cualquier caso el código donde pone "none" pon "block" y puedes volver a mostrarla.

    ¡Mucha suerte!

    ResponderEliminar
  6. Muchas gracias Jesús. Hecho. Es una suerte tenerte ahí para todas estas dudas.
    Un cordial saludo

    ResponderEliminar
    Respuestas
    1. Gracias j.Damián por tu comentario, me alegra que te haya servido.
      Jesús González

      Eliminar
  7. Por fin una explicación clara. Gracias.

    ResponderEliminar
    Respuestas
    1. Gracias a ti por tu comentario. Recuerda que en los contenidos de esta blog encontrarás un índice con todos los temas publicados.

      ¡Mucha suerte!
      Jesús González

      Eliminar
  8. Respuestas
    1. Gracias José un fuerte abrazo y mucha suerte con tu blog
      Jesús González.

      Eliminar
  9. ¿como editarlo luego, si no aparece la barra de navegación?

    ResponderEliminar
    Respuestas
    1. solo tienes que acceder a Blogger...poniendo blogger.com en la barra de dirección del navegador o bien y es lo que te recomiendo que uses una extensión para Chrome con acceso directo a cualquiera de los servicios de Google, como Gmail, Blogger, Analytics, etc. para ello mira este otro post: 5 Extensiones para ser más productivo. http://www.iniciablog.com/2011/09/google-chrome-productividad-blogger.html

      Gracias por tu comentario!
      Jesús González

      Eliminar
  10. Hola Jesús,

    A mi no me funciona, me sale el siguiente error: bX-84zs69 sabes a que se puede deber?

    Saludos y gracias. Tu blog es genial. Me parece que tiraré mucho de aquí :-)


    Alex

    ResponderEliminar
    Respuestas
    1. Qué raro Alex :(

      En principio lo único que estas haciendo es personalizar tu html. Por favor vuelve a intetarlo nuevamente no vaya a ser que justo en ese momento hubiera algún problema en Blogger.

      Gracias y me quedo a la espera de tus noticias.

      Jesús González.

      Eliminar
    2. Hola Jesús,

      Gracias por tu respuesta, pero es posible que tenga que ver con la nueva versión de blogger?.

      En resumen lo que hago es ubicar los dos sitios donde está la expresión BODY {, luego la bajo una línea y en esa NUEVA LÍNEA que queda libre pongo el código que mencionas, pero caundo intento guardar me sale el error.

      A ver si me puedes corregir el proceso.

      Gracias tu genial ayuda :-)

      Eliminar
    3. Hola Alex,

      Te he respondido con un comentario directo en tu blog, aprovecho para felicitarte también por el mismo.

      Ya me comentas.

      Eliminar
  11. Angel Medina11/5/12 11:34

    Muchas gracias,amigo, por tus molestias. He seguido tus pasos y no oculta nada. ¿Me podrias sugerir alguna idea? Gracias de nuevo.

    ResponderEliminar
    Respuestas
    1. Hola Angel,
      Por favor prueba a seguir nuevamente los pasos pero en lugar de poner
      #navbar {display: none !important;}
      pon

      #navbar-iframe {display: none !important;}

      Coméntame

      Eliminar
  12. Sencillo y perfecto!! muchas gracias amigo

    ResponderEliminar
  13. Respuestas
    1. Muchas gracias a ti Javier,
      Un abrazo,
      Jesús González

      Eliminar
  14. Funciona a la perfección. Hasta yo lo he conseguido !!!. Gracias

    ResponderEliminar
  15. Hola Jesús, estoy intentando seguir todos tus consejos... pero en este caso, no ha funcionado.. :-(
    Tengo que decirte, que antes de querer quitar la barra de navegación he agregado el seguimiento a las páginas con Google Analytics, poniendo el texto que se me indica antes de body.
    Ahora al querer hacer lo mismo, es decir, ponerlo antes de body, no se me ha cambiado la función... Qué hecho mal?? podrías echarle un vistazo?? Es urgente e importante... Muchísimas Gracias de antemano!!

    ResponderEliminar
    Respuestas
    1. Hola,,
      Aquí hay un poco de mezcla.

      Lo primero es que efectivamente, haz ocultado con éxito la barra de blogger.

      Con respecto a la segunda cuestión no tiendo muy bien en el estado en el que te encuentras.

      Te mandé un mensaje a través de Google+, veo que me has comentado con dos perfiles diferentes, con este si que he podido ver tu blog

      Seguimos conversando,
      Muchas gracias

      Eliminar
  16. Muchas Gracias a sido una gran ayuda y le da un toque mucho más professional al blog!! Thankssss

    ResponderEliminar
    Respuestas
    1. Perfecto! te ha quedado genial.
      Enhorabuena por completar este tutorial.

      Gracias por el comentario

      Jesús González

      Eliminar
  17. Hola jesus, mira en mi blog esta barra aparece por defecto, si bien mi blog es un albun en el que pretendo que cada usuario tenga vision directa a su perro, como podria dejar algo parecido para que el usuario buscara de esta forma el nombre de su mascota directamente sin tener que buscarlo por fecha en el listado dee entradas al blog?
    que se te ocurre que podria hacer para mejorarlo
    gracias
    jorge martinez

    ResponderEliminar
  18. Hola Jesus, esto no lo entiendo ni se como hacerlo aunque pulso ctrol b o f no me sale nada ni se como buscar lo que dices, que hago mal?
    Busca Ctrl F o Ctrl B (en Mac en Mac ⌘F o ⌘B) y busca Body {
    Justo encima pega el siguiente código:
    #navbar {display: none !important;}
    ayudame esimportante para mi
    gracias mi correo jorgemartinezpacheco@gmail.com
    jorge martinez

    ResponderEliminar
  19. hola Jesus¡
    Vale ya lo he conseguido , no ponia la instruccion encima sino a su derecha, ya esta correcto gracias
    jorge martinez

    ResponderEliminar
  20. Hola Jesús,
    Primero quisiera agradecerte por la calidad de tus artículos. Soy un novato en esto (recién ayer habilité mi blog) y me están siendo de muchísima ayuda.
    En este caso puntual lo he logrado y la vista web se ve perfecta, sin embargo la vista para móvil pierde por completo las fotos y demás detalles gráficos de la plantilla, viéndose con fondo blanco. Lo más extraño es que he vuelto atrás los cambios, pero no hay caso, sigue viéndose blanco.
    ¿Hay algo que se pueda hacer para "sincronizar" de algún modo los colores de móvil en base al diseño web?

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Humos y Empresa,

      Gracias por el comentario, a ver te comento precisamente la vista para móviles es una plantilla diferente a la plantilla para web. Está pensada y está diseñada para obtener la mayor compatibilidad posible cuando tu blog es visitado usando un móvil.

      Yo tienes por qué extrañarte son diferentes, el fondo de tu blog web no es el fondo de tu blog movil.

      Puedes jugar un poco con los colores de tu plantilla Web pero todo está muy limitado en este aspecto. Vete a Configuración-->Plantilla y verás las diferentes plantillas para móviles que pues aplicar a tu blog en estos momentos.

      Saludos,

      Jesús.

      Eliminar
    2. Mi agradecimiento...

      Quisiera ocultar la barra
      de retroceso y avance
      editar a mis plantillas
      y que los tiempos me alcancen.

      Quisiera ocultar la barra
      manteniendo mis entradas
      y que me lean de Asturias,
      de Cataluña y Granada.

      Espero que te guste.

      Eliminar
    3. jajaja, es un chiste verdad?

      Eliminar
    4. Jesús,
      Perdón por la demora en la respuesta.
      Sí, pretende ser gracioso. Es lo que trato en mi blog, aplicando humor en el ámbito corporativo.

      Gracias por los artículos que publicas en tu blog. Yo estoy aprendiendo y son muy valiosos.
      Saludos!

      Eliminar
  21. Hola, he conseguido hacerlo, muchas gracias.

    El problema es que ahora me queda una franja en blanco (el fondo es blanco) entre el inicio del blog y la imagen de titulo (que es azul) ¿alguna forma de solucionarlo?

    ResponderEliminar
    Respuestas
    1. Hola Javier,

      Si que veo ese espacio, no veo el fondo blanco sino como una franja arriba del todo, no sé si te refieres a eso. A ver, lo que yo te facilito es un código de estilo CSS. Este hace invisible a este elemento, pero también podrías ponerle background-color: transparent !important; o incluso marging-top: -200px para que no se muestre dentro de la página....

      La verdad es que no sé si me he explicado. Por favor vuelve a comentarme nuevamente si con esto te he dado alguna pista que te sirva.

      Gracias,

      Jesús.

      Eliminar
  22. Muchas gracias, estas ayudandome mucho en mi blog!

    ResponderEliminar
  23. Anónimo16/2/13 1:54

    gracias buen tuto

    ResponderEliminar
  24. Te estoy descubriendo. Estoy mejorando enormemente mi blog, del cual no estaba nada orgullosa. Hay soluciones que no encuentro, como la de que éste icono de los comentarios en blogs ajenos salga sin imagen. En fín, poquito a poco. ¡Gracias!

    ResponderEliminar
  25. Una explicación muy didáctica, ya lo he ocultado y, con cada explicación tuya, estoy personalizando mi Blog. Gracias

    ResponderEliminar
  26. Gracias, bien explicado, fácil de hacer.

    ResponderEliminar
  27. Jesús

    Perfecto. Esto quedo instalado sin problema alguno.

    ResponderEliminar

Te agradezco la participación en iniciaBlog a través tu comentario. Recuerda que te responderé con otro comentario justo debajo del tuyo. Gracias y mucha suerte! ;-)

Más información ¿Cómo poner el botón de...:?

Premio Bitácoras

Aviso Legal

Licencia Creative Commons
iniciaBlog - Te ayuda con Blogger a mejorar tu blog
iniciaBlog se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
Basada en una obra en www.iniciablog.com.

Creado por Jesús González

Política de Privacidad de iniciaBlog | Política de Cookies
2015 © Jesús González es el autor de iniciaBlog.com
Tema creado por Way2themes y adaptado por inciciablog