En la entrada anterior vimos cómo poner en el blog un menú estilo Dock en el cual los íconos se agrandan al pasar el cursor sobre ellos.
Los fanáticos de Mac querrán tener la opción de colocar este menú en la parte inferior del blog, tal como se vería en un equipo Mac. Así que ajustando los estilos del CSS se puede poner el menú en la parte inferior en forma estática, es decir, que aunque se baje el scroll de la página el menú no se moverá de lugar.
Puedes ver un ejemplo en este blog de pruebas.
Para colocar este menú estilo Dock en tu blog repetimos los mismos pasos, entra en Plantilla | Edición de HTML y después de <head> pega esto:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
< script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>
Ahora pega antes de ]]></b:skin> lo siguiente:
/* Menu Dock
----------------------------------------------- */
.dock {
position: fixed;
width: 100%;
bottom: 40px;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.dockItem img {
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
position: absolute;
}
Por último busca la etiqueta </body> y antes de ella pega esto:
<div id="dock" class="dock">
< div class="dockContainter">
< a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJXuQ23xN55UIKogKvEGygMM3MtjtN6b73gwelHpE7OU0b30DbWxRbN3TSF-aoHAOgx_hvVrllNkvyBGU1KI1p_CelIaFMvJXJLabMDPK0rKFB1kfWxCTTa4Fc23PQ8emsrEIExrcH2mA/s1600/Icon_Home.PNG"/><span>Título del enlace</span></a>
< a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmzQlk2d7-Qp9-PKc7eO1xvVNIu0-gg9ISYD6c2iLQ5h6O2HF_tS8c0-pICbTSz2VDUZ0NWgn1BtUGRgxMDFwNXh5Aj1aKrFKgHEGh9d87cS-VLNagyxh9sAWcf5VPRINqd6a5Y-fMhA/s1600/Icon_Rss.PNG"/><span>Título del enlace</span></a>
< a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzq9sY4KwdFhdFwTCwi5jfLrz_oF-1MuCEHLETKl38CedjIQE2ZEO8KJDYph6KlmRlOjq2H3dxggVlWqDdnFBzwbf4cW0A84qI52q3BdVlZ93BTdpgpc59jI-JYyIlCAxY56Yn2bGIG38/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>
< a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi135s6C7Gx9RKLeku0RG1H3GMe1uIXS6XUbVbIduxy-kr5bFSNhKRjLZOyr1ppDTtzRxcFRXU-zJUeviGCbpyUpglLhFP-ntnPrYwigmkbP60i9MRYPMRkLurVnTtV_iNmsJ09I6IoTGI/s1600/Icon_Facebook.PNG"/><span>Título del enlace</span></a>
< a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzA4d1G-nhZVUk7_ts_FTVsPqGwOp4DFokwpq2leIg9pDxPasFFBYzz7qZjxn0AycyZridltZCRvfovizwb99EtGnARaXgOGiYI6raGPz7SVKkOBLzxWXHJXudSfV6eJ2SuBNaD922ECI/s1600/Icon_Picasa.PNG"/><span>Título del enlace</span></a>
< a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaikPZfsjLSXMlRFZzYSj6HEJL5bfETwU3bLwAH3y5uyDbckwG4RLkz4kOnqWTXK5UiyIHCIHwyy9v915_30hITwEVuQGpx_zLUdED7P7vF-SV_-iMStPdW1Fn4vq6PC-iPrqeCYcwOuM/s1600/Icon_Mail.png"/><span>Título del enlace</span></a>
< a class="dockItem" href="URL del enlace"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJonRUajJ-jbXqgI_SIOEA9y9gzm4ZupA05IXIyotvV-3pfyqDNSerkxZplMXBxIXt-jeoV5kjZ8MtDvUki8Az6DTQEYfrcBYgzM8RZveubn1uqIdLOYAHFEwCLh6pCGajK-bacfFWctA/s1600/Icon_Help.png"/><span>Título del enlace</span></a>
< /div>
< /div>
< script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)
}
);
< /script>
Cambia las URL y los títulos de los enlaces donde se indica y estarás listo para disfrutar de este menú estilo Dock en la parte de abajo de tu blog.
Nota que el efecto no se pierde, es decir, en el menú anterior los íconos se agrandan y deslizan hacia abajo al pasar el cursor sobre ellos, en éste, los íconos se agrandan y deslizan hacia arriba, de esta forma los íconos no se cortan.
Para saber cómo agregar más íconos o modificar el tamaño de ellos visita la entrada anterior.
IMPORTANTE: Este menú no funciona en blogs con dominio propio. Si usas un dominio propio deberás descargar los archivos y alojarlos en otro sitio que no sea Google Sites.
Ver también | Parte 1
0 comentarios:
Publicar un comentario
¡Gracias por comentar!