Menú flotante del Escaparate

Con poco trabajo podemos conseguir un menú flotante a la izquierda o ala dercha de nuestro blog, que se mantiene fijo en la pantalla mientras subimos y bajamos la página.

Podéis ver un ejemplo en este blog de pruebas a la derecha del cuerpo del blog.

[1] En primer lugar añadimos en el CSS de nuestra plantilla el código necesario para controlar el menú, y que se muestre con los efectos que queremos. Puede colocarse donde mejor nos parezca,pero como siempre os digo, ante la duda, lo pegamos justo encima de: ]]></b:skin>.

/* Scroll MenuIcon
---------------------------------------------
*/
#MenuIcon{
position:fixed;
text-align:left;
/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
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;
}

Guardamos cambios.

[2] Una vez añadido el CSS vamos a la parte de editar de nuestra plantilla y añadimos un nuevo elemento HTML-Javascript, donde pegamos el código para el menú y lo arrastramos después sobre las entradas o debajo de la cabecera:

<div id="MenuIcon">
<span>
<a style="border:0;" href="http://elescaparatederosa.blogspot.com" rel="external" title="VOLVER AL INICIO"><img alt="Home" src="http://img114.imageshack.us/img114/5226/homeuo9.jpg" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://www.blogger.com/profile/06743611108067453905" rel="external" title="SOBRE MI"><img alt="Home" src="http://img114.imageshack.us/img114/2736/yonh9.png" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="mailto:lejaniaimposible@hotmail.com" title="CONTACTAME"><img alt="Contactar al Autor" src="http://img114.imageshack.us/img114/118/mailforwardgr2.png" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://feeds.feedburner.com/blogspot/hnBy" title="SUSCRIBIR A EL ESCAPARATE"><img alt="Subscribe a El Escaparate" src="http://img69.imageshack.us/img69/29/iconosrssea0.jpg" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://elescaparatederosa.blogspot.com/2007/01/ranking-de-comentarios-en-el-escaparate.
html" title="RANKING DE COMENTARIOS"><img alt="Comentarios del Escaparate" src="
http://img114.imageshack.us/img114/9202/yellowgelfh3.gif" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999" title="VER TODOS LOS POST DEL ESCAPARATE"><img alt="Entradas del Escaparate" src="http://img503.imageshack.us/img503/3457/eye1yl9.png" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://elescaparatederosa.blogspot.com/2007/09/me-han-nominado.html" title="GALARDONES AL ESCAPARATE"><img alt="Premios del Escaparate" src="http://img210.imageshack.us/img210/296/ganadorescomercialrn5ui0.gif" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="# " title="IR ARRIBA"><img alt=" ir arriba" src="http://img69.imageshack.us/img69/1295/flecha12zi1.jpg" class="MenuIcon"/></a>
</span>
</div>

Notas:
He puesto el código tal cual está el del Escaparate, fijaros bien donde tenéis que colocar vuestros propios datos. ¡Es fácil!

Lo que está escrito con letras mayúsculas, es el texto que se leerá cuando pasemos el ratón sobre cada uno de los iconos.

Podéis usar mis iconos si queréis y si vais a usar otros procurad que todos tengan el mismo tamaño.

Donde se lee esta frase en el código: /*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */ cambiáis los valores si el menú queda muy arriba o muy abajo. Tal cual está son los valores para ver el menú a la izquierda del blog y el gadget con el código lo he puesto debajo de la cabecera, pero en cada caso el resultado será distinto, dependiendo del tamaño del "cuerpo" del blog.

Usad la vista previa para evitar sorpresas.