English Português

La navegación de nuestro web o blog es un importante aspecto a cuidar, los menús son elemento importante de esta y aquí te mostraremos como colocar en tu web o blog un menú lateral fijo, es decir, que al bajar el scroll el menú continua en la misma posición.

El menú del que te hablamos es muy popular en blogs, además de práctico. Puedes verlo en la siguiente imagen.

menu lateral blogger

  1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.
  2. Buscamos el siguiente código:
    ]]></b:skin>

    Para otros sistemas de blog diferente a blogger o en una web, ubica el lugar de tus estilos o tu archivo CSS.

  3. Y justo arriba coloca:
  4. #menulateral{
       position:fixed;
       text-align:left;
    
    /*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
             margin-top:100px;
       margin-left:-28px;
    }
    
    * html #menulateral{  /*para IE*/
     position:absolute;
     }
    
    #menulateral a img{
     opacity:1;
     -moz-opacity:1;
     filter:alpha(Opacity=100);
    }
    
    #menulateral a:hover img{
     opacity:0.8;
     -moz-opacity:0.8;
     filter:alpha(Opacity=80);
     position:relative;top:0px;left:2px;
    }
    
    * html #menulateral a img{
     filter:alpha(Opacity=100);
     }
    
    #menulateral img{
     margin-bottom: -5px;
     }
    
    * html .menulateral{
     margin-bottom: -3px;
    }
  5. Ahora buscamos el siguiente código:
  6. <div id='content-wrapper'>

    Para algunas plantillas podría ser mejor ubicar “<div id=’outer-wrapper’><div id=’wrap2′>”. Para otros sistemas de blog o en una web ubica el div del contenedor principal.

  7. Y debajo de ese código colocamos el siguiente:
  8. <div id='menulateral'>
     <span>
     <a href='http://TUBLOG.blogspot.com/' style='border:0;' title='Inicio'><img alt='Inicio' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya1AI/AAAAAAAABoI/6EXVwJ-0xxc/s1600/menu-lateral-inicio.png'/></a>
     <br/><a href='#BlogArchive1' style='border:0;' title='Archivo'><img alt='Archivo' src='http://bp2.blogger.com/_Zuzii37VUO4/RlpT2Jya08I/AAAAAAAABno/fEetH56Ftgw/s1600/menu-lateral-archivo.png'/></a>
     <br/><a href='mailto:TU-MAIL@servidor.com' style='border:0;' title='Contactame'><img alt='Contactame' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0-I/AAAAAAAABn4/F5Ax7A_8rLA/s1600/menu-lateral-contacto.png'/></a>
     <br/><a href='http://TUBLOG.blogspot.com/feeds/posts/default' style='border:0;' title='Suscribete a nuestro Feed'><img alt='Suscribete a nuestro Feed' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0_I/AAAAAAAABoA/HgSHFryV6kc/s1600/menu-lateral-feed.png'/></a>
     <br/><a href='#' style='border:0;' title='Arriba'><img alt='Arriba"' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya09I/AAAAAAAABnw/38HqImjH21E/s1600/menu-lateral-arriba.png'/></a>
     </span>
    </div>

    En ese código haz las sustituciones siguientes:

    “http://TUBLOG.blogspot.com/” – Por la dirección de tu blog.
    “TU-MAIL@servidor.com” – Por tu dirección de correo
    “http://TUBLOG.blogspot.com/feeds/posts/default” – Sustituye “TUBLOG” por esa parte de la dirección de tu blog.

  9. Guarda y ¡listo!
Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Diego / Hace 10 años /

      Hola, muy buena la barra, pero en Firefox no se visualiza bien, porias decirme como se soluciona eso? gracias

      Responder a Diego →
    2. Francisco / Hace 10 años /

      Hola Diego!

      Yo la probe en firefox y me funciono, cual es el error que te sale?

      Saludos!

      Responder a Francisco →
    3. Anonymous / Hace 10 años /

      Aparece escondida en el lado izquierdo de la ventana del navegador, osea que no se visualiza. en internet explorer aparece visible sin problemas, tengo firefox 2.0

      Responder a Anonymous →
    4. Francisco / Hace 10 años /

      Entonces es por la plantilla, prueba colocando el código del paso 5 bajo:

      <div id='outer-wrapper'><div id='wrap2'>

      Como se señala en el artículo. Si esto no funcionara cambia los valores de padding en el codigo de CSS del paso 3 (también viene señalado), donde dice:

      /*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
      margin-top:100px;
      margin-left:-28px;
      }

      Como todas las plantillas son diferentes a veces cambia un poco la forma de ubicar el menú, pero el resto es lo mismo

      Saludos!

      Responder a Francisco →
    5. enrique / Hace 10 años /

      A mi me aparece correctamente pero no se mantiene flotante, como creo entender según la explicación. Es decir, que sube y baja fija, como cualquier otro elemento de la página.
      En fin, no sé a qué se deberá eso. Gracias.

      Responder a enrique →
    6. ELMOREA / Hace 10 años /

      a mi tampoco me aparece flotante
      Muy buena la pagina

      Responder a ELMOREA →
    7. Francisco / Hace 10 años /

      Que tal?

      Si, seguramente es que el código (paso 5) no esta en el contenedor principal de tu plantilla, como menciono en el artículo, prueba en

      <div id='content-wrapper'>

      y

      <div id='outer-wrapper'><div id='wrap2'>

      Que solo los contenedores más comunes de las plantillas en blogger, pero que varia de acuerdo de cual se trata.

      Saludos!

      Responder a Francisco →
    8. Jpapollo / Hace 10 años /

      tengo una duda… funciona bien, pero en IE se queda quieto? y en firefox si baja… como hago para q se quede fija ambas? no se mueve… o q se muevan en ambos…

      Espero comentario

      Responder a Jpapollo →
    9. Francisco / Hace 10 años /

      El /(&%$ IE tiene problemas con la posición y no puede hacer la posicion fija (al menos no de este modo), si quieres que se quede arriba en ambos cambia:

      position:fixed;

      por:

      position:absolute;

      Saludos!

      PD: Por cierto, te agredeceria mucho pusieras de nuevo los creditos en la plantilla.

      Responder a Francisco →
    10. Jpapollo / Hace 10 años /

      OK pondre los credi… en icono… gracias

      Responder a Jpapollo →
    11. Javier_7726 / Hace 10 años /

      perfecto ahora ya hasta tengo mi menu fijo jaja gracias me encanta esta web…
      chekala y tengo todo tuyo o sea de esta Web jaja

      Responder a Javier_7726 →
    12. Francisco / Hace 10 años /

      Esa es la intención Javier! 😉 jejeje un saludo!

      Responder a Francisco →
    13. Charly / Hace 10 años /

      Muy buena, gracias

      Responder a Charly →
    14. talquino / Hace 10 años /

      Como podría colocar estae menu en la Plantilla blogy-illacrimo (la cual descarge de aqui) por favor… gracias

      Responder a talquino →
    15. talquino / Hace 10 años /

      agradeceria si me respondieras a mi correo… uchas gracias

      Responder a talquino →
    16. Francisco / Hace 10 años /

      talquino, el proceso que se describe arriba es igual para la Plantilla blogy-illacrimo.

      Responder a Francisco →
    17. Rubén / Hace 10 años /

      Gracias a este tutorial yo también he podido situar esta útil barra lateral.

      Lo único que me hubiera gustado hacer algo mas ancho el espacio total de la misma. Sabéis qué parámetro debo corregir?

      Responder a Rubén →
    18. Cristian Muñoz / Hace 10 años /

      Buenísimo, muchas gracias

      Responder a Cristian Muñoz →
    19. Lucía / Hace 10 años /

      Pues nada, yo por mucho que he modificado los parámetros de tamaño no la veo por ningún lado …

      No sé si me podeis echar una mano…

      Gracias

      Responder a Lucía →
    20. Francisco / Hace 10 años /

      Hola!

      No hay parámetros de tamaño porque se adapta al tamaño de las imágenes declaradas en el paso 5, si quieren sea más ancho pueden poner imágenes más grandes o agregar un width (ancho) en #menulateral.

      Un saludo!

      Responder a Francisco →
    21. jaloe / Hace 10 años /

      hey mr ! may I translate some articles [in] this blog to indonesia ( my country ) ?

      Responder a jaloe →
    22. Francisco / Hace 10 años /

      jaloe, you can, but a link to blogandweb is necesary.

      Regards!

      Responder a Francisco →
    23. sbg / Hace 10 años /

      Con Internet Explorer mi barra aparece en medio de la pagina pero no se mueve al bajar (por lo menos algo bueno).
      En Firefox funciona perfectamente.

      Responder a sbg →
    24. quenas27 / Hace 10 años /

      He probado todo lo que has dicho en los post anteriores y en Firefox no me queda flotante, al bajas con el scroll el menu se queda pegado arriba y no va bajando.

      Si me puedes ayudar.

      Gracias

      Responder a quenas27 →
    25. elpatois / Hace 10 años /

      hoal sme sirvio ya que lo buscaba

      en ie me funcionaba en firefox ni lo visualisaba

      pero le cambie los valosres

      valores originales

      /*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
      margin-top:100px;
      margin-left:-28px;

      valores cambiados

      /*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
      margin-top:100px;
      margin-left:-5px;

      ( con esos valores se ve perfecto)

      Responder a elpatois →
    26. kelvin / Hace 9 años /

      hola, mi problema es el siguiente, no se si me pueden ayudar:
      en esta direccion http://www.cerutti.cl/prueba yo nesecito que el menu izquierdo que esta hecho en flash y el superior con sus respectivas imagenes se mantenga fijo para todas las paginas es decir que no carge cada vez que linkeo y que solo carge el contenido de la mismapero no se como hacerlo, hice include de todos estos es decir los menus e imagenes pero resulto mas lento.

      les agradeceria su ayuda ya que es un tanto urgente para mi.

      esta hecho en php gracias

      Responder a kelvin →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad