Menú lateral fijo en Blogger

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.

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:

#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;
}

4. Ahora buscamos el siguiente código:

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

5. Y debajo de ese código colocamos el siguiente:

<div id='menulateral'>
 <span>
 <a href='http://TUBLOG.blogspot.com/' style='border:0;' title='Inicio'><img alt='Inicio' class='menulateral' src='https://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='https://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='https://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='https://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='https://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.

6. Guarda y ¡listo!