MENU LATERA FLOTANTE

Esto lo encontre en La Blogueria y me gusto yo lo uso y lo comparto para que lo coloquen tambien en el suyo....

Este menú fijo, que queda siempre a la vista cuando se baja la página, se lo tenemos que agradecer a El Escaparate de Rosa, y mucho. Es útil, práctico y bonito, y muy fácil de aplicar y personalizar.

Muestro el original de Rosa, para que veas el partido que se le puede sacar. Así se ve en El Escaparate:



Al pasar el cursor sobre los iconos veremos la descripción del enlace; además Rosa les ha aplicado un efecto de movimiento. Agarra un set de iconos, y vamos a hacernos el menú.

* Busca en tu plantilla ]]</b:skin> y añade antes:

  /* Menu Flotante
   ---------------------------------------------
   */
   #MenuIcon{
   position:fixed;
   text-align:left;
   /* Modica estos valores de abajo para ajustar la posicion del menu */
   margin-top:0px;
   margin-left:-35px;
   }

   * html #MenuIcon{ /*IE only*/
   position:absolute;
   }

   #MenuIcon a img{
   opacity:1;
   -moz-opacity:1;
   filter:alpha(Opacity=100);
   }

   #MenuIcon a:hover img{
   opacity:0.8;
   -moz-opacity:0.8;
   filter:alpha(Opacity=80);
   position:relative;top:0px;left:2px;
   }

   * html #MenuIcon a img{
   filter:alpha(Opacity=100);
   }

   #MenuIcon img{
   margin-bottom: -3px;
   }

   * html .MenuIcon{
   margin-bottom: -3px;
   }

Configura los valores si fuera necesario (en mi caso, no lo fue, se ajustó perfectamente tal cual, al colocarlo justo sobre las entradas).


* Ahora añadimos lo siguiente como un elemento HTML/javascript, que colocaremos encima de las entradas o debajo de la cabecera para que los valores de posición relativa tengan el efecto deseado (siempre puedes modificarlos en la línea del CSS que se indica en el código arriba).

<div id="MenuIcon">
   <span>
   <a style="border:0;" href="URL ENLACE" rel="external" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
   <br/>
   <a style="border:0;" href="URL ENLACE" rel="external" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
   <br/>
   <a style="border:0;" href="URL ENLACE" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
   <br/>
   <a style="border:0;" href="URL ENLACE" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
   <br/>
   <a style="border:0;" href="URL ENLACE" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
   </span>
   </div>

Añade las URLs correspondientes y la descripción que aparecerá al pasar el cursor sobre el icono. Puedes añadir cuantos iconos/enlaces desees con solo copiar y pegar más líneas.