Menú fijo lateral

 Menú vertical que permanece fijo en un lado.
El título dice algo de este maravilloso truco que puedes aplicar a tu blog en unos simples pasos. Se trata de un menú vertical con iconos muy lindos, que permanece fijo en un lateral del blog, es decir, el menú nunca se moverá, aunque bajemos al final del blog, el menú sigue en el lado.

Si quieres añadirlo en tu blog, sigue los pasos:

Diseño>edición HMTL>expandimos artilugios
Buscamos la etiqueta ]]</b:skin> y antes de ella le añadimos este código:

/* 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;
}

Lo normal es no tener que modificar ningún valor, pero si necesitas editarlos, puedes cambiar lo que quieras.

Guardamos cambios.

Diseño>añadir gadget (elemento de pagina)>html-javascript

Pegas el código:

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

Ahora rellena los datos necesarios, como "URL ENLACE" (La dirección) "DESCRIPCIÓN" Lo que aparecerá al poner el ratón encima, "URL IMAGEN ICONO" La dirección de tu imagen o icono.


Visto en elescaparatederosa pero editado por Jaime Trujillo Escobedo

0 comentarios:

Publicar un comentario

¡Gracias por comentar!

Related Posts Plugin for WordPress, Blogger...