Cargando...
Meta microcosmos: Menú lateral flotante
BIENVENIDO AL META!!!

Espero que algo de lo que encuentres en tu visita te sirva para mejorar y personalizar tu blog.
Para encontrar más trucos prueba con las pestañas situadas justo encima de estas líneas, usa el buscador de trucos que hay a la derecha o navega por las categorías que encontrarás en la sidebar bajo el título "Aquí encontrarás".
Si tienes cualquier duda, puedes preguntarme sobre lo que desees en un comentario e intentaré ayudarte lo antes posible.
Y si algo te ha sido útil, déjame igualmente un comentario y me encantará ver el truco implementado en tu blog!

Menú lateral flotante

Entre las explicaciones de El Escaparate y las de Blog&Web he añadido un menú lateral flotante que me gusta bastante. En sólo dos pasos:

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. Vamos a Plantilla, Edición de HTML, expandimos artilugios y buscamos esta línea:
]]></b:skin>
Justo encima pegamos el siguiente código:
/* 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;
}

Y guardamos cambios.

Segundo paso, añadir un nuevo elemento HTML-Javascript; para ello buscamos esta línea:
<div id='content-wrapper'>
Y justo debajo pegamos este código:
<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>

He copiado literalmente el código para el menú de Rosa porque ella tiene más opciones que yo he eliminado, aunque si os fijais en la estructura es fácil añadir o quitar botones, moverlos de posición... Ahora teneis que repasar cuidadosamente el código para sustituir los datos del blog de Rosa por los de vuestro blog.
También se pueden cambiar los iconos, pero deben ser todos del mismo tamaño, que en este caso es 22x22.
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 de mi blog y el elemento 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 y cuando esté a vuestro gusto, guardais cambios y listo!

6 comentarios:

Anónimo dijo...

buen articulo http://www.bosseo.com

Yo misma dijo...

Seo, te refieres a esta entrada? ;) Si es eso, gracias!

Anónimo dijo...

http://narutoraw.blogspot.com

Anónimo dijo...

The 25-year-old has previously claimed Tottenham have approached his agent,Online Bingo and he did no harm to his chances of impressing with Twente's second goal in the 2-2 draw with Benfica.According to reports in Holland,sbobet Redknapp had been due to watch Ruiz in action during Saturday's encounter with AZ Alkmaar.

Otto la piloto dijo...

Hola,
no encuentro la línea content-wrapper
he buscado así, con todos los símbolos, o con sólo un de las palabras, pero nada! puedes ayudarme?? graacias!!

Carlos Escamilla dijo...
Este comentario ha sido eliminado por el autor.

Publicar un comentario

ENTRADAS MÁS POPULARES