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 |
Como siempre que tocamos la plantilla HTML te recomiendo copia de seguridad antes. Sigue estos sencillos pasos:
- Accede a la pestaña Plantilla y haz clic en el botón Crear copia de seguridad/Reestablecer
- Una vez hayas creado tu copia de seguiridad, presiona el botón Edición de HTML
- 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;} - Guarda la plantilla y visualiza tu blog
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
Entradas
¡Listo!
ResponderEliminarMuchas gracias por tus consejos.
Muchas gracias, una gran ayuda.
ResponderEliminarGracias Carlos por tu comentario...me encanta ver gente nueva por este humilde blog.
ResponderEliminarUn fuerte abrazo.
Saludos,
Jesús
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.
ResponderEliminarMuchas gracias.
Hola Damián,
ResponderEliminarPara 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!
Muchas gracias Jesús. Hecho. Es una suerte tenerte ahí para todas estas dudas.
ResponderEliminarUn cordial saludo
Gracias j.Damián por tu comentario, me alegra que te haya servido.
EliminarJesús González
Por fin una explicación clara. Gracias.
ResponderEliminarGracias a ti por tu comentario. Recuerda que en los contenidos de esta blog encontrarás un índice con todos los temas publicados.
Eliminar¡Mucha suerte!
Jesús González
Excelente!
ResponderEliminarGracias José un fuerte abrazo y mucha suerte con tu blog
EliminarJesús González.
¿como editarlo luego, si no aparece la barra de navegación?
ResponderEliminarsolo 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
EliminarGracias por tu comentario!
Jesús González
Hola Jesús,
ResponderEliminarA 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
Qué raro Alex :(
EliminarEn 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.
Hola Jesús,
EliminarGracias 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 :-)
Hola Alex,
EliminarTe he respondido con un comentario directo en tu blog, aprovecho para felicitarte también por el mismo.
Ya me comentas.
Muchas gracias,amigo, por tus molestias. He seguido tus pasos y no oculta nada. ¿Me podrias sugerir alguna idea? Gracias de nuevo.
ResponderEliminarHola Angel,
EliminarPor favor prueba a seguir nuevamente los pasos pero en lugar de poner
#navbar {display: none !important;}
pon
#navbar-iframe {display: none !important;}
Coméntame
Sencillo y perfecto!! muchas gracias amigo
ResponderEliminarGracias! :)))
ResponderEliminargraacias!!!
ResponderEliminarMuchas gracias a ti Javier,
EliminarUn abrazo,
Jesús González
Funciona a la perfección. Hasta yo lo he conseguido !!!. Gracias
ResponderEliminarHola Jesús, estoy intentando seguir todos tus consejos... pero en este caso, no ha funcionado.. :-(
ResponderEliminarTengo 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!!
Hola,,
EliminarAquí 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
Muchas Gracias a sido una gran ayuda y le da un toque mucho más professional al blog!! Thankssss
ResponderEliminarPerfecto! te ha quedado genial.
EliminarEnhorabuena por completar este tutorial.
Gracias por el comentario
Jesús González
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?
ResponderEliminarque se te ocurre que podria hacer para mejorarlo
gracias
jorge martinez
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?
ResponderEliminarBusca 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
hola Jesus¡
ResponderEliminarVale ya lo he conseguido , no ponia la instruccion encima sino a su derecha, ya esta correcto gracias
jorge martinez
Hola Jesús,
ResponderEliminarPrimero 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
Hola Humos y Empresa,
EliminarGracias 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.
Mi agradecimiento...
EliminarQuisiera 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.
jajaja, es un chiste verdad?
EliminarJesús,
EliminarPerdó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!
Gracias!!
ResponderEliminara ti Kistel!
EliminarHola, he conseguido hacerlo, muchas gracias.
ResponderEliminarEl 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?
Hola Javier,
EliminarSi 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.
Excelente como siempre! ;)
ResponderEliminarMuchas gracias Gabriela!
ResponderEliminarMuchas gracias, estas ayudandome mucho en mi blog!
ResponderEliminargracias buen tuto
ResponderEliminarTe 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!
ResponderEliminarUna explicación muy didáctica, ya lo he ocultado y, con cada explicación tuya, estoy personalizando mi Blog. Gracias
ResponderEliminarPerfecto Mª José.
EliminarGracias, bien explicado, fácil de hacer.
ResponderEliminarMuchas gracias María.
EliminarJesús
ResponderEliminarPerfecto. Esto quedo instalado sin problema alguno.