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:
Tiene el dibujo de twiter pero lleva a taringa :D
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'/>
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/AVvXsEi1eZ3wrqBAq0atnHR6I3kajkjx-tOZJFtSROVQaYkL44x2BL71_HJi7t97WhOWgsvy0z2hXt_Wg2GAhFwgq-4TzeY6gwHeq73vy8yxiwCxw4vYi1FE15X9MtRdW1ijLvN02-0w985UjSk/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/AVvXsEjNIfLEszLI-Ua7VwCUx2l3CEJe2VVWem0F9IAD8hNenQI80IQJPXSfdZQZk43OhEbE4h71NEXVfgDuNFQFjjGhIym-Wrm7vtO94kRccRnraltXW3wlRjIxB1x7m15l2lmKvRS2yJkVE0g/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/AVvXsEjfb8YpqvMKqpLhtQqXyD2GfVXqkJaLzJX_fxX_LBy85v7GHF1LaND2pD5jsxBpXAxUwpiolFDEurXKJyLQTVZxuEujtDWKwFKvEEPhwkH-FTQhHEb4BQ19rjYBJDUDGzQQyP5vxDO9H88/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/AVvXsEgsNEdcvM790dloObtwmBEIQaIAFzqvJUR2XZhMzAblao5Lu8he0eDIxBu04AO05gW1C8F2Th7WrCzEfoWSh9SowVXDCsPjuRDStxzyJ8OqojsK8YWx6OqShtMXD7mwZq6F8HEOE7AROLo/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/AVvXsEgeXkarUCz2hfk6W71qmXkfNxyVzUfRTgpNDKUrdHiRyr4Uf6-XtBOkIRSOKMVSeTfF-5tiB49suMxYlUZS9bC1Q19GyzaZM2yShfhVWZfKpoyUffX_Qclg6fSYtbsMrw9zRO5kW0Yc-wY/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/AVvXsEjV6rrQc-xMvzZFK1C093skwdxAJ_kUqvzs52AVlHxaAHAxUaz_Laj4OzBcoudhy9QX3jWUa4P-Ep3cqvOeHphrlTEiwLPR1wHRNp2oY2uEEs-a8tuwARig34qTHgSBubo_xjgaUBrWrzA/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/AVvXsEgDKxcR6zM9m1GKgMHFyVNPJ7vKo_WDiriC93djWKob009tqMxPZgiuQWuiprNOOJ80ygaQ0pDfJeCClF5MXOMU765bJSfGrQvf4v0W-SQj1K4OJBAvmubV5yvbRbvZeBweLW_fVyfOUhU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfb8YpqvMKqpLhtQqXyD2GfVXqkJaLzJX_fxX_LBy85v7GHF1LaND2pD5jsxBpXAxUwpiolFDEurXKJyLQTVZxuEujtDWKwFKvEEPhwkH-FTQhHEb4BQ19rjYBJDUDGzQQyP5vxDO9H88/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 que tengan no duden en hacerla en los comentarios o en el chat.
IMPORTANTE: Este menú no funciona en blogs con dominio propio.
tengo una duda y es que como as exo para subir el dock un poco para que se vea la letra? porfavor necesito ese dato un saludo.
ResponderEliminarhola sabes como tener el Menú estilo dock en webs.com
ResponderEliminargracias¡¡¡¡¡