Tutoriales Blogger: Cómo eliminar la barra de navegación de blogger o Navbar

24 de agosto de 2015

Hola a todos ^^ feliz inicio de semana, hoy es lunes y quise iniciar la semana con otro tutorial de la nueva sección que estrenamos la semana pasada, el cual si aun no has visto, lo puedes ver aquí. Espero estos pequeños tutoriales les sean de ayuda *.*

Hoy veremos como quitar la barra de navegación de blogger o Navbar que esta arriba del blog, hablo de esta.


No diré que no tiene sus ventajas, pero yo personalmente no la considero necesaria y quizá esta barra desentone un poco con el diseño de tu blog, por eso hoy te mostraré dos maneras en la que puedes eliminarla de tu blog, una más fácil que la otra.

Opción #1:

Esta es la forma más sencilla, para ello debes ir a diseño y en la barra Navbar o barra de navegación le darás a editar.



Y saldrá una ventana donde podrán elegir que diseño quieren para su barra (esto en dado caso que no quieran eliminarla, sólo cambiar su apariencia).



Pero si deciden eliminarla, deben presionar Desactivado → Guardar → Guardar Diseño.

Así de esta forma, la barra desaparecerá de tu blog. Pero puede que no te guste que el espacio que queda es un poco grande, si es así te recomiendo entonces la siguiente opción.

Opción #2:

Para esta opción debes ir a Plantilla → Editar HTML (recuerda hacer antes una copia de seguirdad!).
Una vez dentro de nuestra plantilla haremos clic en cualquier lugar y presionamos Ctrl+F, esto nos abrirá un buscador y alli copiamos  body {   y luego enter.

Una vez lo encontramos, justo por encima de la palabra body pegamos el siguiente código:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Guardamos la plantilla y listo.

Si quieres entender como funciona te explicare un poco para que sirve cada linea del código:

En primer lugar se identifica el elemento que queremos modificar, en este caso se trata del "navbar-iframe" o la barra de Blogger. Se colocan los corchetes para ubicar las propiedades de ese elemento.
height: esta relacionada con la altura del elemento, será cero (0) porque no tendrá ninguna altura.
hidden: regula la visibilidad, lo que indica que aquí el elemento no será visible.
display: dirige si el elemento en cuestión debe o no mostrarse en pantalla. En este caso el valor introducido es none o ninguno.
Esto es todo por hoy, si les gustó el tutorial no duden en compartirlo :)

Muchas gracias a todos por leerme. Besitos ^^

Ross

12 comentarios:

  1. Hola!!
    Muy buen tutorial, gracias por ponerlo ;)
    Saludos!! <33

    ResponderEliminar
  2. Un tutorial útil, claro y sencillo.
    ¡Un beso!

    ResponderEliminar
  3. Hola guapa!
    Adoro estos tutoriales, porque yo soy tan negada... jajaja
    Un beso

    ResponderEliminar
  4. Hola!! genial la seccion, pero he intentado la opcion 2, y me sigue saliendo la barra en blanco. ¿Que puedo hacer?
    Un abrazo

    ResponderEliminar
    Respuestas
    1. Hola Jaime, prueba Bucando
      .content-inner { y agrega debajo
      margin-top:-30px;
      Esto es para subir la plantilla y ocultar ese espacio. Espero te sirva.

      Eliminar
    2. Hola, no me aparece ese comando, lo mas parecido esto:
      .art-slider-inner {
      gracias de todas formas ;)

      Eliminar
    3. Te he enviado un correo con otra posible solución ya que blogger no me permite colocar aquí el código.

      Eliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. Hola!
    Muchas gracias por el tutorial.
    Besos

    ResponderEliminar
  7. Excelente info. Yo voy a quitar la mìa porque no combina.

    ResponderEliminar
  8. Un tuto genial, yo ya la quite en su momento
    besitos.

    ResponderEliminar
  9. Me sirvió mucho... Saludos.

    ResponderEliminar