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("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</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>
Suscribirse a:
Enviar comentarios (Atom)
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??..
ResponderEliminarGracias
Hola, gracias a ti por visitarnos.
ResponderEliminarYo 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
Gracias loco, sabes que me meti en otro sitios y me decian como sakarla, pero ninguno me ayudo, solo el TUYO!!! muchas gracias. :D
ResponderEliminarSaludos. BAY
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.
ResponderEliminarSaludos
Hola:
ResponderEliminarNo se puede ocultar y que cuando pases el raton por encima salga la barra?
Hola Petropuky, gracias por tu comentario.
ResponderEliminarCierto, 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.
Gracias. Yo la oculto y cuando paso el ratón aparece. Así da gusto.
ResponderEliminarUn Saludo
Hola. Me alegro que estés contento con el resultado.
ResponderEliminarUn saludo y gracias por tu visista.
que hago si no aparece la barra y no la tengo en favoritos
ResponderEliminarHola 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
ResponderEliminarUn saludo
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
ResponderEliminarHola 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.
ResponderEliminarUn saludo.
perfecto gracias por ayudarme el fallo ha sido mio que no he puesto la ultima parte por no saber lo que era el scriptaculos.
ResponderEliminaruna 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
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
ResponderEliminarHola 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.
ResponderEliminarUn saludo.
Se me olvidaba, lo de añadir una columna más al blog está apuntado para añadir próximamente.
ResponderEliminarGracias por tus comentarios.
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.
ResponderEliminarMuy agradecido,
Allende La Paz
NotiColombia Press
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.
ResponderEliminarUn saludo y gracias por tu comentario.
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.
ResponderEliminarSaludos, 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?
ResponderEliminarTe felicito por tu Blog, enhorabuena
@ 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.
ResponderEliminar@ 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.
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
ResponderEliminarsaludos
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.
ResponderEliminarGracias por comentar. Saludos.
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!
ResponderEliminarBusca 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
ResponderEliminarHola 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
ResponderEliminarHola 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.
ResponderEliminarEspero que te sirva, saludos y bienvenido al blog.
hey, quería saber si no hay ningun problema con sacarla? digo... porque ahí está la opcion para denunciar por mal uso y eso...
ResponderEliminar¿no infringe ninguna regla de blogger?
Hola MaXxCock. De momento no hay norma que prohiba quitarla, no te preocupes.
ResponderEliminarUn saludo.
Sabes como cambiarle el color a la barra? porque vi en algunos blogs que eran de otros colores y usaban plantillas comunes
ResponderEliminargracias!
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.
ResponderEliminarSaludos amigo :)
Muchas gracias, nunca había visto que decía editar ahí jaja
ResponderEliminarSalu2
Gracias a ti compañero. Un saludo ;)
ResponderEliminarMe 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
ResponderEliminarGracias sable, es para mí un honor. Un saludo amigo.
ResponderEliminarHola! Muchas gracias por todos tus consejos! Me ayudaste muchísimo para crear mi blog y quedo perfecto.
ResponderEliminarTení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!
Hola, nuevamente paso para saludarte y felicitarte por tu blog.
ResponderEliminarMi 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
Bueno... Creo que es MUUUY tarde para comentar aqui... pero bueno, yo comento (a ver si responde T^T ya tiene tiempo esta entrada).
ResponderEliminarCuando 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...
Perdon por el doble Comentario... Pero vuelvo a comentar para decir que estoy usando el primer codigo... es decir; para quitarla...
ResponderEliminar¿Que hago? No lo entiendo... Cuando cargo mi blog, se ve por unos pocos segundos...
gracias... Me sirvio mucho tu consejo ya que hace unos dias empeze mi blog de Arquitectura
ResponderEliminarlo 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
Madre mía!! Lo estoy gozando yo solo... jajaja! Si te digo que tu página no tiene precio creo que me quedo corto...
ResponderEliminarMuchísimas gracias!
Hoy es el día 0 de mi blog y tengo una ilusión tremenda viendo como está quedando...
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.
ResponderEliminarEs 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.
Excelente. Esta muy bueno todo lo que publicas, soy aprendiz principiante en esto y es impresionante lo que me sirve. Gracias!
ResponderEliminarGracias,
ResponderEliminarEste 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.
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.
ResponderEliminarAtte.
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.
ResponderEliminarHe incorporado 3 o 4 tips de ayuda y han funcionado de martavillas, te felicito, sigue así.
Saludos.
Como hago para recuperar la barra si la borre :S
ResponderEliminargracias!
Hola quisiera saber como sacar una celda search
ResponderEliminarhola! antes que nada agradecerte el trabajo que estás haciendo.
ResponderEliminarVerá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
vale, el codigo no es así, todo en lo que he puesto asterisco se ha borrado... xD
ResponderEliminarhabia asteriscos donde decia , y cosas por el estilo... ^^
se ha vuelto a borrar!!! xD
ResponderEliminarera lo de
s
c
r
ipts y hea
d
y cosas así... siento ser tan pesado... :S
He dado los pasos necesarios para que la barra de Bloger aparezca solo cuanhdo pase el raton
ResponderEliminarpero 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.
Gracias me sirvió de mucha ayuda.
ResponderEliminarGracias, ya lo puse en práctica
ResponderEliminarIncreible, algo muy muy muy pero que muy util. Un saludo y GRACIAS
ResponderEliminargraciasssss
ResponderEliminarHola ! 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.
ResponderEliminarUn saludo
Gracias!!! me encanta esta página
ResponderEliminargracias era lo que andaba buscando te lo agradesco visite muchos blog y en este encontre lo que busca felicidades buen blog
ResponderEliminar¿Como edito mi blog si no esta la barra de blogger?
ResponderEliminarMuchas 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.
ResponderEliminarHola, 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?
ResponderEliminarGracias amigo
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?
ResponderEliminarno me aparece la opcion de edicion html, Blogger a modificado su interfaz, es que ya no se puede hacer?
ResponderEliminar