Barra de blogger (navbar), cómo quitarla, ocultarla y hacerla invisble




Esta es la barra azul que aparece por defecto en blogger, llamada navbar, que afortunadamente se puede quitar y es muy sencillo.

1) Vamos a Diseño
2) Edición HTML
3) Buscamos la siguiente parte del código: <head> (tecleamos Ctrl + F para buscar más rápido)
4) Justo después añadimos el siguiente código:

<style type='text/css'>
#navbar-iframe{
height: 0px;
visibility: hidden;
display: none;
}
</style>





Si queremos ocultarla y no borrarla, los pasos a seguir son los siguientes:

1) Vamos a Diseño
2) Edición HTML
3) Buscamos la siguiente parte del código: body{ (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes añadimos el siguiente código:

#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}





Por último, si queremos que sea invisible menos cuando pasemos el cursor del ratón por encima debemos hacer lo siguiente:

1) Vamos a Diseño
2) Edición HTML
3) Buscamos la siguiente parte del código: </head> (tecleamos Ctrl + F para buscar más rápido)
4) Pegamos el siguiente código antes de </head>

<script src='http://www.google.com/jsapi'/><script>
google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>

<script type="text/javascript">
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window, 'load', navbarHack, false);
</script>


Nota: si ya hemos instalado previamente alguna vez un código con scriptaculous sólo deberemos copiar esta parte del código anterior:

<script type="text/javascript">
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window, 'load', navbarHack, false);
</script>

64 comentarios:

  1. Hola, gracias por tus consejos, pero una duda, si retiro la barra de blogger...como ingreso despues al menu de etiquetas??...para hacer todos los cambios necesarios como hago??..

    Gracias

    ResponderEliminar
  2. Hola, gracias a ti por visitarnos.

    Yo lo que hago es guardar en mi navegador (en favoritos) la página de blogger y accedo desde allí.

    Ten en cuenta que conservar la "navbar" es más cómodo para ti, pero para tus lectores queda algo feo ya que muchos no son "clientes" de blogger y les aparece esa molesta barra.

    De todas formas, he modificado la entrada para que se entienda mejor por si surgen dudas y he añadido la posibilidad de que la barra esté oculta, salvo que pasemos el ratón por encima.

    Cualquier duda más, estaré encantado de responder.

    Un saludo

    ResponderEliminar
  3. Gracias loco, sabes que me meti en otro sitios y me decian como sakarla, pero ninguno me ayudo, solo el TUYO!!! muchas gracias. :D

    Saludos. BAY

    ResponderEliminar
  4. Hola chilepunk gracias a ti por tu visita y tu comentario. Me alegro que te sirva de ayuda esta página, su misión es precisamente esta.

    Saludos

    ResponderEliminar
  5. Hola:
    No se puede ocultar y que cuando pases el raton por encima salga la barra?

    ResponderEliminar
  6. Hola Petropuky, gracias por tu comentario.

    Cierto, se me había pasado por alto esa otra opción para hacer desaparecer la barra menos cuando pasamos el ratón por su zona. Ahora ya la he incluído. Si tienes alguna duda más sólo tienes que decirla.

    Saludos y bienvenido al blog.

    ResponderEliminar
  7. Gracias. Yo la oculto y cuando paso el ratón aparece. Así da gusto.
    Un Saludo

    ResponderEliminar
  8. Hola. Me alegro que estés contento con el resultado.

    Un saludo y gracias por tu visista.

    ResponderEliminar
  9. que hago si no aparece la barra y no la tengo en favoritos

    ResponderEliminar
  10. Hola anónimo. Pues puedes simplemente ocultarla y que al pasar el ratón aparezca (arriba tienes explicado cómo hacerlo), o puedes acceder desde blogger.com

    Un saludo

    ResponderEliminar
  11. he puesto la penultimo codigo y al principio no sale la barra y paso el raton y correcto aparece pero se vuelve a quedar anclada y no desaparece http://wwwlagradasur.blogspot.com/ si la quieres mirar a ver si te sale a ti la barra pq a mi me sale

    ResponderEliminar
  12. Hola goyu73, ten en cuenta que en el último código debes insertar también el scriptaculous. Si no es por ese fallo no sé qué puede ser, ya que otros usuarios han seguido paso a paso las indicaciones y les ha ido bien. Compruébalo de nuevo y me dices cosas.

    Un saludo.

    ResponderEliminar
  13. perfecto gracias por ayudarme el fallo ha sido mio que no he puesto la ultima parte por no saber lo que era el scriptaculos.
    una pregunta tienes algun post para saber poner 3 columnas en mi blog, la de tres gatges no que ya la he visto me refiero a divider mi blog en tres columnas izquierda y derecha propaganda o gatges y la del medio para escribir post gracias de antemano. mira que he buscado paginas y es la unica que he visto que da muy bien explicadas las cosas con dibujos solo darte mi heronabuena

    ResponderEliminar
  14. ahora tengo otro problema con la barra vale funciona pero mi cabecera es gris y se me ha quedado donde estaba la barra blanco y queda fatal

    ResponderEliminar
  15. Hola goyu73, tendrás que entrar en tu plantilla HTML y en la cabera mirar qué color está por defecto en ella. El blanco tiene este código: #FFFFFF. Encuéntralo y cambiálo por el color gris de tu blog.

    Un saludo.

    ResponderEliminar
  16. Se me olvidaba, lo de añadir una columna más al blog está apuntado para añadir próximamente.

    Gracias por tus comentarios.

    ResponderEliminar
  17. Hola: Deseo colocar al lado derecho de mi blog un menú de pestañas como las que usa Yahoo España o MSN Colombia, que cuando se pincha aparecen algunas noticias. Sería posible hacerlo en mi blog de blogger (Plantilla Zinmag Tribune.

    Muy agradecido,
    Allende La Paz
    NotiColombia Press

    ResponderEliminar
  18. Hola NotiColombia. Puedes añadir el gadget que hay en blogger para poner enlaces llamado "lista de enlaces". De esta forma añades los links de las noticias que desees.

    Un saludo y gracias por tu comentario.

    ResponderEliminar
  19. Hola: te escribo para agradecerte por toda la información que publicas, es de mucha ayuda, yo apenas empiezo a crear un blog y me está sirviendo mucho, aunque mi blog va a ser supersencillo, la verdad es que va a quedar muy a mi gusto con tu consejos.

    ResponderEliminar
  20. Saludos, el método para hacer desaparecer la barra y que aparezca al pasar el ratón funciona bien y me gusta mucho, pero me produce sintomas curiosos ya que me dejan de funcionar el Gadget de miembros, el de ultimas publicaciones y el de comentarios, lo he comprobado tres veces puesto que lo he colocado y quitado y cuando lo quito vuelven a funcionar otra vez, sabes que puede ocurrir y cual puede ser la solución?
    Te felicito por tu Blog, enhorabuena

    ResponderEliminar
  21. @ Adriana. Bienvenida a esta página y a este mundo de bloggers. Muchas gracias por tu comentario y por tus palabras. Me alegro servirte de ayuda. Un saludo.

    @ El justiciero. Ahora no recuerdo bien, pero creo que el script de los seguidores da problemas con este script (scriptaculous) que hace hacer invisible la barra de blogger. Por el momento no hay muchas alternativas, sólo queda esperar a que actualicen estos fallos. Quizá sería aconsejable que la eliminases de momento (empleando el primer método empleado arriba).

    Un saludo a los dos, gracias por visitarnos y comentar.

    ResponderEliminar
  22. Hola hola, bueno les comento que utilice la opcion de invisibilizar hasta que pase con el cursor por encima, y lo que sucedio es que tambien me invisibilizaba el gadget de los seguidores, les surgio el problema y si tienen solucion
    saludos

    ResponderEliminar
  23. Hola Bistiarj. Lo que te ocurre es debido al "scriptaculous". Por lo visto con según qué navegadores da problemas con la lista de seguidores. Yo opté por eliminar "scriptaculous" de mi blog. He visitado tus dos blogs y te recomiendo ocultar la barra, le daría un toque mas profesional a tus blogs. Es mi humilde recomendación.

    Gracias por comentar. Saludos.

    ResponderEliminar
  24. Hola Juan, mira, como bien me has dicho, estoy hechando un vistazo a todo el blog y veo que hay muchisimas posibilidades para el blog!! mira, hice lo de la barra para hacerla invisible y que solo aparezca cuando pasas el raton por encima y hasta ahi bien, pero ahora me surge otra cosa, el sitio donde estaba la barra quedo blanco, ya hice lo que contestastes a un usuario arriba de este post, trate de cambiar el color buscando ffffff, y cambiandolo por el rosa que es el color del fondo de mi blog pero me sigue saliendo blanco arriba y se pone todo rosa y esto tampoco es lo que quiero, que puedo hacer? gracias!

    ResponderEliminar
  25. Busca en la plantilla de tu blog header-wrapper y mira las dimensiones (height y width). El valor más pequeño es el alto de la cabecera. Hazlo más pequeño y me cuentas los resultados :D

    ResponderEliminar
  26. Hola muchas gracias esta muy completo todo solo tengo un pequeño problema NO SE COMO BREAGAR CON CODIGOS no encuentro ese /head solo veo un head y lo pongo ahi y me sale error aqui te dejo mi blog http://twi-tards.blogspot.com

    ResponderEliminar
  27. Hola Genesis. No sé el significado de BREAGAR. Pero imagino que tu problema es que no encuentras el /head. Para buscar de una forma rápida en tu plantilla HTML debes teclear al mismo tiempo las teclas "Ctrl" y "F". Te aparecerá una barra de búsqueda abajo del todo en donde deberás colocar la palabra a buscar.

    Espero que te sirva, saludos y bienvenido al blog.

    ResponderEliminar
  28. hey, quería saber si no hay ningun problema con sacarla? digo... porque ahí está la opcion para denunciar por mal uso y eso...

    ¿no infringe ninguna regla de blogger?

    ResponderEliminar
  29. Hola MaXxCock. De momento no hay norma que prohiba quitarla, no te preocupes.

    Un saludo.

    ResponderEliminar
  30. Sabes como cambiarle el color a la barra? porque vi en algunos blogs que eran de otros colores y usaban plantillas comunes

    gracias!

    ResponderEliminar
  31. Hola Maxxx. Ves a Diseño->Elementos de página->Arriba de las entradas te sale para editar la barra y seleccionar el color que quieras.

    Saludos amigo :)

    ResponderEliminar
  32. Muchas gracias, nunca había visto que decía editar ahí jaja

    Salu2

    ResponderEliminar
  33. Me encanta tu blog tio, me ayudas muchisimo :D te lo voy a poner en web amigas :D para que quien lo necesite pueda visitarlo :D

    ResponderEliminar
  34. Gracias sable, es para mí un honor. Un saludo amigo.

    ResponderEliminar
  35. Hola! Muchas gracias por todos tus consejos! Me ayudaste muchísimo para crear mi blog y quedo perfecto.

    Tenía una duda, yo saqué la barra para que sólo apareciera cunado le pasaba el mouse por arriba y ahora quiero dejarla visible siempre. Ya fui arriba de "head" y saqué el código que había puesto y todo pero sigue estando invisible ): Me podrías ayudar? Muchas gracias!

    ResponderEliminar
  36. Hola, nuevamente paso para saludarte y felicitarte por tu blog.

    Mi consulta es saber como haces para escribir en lenguaje html en una entrada. Asi como esta entrada donde has puesto el codigo html para quitar el navbar. Normalmente en una entrada se pega este codigo pero al publicarlo no aparece. Esperaré atentamente la respuesta. Saludos

    ResponderEliminar
  37. Bueno... Creo que es MUUUY tarde para comentar aqui... pero bueno, yo comento (a ver si responde T^T ya tiene tiempo esta entrada).

    Cuando yo cargo mi blog, la barra de Navbar aparece mientras carga el blog. Creo que use el codigo para ocultarla. Y mi pregunta es:

    ¿Si ELIMINO la NavBar no aparecerá mientras se carga él blog?

    Espero respuesta...

    ResponderEliminar
  38. Perdon por el doble Comentario... Pero vuelvo a comentar para decir que estoy usando el primer codigo... es decir; para quitarla...

    ¿Que hago? No lo entiendo... Cuando cargo mi blog, se ve por unos pocos segundos...

    ResponderEliminar
  39. gracias... Me sirvio mucho tu consejo ya que hace unos dias empeze mi blog de Arquitectura
    lo he acomodado bastante y me gustaria que lo visites y si tenes una recomendacion seria de mucha ayuda ya que de todos esta fue la pagina mas util y sencilla que he encontado

    http://quinta75.blogspot.com

    ResponderEliminar
  40. Madre mía!! Lo estoy gozando yo solo... jajaja! Si te digo que tu página no tiene precio creo que me quedo corto...
    Muchísimas gracias!
    Hoy es el día 0 de mi blog y tengo una ilusión tremenda viendo como está quedando...

    ResponderEliminar
  41. Muchísimas gracias por esta información, yo la pude ocultar a la barra para que no moleste a mis visitas y la pueda ver cuando me sea necesaria.
    Es genial tu página, soy principiante y me esta sirviendo de mucho, esto me esta llevando mucho tiempo en actualizar mi blog que estaba todo mal jeje.
    Saludos de tu nuevo seguidor.

    ResponderEliminar
  42. Excelente. Esta muy bueno todo lo que publicas, soy aprendiz principiante en esto y es impresionante lo que me sirve. Gracias!

    ResponderEliminar
  43. Gracias,

    Este Blog es una nota, estoy creando uno y tus consejos son de mucha ayuda, tan pronto lo termine te voy a enlazar para que otras personas tengan acceso a esta información tan útil.

    ResponderEliminar
  44. Brillantemente sencillo... la mayoria de tus explicaciones son extremadamente precisas. Solo basta con ver la diferencia que hay cuando uno visita otras paginas... y generalmente sufre intentando descifrar las explicaciones.
    Atte.

    ResponderEliminar
  45. Hola desde un tiempo me he dedicado a mirar blogs de ayuda a bloggers novatos como yo y la verdad es que el tuyo es de mucha utilidad.
    He incorporado 3 o 4 tips de ayuda y han funcionado de martavillas, te felicito, sigue así.
    Saludos.

    ResponderEliminar
  46. Como hago para recuperar la barra si la borre :S
    gracias!

    ResponderEliminar
  47. Hola quisiera saber como sacar una celda search

    ResponderEliminar
  48. hola! antes que nada agradecerte el trabajo que estás haciendo.

    Verás, estoy escribiendo una historia por capitulos (www.projectshackle.tk) en blogger y quise quitar la navbar. Ahora lo he pensado mejor y he decidido que seria mejor que puesiera que se oculte y se muestre y he hecho lo que dices, he buscado en edicion de html (sin asterisco)y justo antes he escrito todo el codigo que has puesto:

    google.load("prototype", "1.6.0.2");
    google.load("scriptaculous", "1.8.1");



    function navbarShow() {
    new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
    }
    function navbarHide() {
    new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
    }
    function navbarHack() {
    Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
    Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
    navbarHide();
    }
    Event.observe(window, 'load', navbarHack, false);



    pero cuando le doy a vista previa me sale el logo de blogger en gris y no carga el blog... :S

    he intentado poniendo solo
    function navbarShow() {
    new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
    }
    function navbarHide() {
    new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
    }
    function navbarHack() {
    Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
    Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
    navbarHide();
    }
    Event.observe(window, 'load', navbarHack, false);

    pero me sale el mismo error... me podrías ayudar? gracias por tu ayuda! sigue así! :D

    PD: no he puesto ninguno de los asteriscos en el codigo html, pero esque si no lo ponia aquí no me deja publicar el comentario xD

    ResponderEliminar
  49. vale, el codigo no es así, todo en lo que he puesto asterisco se ha borrado... xD

    habia asteriscos donde decia , y cosas por el estilo... ^^

    ResponderEliminar
  50. se ha vuelto a borrar!!! xD
    era lo de
    s
    c
    r
    ipts y hea
    d
    y cosas así... siento ser tan pesado... :S

    ResponderEliminar
  51. He dado los pasos necesarios para que la barra de Bloger aparezca solo cuanhdo pase el raton
    pero ocurre que mientras se carga la pagina o paso el raton y se visualiza, sale mi dirección de correo electronico.
    Te agradeceria me dijeses como puedo hacer para que no se vea mi correo.

    ResponderEliminar
  52. Increible, algo muy muy muy pero que muy util. Un saludo y GRACIAS

    ResponderEliminar
  53. Hola ! Antes que nada, nobleza obliga, tengo que agradecerte por todo lo que tu blog aporta a los que nos iniciamos en esto. Soy uno de los que usan tu trabajo para ir mejorando el mio poco a poco. Ahora te quería comentar sobre un problema que tengo. Resulta que yo quice borrar la navbar y lo conseguí. El problema es que con ella se fue el botón para ingresar y el de diseño. Osea que perdí el control de mi blog. ¿Conocés alguna solución? Te agradecería todo lo que me puedas decir.

    Un saludo

    ResponderEliminar
  54. gracias era lo que andaba buscando te lo agradesco visite muchos blog y en este encontre lo que busca felicidades buen blog

    ResponderEliminar
  55. ¿Como edito mi blog si no esta la barra de blogger?

    ResponderEliminar
  56. Muchas Gracias,gracias a mi curiosidad y personas como tu es que he ido cambiando mis Blogs a mi manera.Me funciono super..Saludos desde Venezuela.

    ResponderEliminar
  57. Hola, quisiera saber una cosa y como veo que tienes mucha experiencia en construir blogs, aquí va la pregunta: ¿si quito la navbar de mi blog estaré infringiendo alguna política de AdSense y no me pagarán lo ganado por anuncios?

    Gracias amigo

    ResponderEliminar
  58. si elimino la barra de blogger donde esta el acceso para el login, no afectara esto el inicio de sesion? como hare para poder entrar a mi blog y administrarlo?

    ResponderEliminar
  59. no me aparece la opcion de edicion html, Blogger a modificado su interfaz, es que ya no se puede hacer?

    ResponderEliminar