Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

24 mar. 2010

Personalizar Barra de Navegación de Blogger

A los que usamos plantillas personalizadas, la barra de navegación de blogger nos supone un atraso al no poder casi ni tocar por lo que solemos quitarla sin miramientos. Las plantillas por defecto de blogger las traen, y casi en todos los casos en ese azul corporativo que tanto da el cante. Os vamos a contar algunas personalizaciones que se pueden hacer de una forma fácil y efectiva.

Lo primero que podemos personalizar, esta en la parte de diseño del blog, ya que la barra trae un boton de "editar" y una serie de colores para elegir. Hago especial mención a los nuevos colores blanco y negro transparente que añadieron hace unos meses, puesto que dan un apaño para casi cualquier blog. Así de fácil ya tenemos la barra distinta a la corporativa de blogger.

El resto se trata de toquetear un poco el código de la plantilla, en la parte de CSS.

Primero, irse a Diseño -> Edición HTML. Si en vuestro blog se ve la barra con normalidad y no la habéis modificado, no tendréis un código parecido a este, que es el que deberéis de incluir justo después de todas las lineas <Variable....>

#navbar, #navbar-iframe {
position: absolute;
z-index: 10;

top: 0px;
right: 0px;
width: 100%;
opacity: 0.0;
filter:alpha(Opacity=0)

display: block;
visibility: visible;
}

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

Este código no hace nada, exceptuando el texto verde, pero modificando ciertas cosas se pueden conseguir lo que queremos:
  • Si queremos que desaparezca la barra totalmente, debéis cambiar en display, en vez de block, poned none, y en visibility en vez de poner visible poned hidden
  • Si queréis que la barra se vea siempre arriba, aunque bajemos el blog hacia abajo, position en vez de absolute, debe ser fixed
  • Las partes verdes son opcionales, si queremos que la barra aparezca y desaparezca si pasamos por encima el ratón lo escribimos. Si no se quiere este efecto, simplemente con no añadir las partes verdes no ocurre esto.
Así que con unos pocos toques, y añadiendo unas pocas y fáciles lineas, podemos tener una barra de navegación distinta a lo que estamos acostumbrados a ver, que normalmente es tener una barra de navegación, o no tenerla.

34 comentarios:

  1. hola soy nuevo en blog y voy haciendo cambios mirando por internet.he quitado la barra de navegacion del blog pero me queda un hueco en la parte de arriba que no me gusta nada.me gustaria que quedara ajustado en la parte de arriba aunque lo que de verdad me interesa es una barra negra sin nada como la barra de navegacion pero negro de lado a lado de la pantalla.podriais ayudarme?seria de gran ayuda.un saludo!

    http://kashwakstreetshop.blogspot.com/

    ResponderEliminar
  2. Pues puedes probar con una modificación rápida y fácil. Al igual que pone width: 100%; se le puede añadir otra línea que diga height: 0; con lo que no dejaría el espacio de la barra.

    Sin embargo no quedaría la parte negra pegada a la parte de arriba. Para poder serlo, tienes que buscar en el CSS lo siguiente:

    .content-outer {
    margin: 0 auto;
    padding-top: 20px;
    }


    Y cambiar esta parte padding-top: 0px; o simplemente eliminar esa línea también hará lo mismo.

    Espero que te sirva

    ResponderEliminar
  3. Hola, tengo una duda referente a la barra de navegación y concretamente al botón siguiente blog. ¿Hay alguna manera que cuando le des a siguiente muestre sólo blogs en español?

    Gracias de antemano.

    Jocárgali

    ResponderEliminar
  4. El contenido de la barra de navegación esta fuera del alcance de las personalizaciones que podamos hacer, así que no, solamente podemos personalizar lo que nos permite blogger, que ahora mismo son los colores de la barra.

    Un Saludo

    ResponderEliminar
  5. Buenas, estoy intentando quitar la barra donde sale el logo de blogger y me surgen 2 preguntas:
    1) del código que tú has escrito ¿UNICAMENTE necesito COPIAR lo que está en AZUL, ó incluyo también el resto de código aunque no sirva porque la barra ya no estará?
    2) Tengo que introducirlo detrás de todas las > que cierran <Variable (con más código) ó detrás de alguno en concreto. (Hay muchíiiisimos)

    ResponderEliminar
  6. Hola Elena!

    Pues si lo único que quieres es hacer desaparecer la barra (sin más) sólo con lo azul basta.

    Sobre la posición para colocar el código, va dentro de la sección style, pero como ahora blogger ha añadido un montón de variables, lo mejor es añadirlo justo debajo de todas ellas, ya que ahí empieza código similar (CSS concretamente) al que vas a poner (si te fijas, lo es).
    Recuerda no mezclarlo con otro no vaya a estropear algo, verás que esta escrito en bloquecitos (parecidos al código nuestro). Si tienes algún problema puedes indicar tu blog y se te puede indicar el lugar exacto.

    Saludos!

    ResponderEliminar
  7. Gracias, me ha funcionado estupendamente.
    Tengo otra duda.
    El salto de página que se introduce al redactar una entrada (con el botón que simboliza una página rasgada), incluye el código en html pero en la vista del blog presenta el artículo completo. ¿sabes qué hay que hacer para arreglarlo?
    Gracias de antemano

    ResponderEliminar
  8. Como han hecho últimamente muchos cambios en Blogger, no recordaba si hay una opción de activarlo o no, por lo que sé, si te vas Diseño -> Entradas del Blog y le das a editar debes poder configurar el texto del enlace "Leer Más", y si lo usas debe salir automáticamente (Al menos eso indica Blogger)

    Otra cosa que puede ser es que uses una plantilla antigua que no tenga bien configurada esta opción. Esta entrada te puede ayudar a buscar si es el problema y arreglarlo.

    Y otra cosa que tienes que tener en cuenta es algo que nos comentó Jose GDF en este blog, para no meter la pata con el Leer Más Nativo de Blogger.

    ResponderEliminar
  9. Bienvenido Heredia14 de enero de 2012, 16:21

    Saludos Lukas!
    Me gusta la forma en tratas de ayudar a los blogeros.
    Soy novatísimo en esto, pero estoy intentando crear un blog hace varios meses. Mi gran problema es que no he podido configurar la barra de navegación (menú horizontal). Cuando lo he logrado creandolo por algún programa y pegándolo, entonces no se como navegar. Por ejemplo, si tengo Cultura en el menú, no puedo abrir una página con esa etiqueta. Cómo creo la barra de navegación y cómo conseguir que sea dinámica? Hay plantillas que no usan los códigos actuales?
    Gracias por tu colaboración. Puedes enviarme la respuesta a bherediaba1@hotmail.com

    ResponderEliminar
  10. Hola!

    Antes que nada, si te refieres a la Barra de navegación que se habla en la entrada, no se puede configurar nada aparte del color y lo que se comenta en la entrada por CSS, no hay nada más, y no sabría a que te refieres.

    Sin embargo, creo que te refieres a las barras de enlaces que puedes configurar en la mayoría de las plantillas, para hacer una lista de enlaces que se vean arriba. La lista y los enlaces los tienes que poner tu, y si quieres poner un enlace a una etiqueta, tienes que poner el enlace tu mismo y dejarlo ahí. Así no se puede hacer dinámico para que cambie sólo.

    Lo que funciona dinámico añadiendo las etiquetas es el widget de etiquetas, que ese si te las añade a medida que las creas. Lo que pasa es que no lo puedes colocar ahí (En principio, tal vez cambiando código se podría hacer algo, pero no es fácil) eso es para poner una lista hecha por tí y no tiene por qué ser a etiquetas del blog, podría ser a cualquier sitio de internet en general.

    Por cierto, el fondo de la entrada lo veo negro, si esta noche sigue así lo voy a editar para arreglar el problema ;)

    ResponderEliminar
  11. Yo también lo veo negro. Se habrá perdido alguna imagen de las que alojó la socia en Imageshack.

    Este blog necesita un cambio de plantilla pronto. Pero a ver cuando, siempre estamos liados...

    ResponderEliminar
  12. Yo no consigo que me aparezcan los comentarios después de cada entrada

    ResponderEliminar
  13. @JoseGDF: Yo todavía ni me apetece cambiar el mio (y mira que está medio hecho... pero con tanto cambio de Blogger...) Pero si quereis me pongo un día, manteniendo imágenes, pero usando una plantilla de las nuevas.

    Sobre la imagen de fondo, es más raro aún... el servidor de imageshack donde esta alojado no funciona (img5.imageshack.us) en cambio el 4 y el 6 si. Puede ser no que hayan quitado la imagen, sino que este ese servidor petado o inaccesible ahora (llevaría unas horas ya, pero bueno), por eso no voy a tocar nada de momento.

    @jocargali: ¿No se te ven los comentarios? ¿Y entonces que se te ve, un enlace y se abre una ventana con ellos? Pregunto

    ResponderEliminar
  14. oye tengo un blog sobre club penguin le puedo poner la cabecera del mismo?

    ResponderEliminar
    Respuestas
    1. ¿Te refieres a la imagen y diseño tal vez de la página? Como poder puedes, pero mucho mejor separarse un poco de la web y tener sentido propio personalizandolo.
      Si te refieres a poner la barra superior con todos los enlaces y funciones de esa página, directamente no. Es un sistema privado que funciona mas allá de lo que ves, para poder hacerlo son ellos los que te deben dar la opción, y aun así no sería la misma página.

      Eliminar
  15. Esta buscando justo esto y le he encontrado aquí muy bien explicado. Por favor (si te apetece) te invito entra a mi blog www.marialepo.blogspot.com, admito sugerencias, estoy iniciándome en el mundo blogger.
    Excenlente Blog!!! ¿Porqué? a mi parecer muy buenos temas y lo mejor es que están muy bien explicados y graficados.

    ResponderEliminar
  16. No Lo voy a intentar Pero No se desaparece o es Un codigo en tu blog La barra No esta pero cuando Hacerco el mouse Por donde estaria la barra Aparece!!

    ResponderEliminar
  17. me hubiera gustado cambiarle el logo y los enlaces de la barra de navegacion de mi blog pero no lo consigoo XD igual gracias

    ResponderEliminar
  18. Tengo un blog sobre Mundo Gaturro y le quiero cambiar la barra en la cuál te desplazas arriba y hacia abajo. ¿Cómo puedo personalizarla?

    ResponderEliminar
    Respuestas
    1. (Y aún no le entiendo nada a este Lukas ThyWalls porque habla como científico...)

      Eliminar
    2. Jajajaja... me ha hecho gracia...

      A ver, ¿Te refieres a las barras de desplazamiento?
      (¿Estas?) Si te refieres a esto, el problema es que se pueden hacer algunas cosas, pero dependiendo del navegador y el sistema operativo que tenga la persona que vea la página, les harán caso o no... y las mayoría de los navegadores actuales (Firefox y Chrome) directamente no les hacen caso, sólo Internet Explorer (Y no puedo asegurarlo de versiones superiores al 7).
      Si quieres probarlo, mira esta página que explica más o menos, pero yo ni me molestaría.

      Eliminar
  19. Gracias, realmente útil para los que no entendemos casi nada de HTML. Saludos.

    ResponderEliminar
  20. deberian ponerle botones a su blog visiten el mio http://clubpenguinazui.blogspot.com/

    ResponderEliminar
  21. y alguien sabe cómo hago para subir una imagen personalizada? quiero decir, tengo una barra tipo así:http://designmoo.com/4017/ribbon-menu/

    Y la he personalizado pero no se cómo ponerla de navegación. Busco y busco pero no encuentro nada y como de inglés me cuesta....
    por favor estoy desesperadaaaa

    ResponderEliminar
    Respuestas
    1. Eso no se puede hacer en la barra de navegación. La única personalización es la que te permite blogger, la que entra en esta entrada, y alguna cosita más, pero nada que ver con colores y formas.

      Con práctica se podría usar para otras partes del blog, pero para eso hace falta de práctica con CSS y código para ir adaptándola y metiéndola, y no es cosa de subir y listo.

      Eliminar
  22. Tengo un blog sobre cine y teatro y no puedo lograr que aparezca la barra de navegacion en la parte de arriba..podrian ayudarme???

    ResponderEliminar
    Respuestas
    1. Hola Vanesa

      Tu barra superior se ve perfectamente, o al menos, yo así lo veo http://lh6.googleusercontent.com/-cs2H6YOVrxc/UwkJYkrOa0I/AAAAAAAAGjE/0CuWnUaUv0w/s1024/barraSuperior.png

      Puede que sea algún antivirus, bloqueador de Pop-Ups, o algo que tengas instalado en el navegador que bloquea la barra superior, pero no es cosa de la web, es cosa del navegador.7

      Un saludo

      Eliminar
  23. hola, me gustaría poner en mi blog una barra en la parte de arriba en la que se diferentes apartados (contacto, perfil....) te dejo mi blog para que veas a que me refiero: en mi blog aparecen las palabras ( classic, flipcard...) eso es lo que quiero cambiar.
    Este es el blog: favclothes.blogspot.com

    ResponderEliminar
    Respuestas
    1. En realidad esa pregunta no tiene nada que ver con este post. Nosotros hablamos de la barra de blogger.

      Pero contestando, tu estas usando la plantilla de vistas dinámicas (Dynamic Views) de Blogger. Normalmente no solemos usarlas los que modificamos las plantillas porque al usarlas te quitan la mayoría de las opciones. Si en la sección de Diseño del escritorio de tu blog no te permite añadir un gadget de lista de enlaces en el lugar más o menos donde está puesto esa lista, no podrás hacerlo, directamente. No puedo darte muchos datos más, porque jamás he usado ese tipo de plantillas.

      Un Saludo

      Eliminar
  24. como podemos poner música en la barra de navegación

    ResponderEliminar
    Respuestas
    1. La barra de navegación es inmodificable. No se puede tocar más de lo que dice la entrada.

      Otra cosa es que se puedan añadir otras barras arriba o abajo como reproductores, de eso hay muchos, y por eso no te podría recomendar uno, pero haberlos, haylos.

      Eliminar
  25. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar

Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.