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!
Google despide a empleado por manifestarse contra el genocidio de Israel
Google despidió al valiente empleado de Google cloud que se manifestó
pacíficamente durante la presentación, en Nueva York, de un ejecutivo de la
sede de e...
6 comentarios:
buen articulo http://www.bosseo.com
Seo, te refieres a esta entrada? ;) Si es eso, gracias!
http://narutoraw.blogspot.com
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.
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!!
Publicar un comentario