Los menús estilo dock son característicos de las computadoras Mac y que son altamente llamativos para el usuario por la forma en que aumentan de tamaño los íconos al pasar el mouse sobre ellos.
¿No sabes de qué hablo? Mira el menú que está abajo de la cabecera de mi blog: http://blogeadores.blogspot.com/
Tiene el dibujo de twiter pero lleva a taringa
Para colocar este menú estilo Dock en tu blog realizamos los siguientes pasos, entra en Diseño > 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'/>
Consejo: Para encontrarlo más rápido usa el buscador de palabras de tu navegador
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="http://3.bp.blogspot.com/_qgZA1ny_dAs/S8yeGOygORI/AAAAAAAAECk/MabUFPSv1CA/s1600/Icon_Home.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeGum8szI/AAAAAAAAEC0/ogrG1G_NSaQ/s1600/Icon_Rss.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUfY2TpI/AAAAAAAAEC8/WLyxFS0Tv9U/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeFsjwO4I/AAAAAAAAECc/URJd0EO38d0/s1600/Icon_Facebook.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://4.bp.blogspot.com/_qgZA1ny_dAs/S8yeGYiAfpI/AAAAAAAAECs/ej5Vj7cAj68/s1600/Icon_Picasa.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUnjJ75I/AAAAAAAAEDE/RkHWNQmOmeE/s1600/Icon_Mail.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeFT8iuqI/AAAAAAAAECU/ZAZaxpJ7j84/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 (URL del enlace) 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.
Si quieren añadir uno más solo copien y peguen esto una vez mas:
<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUfY2TpI/AAAAAAAAEC8/WLyxFS0Tv9U/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>
Pueden revisar el código y hacer los cambios que ustedes quieren como este que hice:
(No salió muy bonito que digamos xD)
Cualquier duda o aprender cosas parecidas entren a mi blog: http://blogeadores.blogspot.com/ o escriban en los comentarios.