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.
- 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”.
- 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.
- Y justo arriba coloca:
- Ahora buscamos el siguiente código:
- Y debajo de ese código colocamos el siguiente:
- Guarda y ¡listo!
#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;
}<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.
<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.
Hola, muy buena la barra, pero en Firefox no se visualiza bien, porias decirme como se soluciona eso? gracias
Hola Diego!
Yo la probe en firefox y me funciono, cual es el error que te sale?
Saludos!
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
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!
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.
a mi tampoco me aparece flotante
Muy buena la pagina
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!
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
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.
OK pondre los credi… en icono… gracias
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
Esa es la intención Javier!
jejeje un saludo!
Muy buena, gracias
Como podría colocar estae menu en la Plantilla blogy-illacrimo (la cual descarge de aqui) por favor… gracias
agradeceria si me respondieras a mi correo… uchas gracias
talquino, el proceso que se describe arriba es igual para la Plantilla blogy-illacrimo.
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?
Buenísimo, muchas gracias
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
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!
hey mr ! may I translate some articles [in] this blog to indonesia ( my country ) ?
jaloe, you can, but a link to blogandweb is necesary.
Regards!
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.
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
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)
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