Y Bueno, esto me pudo, extraño montones el contacto con la blogoesfera, asi que estoy impulsando un nuevo proyecto, por lo que este es un aviso, KEY TRUCOS no va mas, ahora todos a KEY TOTAL Magazine, a full a partir del 8/4/2011. Los espero !!!! .... (PROBLEMAS CON VARIOS LINKS, SCRIPTS ETC. PACIENCIA) ^_^
PREMIOS
Visiten Garilandia !!! • Importante !!! Leer sobre VillaRochel ^_^
Aportes varios CARATULWORLDZilfarionTutoriales Wed • Cabecera de OLOMAN

Menu fijo

. 30.8.07
  • Agregar a Technorati
  • Agregar a Del.icio.us
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks
  • Enviar a Ayuda Blogs

Hace un tiempo me encontré con este truco en el blog de Yolanda, se trata de un menú lateral fijo, que al bajar por la página con el scroll, el menú continúa en la misma posición. (Sólo en Firefox, en IE queda fijo)
El menú consta de inicio, email, botón hacia arriba, archivo y feed.
Lo pueden ver en el costado izquierdo del blog, pero como no se ve bien en IE lo tendré por unos días nada mas.
Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^


Para configurarlo es muy simple:
Nos dirijimos a Plantilla/Edición de HTML y buscamos el siguiente código:

]]></b:skin>

Justo antes de esto colocamos:

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

Ahora buscamos el siguiente código:

<div id="content-wrapper">

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGnCQaMA0k3hkNjWyFE5lRcb0qKUgbVYtcBsjAri5zC3z1JzKckSGi9Q7vsYJdzb1DZNaDQjqdG1qvqnYFlngnxUuq4GHHH09fsVW96NjhbLTQr_rVYuqW-IKusBjpxKt_WS0qzNyv8mM/s1600/menu-lateral-inicio.png'/></a>
<br/>
<a href='#BlogArchive1' style='border:0;' title='Archivo'><img alt='Archivo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsZMHgUmpCRWOJyMR-F6PTsbaUImw3-im5cF4lebsCV-3BAoy9g1hxqNclXIxtZL-3HbZm3tCgbTpe_ggdHi4HUOsbMczCF3vaw9WOhVOcDrOtn1w24Xd33nVuap742aDAFxW2SR7P0Ew/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbupXeEvWo57-48m_L44JcAn0l0zj2B3__pxLlXaKygci2iGIS7YqaznCQ9FpMiuQQt9SwGxevwHkbKUk_8NITlJSHoLwFAktf5YzWs8w5XxNw5PHQnIvO8zEnMxdvMGtuYBTpg4P3YeU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz19laEo7aiq_LX-IqB10K3zqgmgCsB-oaUVWb7_un0PZOvMee_eiyHKkILETrmBg3KNxqKghbJvnLLb8aPuQJU8gVz25GELIvgNiMlDdiE1SCE6lK3-qotqOPv1trk4nGznsjFUsThXg/s1600/menu-lateral-feed.png'/></a>
<br/>
<a href='#' style='border:0;' title='Arriba'><img alt='Arriba"' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGDL4Sl-9ozZTJ6vjhIr8De6TiFcSDA-aNpz-r8x3HMlrLPdUt__sXAGwjkDsiAQ-coG4yvVA-aEJiC1glM4dqWIGtglyi0QJ9_NxDay91RUHmasIqlunSdSmVTUDa2_9wgJ2OkyPwlUg/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>

En este código tenés que cambiar lo que está en negrita

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 - Por la dirección de tu feed

Guardás los cambios y pronto, como ya dije yo lo tendré unos días nada más.
Camila espero que te sirva esta explicación, y que te quede bien ^_^

Actualización 28/09/07
No todas las plantillas son iguales...
Teniendo en cuenta esto paso a comentar: para aquellos que no encuentran en sus plantillas <div id="content-wrapper"> ó <div id='content-wrapper'>, pueden colocarlo el código debajo <div id=outer-wrapper'><div id='wrap2'> ó debajo del div del contenedor principal.
También pueden probar con el método que propone Rosa en su blog, que podría resultarles más fácil.
De todos modos aclaro, pueden ir probando y viendo con la vista previa antes de guardar, y siempre recuerden que solo con Firefox tiene el efecto de scroll.
Gracias Birtha por el aporte.
Seguir Leyendo...[+/-]