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/03/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: 250;

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.

15 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/

    ResponderSuprimir
  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

    ResponderSuprimir
  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

    ResponderSuprimir
  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

    ResponderSuprimir
  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)

    ResponderSuprimir
  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!

    ResponderSuprimir
  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

    ResponderSuprimir
  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.

    ResponderSuprimir
  9. Bienvenido HerediaJan 14, 2012 07:21 AM

    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

    ResponderSuprimir
  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 ;)

    ResponderSuprimir
  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...

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

    ResponderSuprimir
  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

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

    ResponderSuprimir
    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.

      Suprimir

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