Menú lateral fijo en Blogger
Mayo 28th, 2007 | Publicado por Francisco en Blogger | 26 Comentarios
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.
Mayo 28th, 2007 a las 11:53 pm (#)
Hola, muy buena la barra, pero en Firefox no se visualiza bien, porias decirme como se soluciona eso? gracias
Mayo 29th, 2007 a las 2:01 am (#)
Hola Diego!
Yo la probe en firefox y me funciono, cual es el error que te sale?
Saludos!
Mayo 29th, 2007 a las 1:35 pm (#)
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
Mayo 29th, 2007 a las 5:30 pm (#)
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!
Mayo 29th, 2007 a las 8:25 pm (#)
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.
Mayo 29th, 2007 a las 9:18 pm (#)
a mi tampoco me aparece flotante
Muy buena la pagina
Mayo 29th, 2007 a las 9:20 pm (#)
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!
Junio 5th, 2007 a las 1:40 pm (#)
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
Junio 6th, 2007 a las 7:20 pm (#)
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.
Junio 6th, 2007 a las 10:50 pm (#)
OK pondre los credi… en icono… gracias
Julio 27th, 2007 a las 1:18 pm (#)
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
Julio 28th, 2007 a las 5:40 pm (#)
Esa es la intención Javier!
jejeje un saludo!
Agosto 9th, 2007 a las 10:45 am (#)
Muy buena, gracias
Agosto 24th, 2007 a las 1:11 pm (#)
Como podría colocar estae menu en la Plantilla blogy-illacrimo (la cual descarge de aqui) por favor… gracias
Agosto 24th, 2007 a las 1:12 pm (#)
agradeceria si me respondieras a mi correo… uchas gracias
Agosto 25th, 2007 a las 2:52 am (#)
talquino, el proceso que se describe arriba es igual para la Plantilla blogy-illacrimo.
Agosto 30th, 2007 a las 4:54 am (#)
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?
Septiembre 18th, 2007 a las 10:25 pm (#)
Buenísimo, muchas gracias
Octubre 1st, 2007 a las 6:49 am (#)
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
Octubre 1st, 2007 a las 12:18 pm (#)
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!
Octubre 10th, 2007 a las 11:13 am (#)
hey mr ! may I translate some articles [in] this blog to indonesia ( my country ) ?
Octubre 10th, 2007 a las 11:14 pm (#)
jaloe, you can, but a link to blogandweb is necesary.
Regards!
Noviembre 26th, 2007 a las 7:17 pm (#)
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.
Marzo 4th, 2008 a las 1:45 am (#)
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
Abril 27th, 2008 a las 10:19 pm (#)
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)
Julio 20th, 2008 a las 1:03 pm (#)
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