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 este blog de pruebas.
Está hecho con JQuery por lo que la Lista de seguidores no se verá afectada, sólo ten en cuenta que si tienes varios scripts para formar marquesinas el menú no funcionará.
<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 antes de ]]></b:skin> pega lo siguiente:
/* Menu Dock
----------------------------------------------- */
.dock {
text-align: center;
height: 60px;
position: relative;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.dockItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
Por último, en un elemento HTML/Javascript pega el código del menú:
<div id="dock" class="dock">
<div class="dockContainter">
<a class="dockItem" href="URL del enlace"><img src="http://img686.imageshack.us/img686/261/iconhome.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://img412.imageshack.us/img412/2995/iconrss.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://img695.imageshack.us/img695/3296/icontwitter.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://img412.imageshack.us/img412/1619/iconfacebook.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://img412.imageshack.us/img412/946/iconpicasa.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://img412.imageshack.us/img412/7628/icon009.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://img695.imageshack.us/img695/2604/iconhelp.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 del enlace donde se indica, así como los títulos de cada enlace.
El menú lo hice para 6 íconos pero puedes agregar más si lo deseas, sólo agrega una línea como esta:
<a class="dockItem" href="URL del enlace"><img src="http://img695.imageshack.us/img695/2604/iconhelp.png"/><span>Título del enlace</span></a>
maxWidth: 90, es el tamaño del ícono cuando el cursor pasa sobre él.
itemWidth: 60, es el tamaño del ícono en estado normal.
Ambos los puedes cambiar por el valor que quieras. Si quieres cambiar los íconos sólo remplaza las URL de las imágenes por las tuyas.
Una vez que hayas colocado el menú en el elemento HTML/Javascript puedes colocarlo debajo de la cabecera para que luzca mejor.
IMPORTANTE: Este menú no funciona en blogs con dominio propio.
Ver también | Parte 2
Tantos códigos me han dado mucha sed ¿qué tal una cerveza?
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Enviar un correo
¿Dónde estás Superman?
Iconos RSS.PNG)
Música JPZ
79 comentarios:
Potro! quiero informarte de que el blog de pruebas solo es para invitados, abra sido un fallito ;) pero lo puedes correir aun que nadie te lo ha comentado XD
Aver si entiendo lo que es y me entero que estoy un poco perdido =)
Saludos!!
Era para dejarlos en suspenso, jajajaja.
Gracias por avisarme, ya está abierto para todos.
Saludos!
jajaja! que buenoo ;)
lo he pillado a la segunda leida XD
Saludos!
Esta muy bueno!!!
Me encanto,al principio pense k lo hiciste en flash xD
jajajajaja
Siempre tu trayendonos mas cosas Para el Blog.
Eres un genio!! xDjajajaja.
Eres el albert einstein del siglo 21 xD..
jajajjaa.
Bueno continuaria,pero no se meocurren mas alagos.
Chau.
Wow, me quede asombrado cuando vi el blog de pruebas.
En ese momento pense ¿Como no ponerlo?
Saludos.
Quiziera saber ¿Donde encontraste esas buenisimas imagenes?
PepeX, de flash no sabría cómo hacerlo, ahí tú eres el maestro ;)
El Venado, en realidad es un pack de íconos de software que encontré pero no traía los íconos que quería, excepto el del e-mail y de ayuda, así que todos los demás los tuve que hacer yo =)
WoW! de en verdad que te pasaste con este!, me gusto mucho cuando lo vi en el blog de pruevas, vere si mas adelante lo pongo en mi blog.
O_o Wowwwwwwww,,,, que bonito quedaaaa!!! Creo que es mucho mas visto que los Docks que yo conocía (para XP). Aplausos,Aplausos,Aplausos.
Un abrazo!!!!
jR, me alegra que te haya gustado, ojalá te animes a usarlo. Saludos!
brother, siii, yo también los uso en Win7 por lo atractivos que son. Un abrazo!
WOW EN REALIDAD ES ESTUPENDO MAGNIFICO ME ENCANTO GRACIAS POR TAN BUEN POST Y PERDON POR GRITAR TANTO
Ascesino96, definitivamente se pueden hacer cosas increíbles con JQuery. Saludos!
Sergio, gracias por tus comentarios. Un abrazo!
Muy Bueno esto si no lo pierdo de vista y lo voy a usar en todos mis blogs es increible este efecto, fascinante JQUERY me fascina esto me fascino potro tengo que admitir que sabes muchisimo de esto
ok
nos vemos y saludos
HAA
y feliz navidad, y felices fiestas
me podrias pasar la URL o de donde encontraste estoy botones por que estan geniales
digo si se puede
Hola el potro igualmente un abrazo para ti espero estes bien me voy el 23 de diciembre asiq ue Feliz Navidad tambien le pondre el efecto de nieve al blog por que queda muy bien con la plantilla que le puse al blog por las festividades navideñas por que la anterior no me gusto mucho ademas de que era muy complicada de entender sin embargo con la nueva me ha sido mucho mas facil he incluso cambie el menu que traia por este hecho por ti Gracias y de nueva cuenta un abrazo
http://clanrusso.blogspot.com pasate y me dices que tal quedo
Alex, gracias por tus deseos, feliz navidad igualmente. Este es el enlace de los íconos:
http://vicing.deviantart.com/art/rounder-png-65215412
Sergio, excelente elección de plantilla para estas fechas. Que pases felices fiestas, un abrazo!
Del potro! Encontre tu pagina anoche y valla que ya me a servido, mi Web esta totalmente arreglada gracias a ti! mira: httt://www.juankavia.tk/ SOLO LE FALTA ALGO, este meno esta de lujo! esta genial, podrias decirme como lo incorporo a tu plantilla del Ipod, de modo que los menus que ya tiene tengan este efecto de dock y aparezca su nombre abajo.. es muy util los que ya tiene pero como son estaticos seguro que muchos visitantes no se dan cuenta que son links a facebook, twittter, youtube y todo es. Espero que puedas ayudarme, muchas gracias por tus post, desde Colombia: DJ Juankavia
Hola, se puede hacer verticalmente el menu ?
Que tengas unas Felices Fiestas y disfrutes con los tuyos.
Saludos.
Muy buen menu!!! Por sierto, como hago para cambiarle los botones al menu?? Gracias, y felizes fiestas!
Corrijo, felices, jejeje
Hola Juan Carlos Agudelo,
Sigue los mismos pasos de este post, luego en la plantilla iPod Touch busca esta parte:
<!-- Menu -->
.....
.....
.....
<!-- Fin del menu -->
Todo el código dentro de esa parte elimínalo y en su lugar pon el tercer código que menciono en este post. Ya sólo cambia las URL de los íconos para que sigan siendo estilo iPod Touch.
Saludos.
Forrito, se perdería el efecto de aumentar el pasar el mouse =(
flores rojas, muchas gracias por tus deseos, que tengas un excelente fin de año!
Julián Cardoso, en el tercer código encontrarás las URL de las imágenes, esas son las que debes sustituir por tus nuevos íconos. Igualmente felices fiestas!
SOY UNREALMAT CON OTRO NOMBRE:
ESTA BIEN RIFADO UN 10
PARA ESTE POST YHEA!
PARECE QUE ES MI PC SALE ABER CUANDOS E DE LA OPORTUNUDAD LO PONDRE
Jaja, creí que tu próximo nombre sería Criss Orton o algo así =P
Saludos.
Gracias potro por el URL gracias esta padres los botones
y pues de nuevo FELICES FIESTAS que te la pases super chido en compañia de tu familia y las personas que tanto quieres, nos vemos y felicidades.
Gracias Alex, igualmente!
Hola Potro Juan Carlos de nuevo... todavia no me funciona, creo que tiene que ver con esta parte: /* Menu
-------------------------------------------- */
#menu {
float: left;
margin: 0px 0 0 55px;
padding: 0;
}
#menu a {
display: block;
padding: 15px;
float: left;
width: 60px;
height: 60px;
}
a#menu-Mail {
background: url(http://img10.imageshack.us/img10/617/soundcloud50y.jpg) center top no-repeat;
}
a#menu-Feed {
background: url(http://2.bp.blogspot.com/_qgZA1ny_dAs/Sw2HTofUwiI/AAAAAAAADJY/x9P7d-nkqSg/s200/iMail.png) center top no-repeat;
}
a#menu-Twitter {
background: url(http://1.bp.blogspot.com/_qgZA1ny_dAs/Sw2IJBCF10I/AAAAAAAADJo/mnPd59aQxdw/s200/iTwitter.png) center top no-repeat;
Porque hay estan los iconos y menus del menu normal del Skin Iphone...
Porque al intentar guardar la plantilla me dice de este error:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "http:" must be followed by either attribute specifications, ">" or "/>".
Hola, si no es mucho pedir, podrias hacer cuatro Bock icons como los del blog de pruebas para mi blog.
Las imagenes son:
Demi Lovato
Selena Gomez
Disney Channel logo
You Tube
Feliz Navidad y Prospero Año Nuevo.
Te pido disculpas por ser tan malo con esto del diseño de imagenes.
Te anticipo las gracias.
Mira aqui esta mejor explicado el problema de este dock en la Plantilla Iphone:
http://dl.dropbox.com/u/3613234/Problema%20con%20el%20Dock%20en%20el%20Skin%20Iphone.txt
Y por si algo dejo tambien el HTML Completo:
http://dl.dropbox.com/u/3613234/Edicion%20HTML%20de%20mi%20plantilla.txt
Espero que puedas ayudarme porfavor potro, es increible todo el contenido de tu pagina, monte una Blog muy bonito y decente TODO con contenido tuyo, muchas gracias, este es el toque final para que mi pagina quede genial! GRACIASSSSS
Hola Juan Carlos,
No, no es esa por eso. Si te fijas en el primer enlace del código del menú estás poniendo esta línea:
<http://img686.imageshack.us/img686/261/iconhome.png"/>
Y debe ser:
<img src="http://img686.imageshack.us/img686/261/iconhome.png"/>
Verás que te estabas saltando img src
Inténtalo de nuevo haciendo ese cambio y verás que sí te resulta.
Saludos.
Hola El Venado,
Siento no poder ayudarte pero ando demasiado corto de tiempo. En el comentario #17 está el enlace de descarga de los íconos, en el pack viene el archivo PSD para poder editarlo.
Saludos.
Hola potro, muy bueno el menu.
Te voy a hacer una pregunta
¿Como haces para hacer las cabezeras del blog en flash? Tengo que bajar algo programa, o lo puedo hacer online?
Gracias por tu respuesta
Hola Omar,
Necesitas un programa de diseño como Flash, es profesional, o si quieres algo más sencillo está el Flash Intro Banner Maker.
Saludos!
Hola El Potro!
Este menú es sencillamente alucinante, te aseguramos que nos hemos quedado "pasmados" cuando lo hemos visto.
Es genial :)!!!
Bueno, también queríamos felicitarte (además de por el menú :D) las navidades.
¡Te deseamos todo lo mejor para el año que viene y unas muy alegres fiestas!
Nos vemos!!!
Hola Potro
Tu si que vales, estupendo los trucos que nos enseñas día a día.
Un saludo y feliz navidad.
Hola La Trucoteca de Blogs,
Igual a mí me gusta mucho este menú, es muy vistoso. He querido dejar comentarios en su blog en un par de ocasiones y nunca tengo éxito =(
Muchas gracias por su visita y por sus amables deseos, que el próximo y todos los años, estén llenos de éxitos para ustedes.
Saludos!
Hola Eduardo Sanguino,
Muchas gracias por tus comentarios, me alegro que te haya gustado este menú.
Felices fiestas igualmente para ti.
Un abrazo!
Hola de nuevo El Potro!
Bueno, jeje, es una cosilla que nos está ocurriendo mucho ultimamente, así que lo que recomendamos es que se haga con el formulario antiguo, o, si no, que se copie el comentario por si acaso (para no tener que escribirlo dos veces :D)
Bueno, felices fiestas de nuevo y por La Trucoteca te esperamos ;)
Saludos!!
¡Feliz Navidad Potro!
Que pases unos felices días con los tuyos.
Un saludo,
Juan
La Trucoteca de Blogs, enterado, copiaré el comentario la próxima vez hasta que se publique ;) ¡Felices fiestas!
Juan, muchas gracias, igualmente deseo una feliz Navidad para ti y tus seres amados. Saludos!
Hola.
Yo igualmente te deseo lo mejor esta navidad.
saludos.
Gracias El Venado, mis mejores deseos para ti.
Saludos.
Creo que le meti muchos codigos a mi blog y seguro entraba en conflicto con algun otro, de cualquier manera, como apenas estaba experimentando decidi abrir un nuevo blog y alli copiar este codigo de primeras, pues para mi lo mas importante es la inter actividad, y ya quedo perfecto, te lo debo potro, gracias!
A manera personal creo que se ve mejor en tu blog este menú en la parte de arriba, así que creo que tomaste una buena decisión.
Saludos!
Hola potro:
Acabo de añadir este truco a mi blog, bueno, a Tuneando el blog, y en el último botón he dejado el enlace a esta entrada.
Debo decir que me ha salido a la primera pese a tener mil cosas ya en el blog.
Gracias por el truco.
Por cierto! De momento lo he copiado tal cual, pero en breve me descargaré las imágenes y cambiaré las url's para no comerme tu ancho de banda.
Un abrazo.
Hola Eulalia,
Te ha quedado muy lindo el menú, me gusta el efecto hover que tiene de las mariposas.
Gracias por la mención y por tus comentarios.
Un abrazo!
Hola! Me encanta el menú, pero en mi blog (www.ronmocho.com) no consigo que haga el efecto... Se me quedan como imágenes con el vínculo al lado :S
Hola RonMocho,
Supongo que debe haber algún otro script que no deja funcionar este.
Inténtalo de nuevo, quizá tengas más suerte. Ah, y en Vista previa no funciona, tienes que guardar los cambios para verlo.
Saludos.
Hola El Potro!
Ya pensé lo de los otros scripts... tengo varios scripts en la página, así que seguramente sea por eso... Lo malo es que los scripts que tengo puestos me son útiles (al menos el de artículos relacionados y el de las pestañas), así que me pones en un dilema! :D
Crees que puede haber algún problema con que la plantilla no sea original de Blogger?
Muchas gracias por contestar tan rápido y por los consejos de tu web!
No creo que sea la plantilla, muchos lo han puesto en blogs con plantillas que no son originales.
Quizá si lo pones un blog de pruebas con la plantilla que usas puedes ver si funciona y si es así por ahí puedes empezar a descifrar si es un error de colocación o es otro código que no lo deja verse.
Saludos!
Hola, Potro, espero que las vacaciones hayan estado de acuerdo contus expectativas.
Solo quiero agradecerte el aporte de algunas rutinas que ya implemente en mi blog http://perladelpapaloapan.blogspot.com
Empecé con el menú dock, segui con el hundimiento de imágenes y puse una estática con cierre.
Gracias de nuevo
Hola Manolo,
Te está quedando muy bien todo. Gracias por tus comentarios!
Saludos.
hola potro queria hacerte una pregunta en mi blog pongo el meu pero a veces no se abre y otras veces si cual podria ser el problema
Hola Goku el Super Sayayin,
Es posible que se sature el ancho de banda de donde tengo alojados los scripts.
Te recomiendo que subas los scripts del primer código a tu propio servidor y cambies la URL. Con eso ya no dependerás del ancho de banda que tengo y seguro cargará más rápido.
Saludos.
Hola El Potro.
Es impresionante este menú, lo he puesto y funciona perfecto.
Pero tengo un problema, a Goku le respondiste esto:
"Te recomiendo que subas los scripts del primer código a tu propio servidor y cambies la URL. Con eso ya no dependerás del ancho de banda que tengo y seguro cargará más rápido."
Podrías indicarme como se hace eso, es un escollo que no puedo con el, o decirme donde hay un tutorial.
Gracias
Hola cocodrolo,
Lo ideal que es que en todo código que se use siempre cada uno tenga alojados los archivos en su propio servidor para evitar que las páginas de todos se alenten.
En este caso sería subir los dos archivos del primer código en un servidor.
Para hacerlo pon estas direcciones en tu navegador:
http://sites.google.com/site/ciudadbloggerfiles/Home/jquery.js
http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js
El contenido de cada uno pégalo en WordPad y guárdalo con los nombres que tienen (jquery.js e interface.js)
Luego los subes a un servidor, por ejemplo Dropbox, luego consigues la URL de estos archivos que subiste y la pones en el primer código sustituyendo las que tiene, de esa forma ya tendrás los archivos alojados en tu propio servidor y no dependerás del hosting de nadie más ;)
Saludos.
Hola El Potro.
Lo primero, Gracias.
Una explicación perfecta y un alumno torpe lo llamaría yo, y te explico el porque.
He seguido tus indicaciones al pie de la letra, y todo ha ido sucediendo como me indicas, pero al visualizar el blog de pruebas en el que se estaba viendo bien, solo me aparece el icono del interrogante.
Esto de abajo es como queda el texto después del cambio, lo único que he notado es que es mas corto que tu texto.
Voy a seguir dándole vueltas a ver si doy con la tecla.
Podría ser que el servidor tarda en funcionar.
-script src='http://dl.dropbox.com/u/4364254/jquery.js' type='text/javascript'/>
-script src='http://dl.dropbox.com/u/4364254/interface.js' type='text/javascript'/>
A parte de lo anterior, dropbox sirve para alojar descargas directas sin necesidad de los típicos alojadores
Un saludo.
cocodrolo
Las direcciones están bien, o sea que sí las subiste con éxito y ya debe funcionar.
Dropbox sirve para alojar todo tipo de archivos y las descargas son directas sin necesidad de abrir otras páginas y esperar tiempo como en otras páginas.
Saludos.
en el bloc de probas puedes ver que al pasar el raton por encima no se agrandan, si lo hace si lo paso 3 dedos mas arriba por la cabecera. ¿a que sera debido eso??
muchas gracias.
http://probas10.blogspot.com/
Puede ser por los estilos de tu plantilla; quizá algo esté haciendo conflicto.
hola pootro y como cambio el color de texto de cada boton
?
Hola Anonimo,
Busca en el segundo código esta parte:
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
Cambia donde dice color: #000; por el código del color que quieres.
Saludos.
gracias por el aporte Potro, esta muy bueno ya lo estoy usando, http://compugraphic.blogspot.com; tengo una duda respecto a los archivos js que utilizas, me gustaria saber si estos archivos no se pierde con el tiempo y donde podria obtenerlos en caso se perdieran, para poder colocarlos en algun otro host que tenga, gracias de nuevo
Hola compugraphic,
El primero no se pierde ya que está alojado en Googleapis, el segundo sí te recomiendo alojarlo en otro lug,ar más que nada para no consumir ancho de banda y evitar que a todos les cargue muy lento el blog.
Este que te menciono puedes sacarlo de esta dirección:
http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js
Saludos.
Hola,
Es genial la idea! Felicidades!
No sé qué pasa pero no me sale bien. Se quedan todos juntos a la derecha. Mira: http://littleworldpruebas.blogspot.com/
He estado haciendo pruebas ahí para ponerlo en mi blog (http://wwwlittleworld.blogspot.com/).
Sabes qué es lo que falla?
Gracias!
Supongo que debe ser por algún estilo de la plantilla pues ni siquiera los veo horizontales.
Intenta hacer la prueba en otro blog donde no haya tocado nada antes.
Saludos.
EN VISTA PREVIA APARECE TODO EL MENU FUNCIONANDO BIEN.
PUES GUARDO Y VEO BLOG Y SOLO ESTA UN BOTON. EN EL BLOG DE PROBAS FUNCIONA Y LE HE PUESTO LO MISMO AL OTRO, CON LO MISMO EN TODO Y NO VA.
¿SABES QUE SERA?
Hola PONTENOVA.ES
Fíjate que hace un momento hice puse el menú en tres blogs de pruebas con diferentes plantillas y en todos funcionó. Así que puse el menú en un blog con dominio propio y ¡no funcionó!
Por alguna extraña razón hay ciertos scripts (como este) que en dominios propios no funcionan :S
No me había dado cuenta hasta que mencionaste eso de que en ambos blogs teniendo lo mismo en uno funciona y en otro no.
Ahora mismo pondré el aviso que no funciona en blogs con dominios propios.
Siento que no pueda funcionar :(
Saludos.
pues si que es una pena, porque es un menu que esta muy bien y muy chulo. Que se le va a hacer, haber si consigo por la red uno parecido y funciona y ya te aviso.
Muchas gracias por tu tiempo.
Por lo menos he hecho un menu de botones con imagenes fijas que ha quedado bastante bien, me falta que al pasar el raton por encima aparezca el nombre del enlace.¿tienes idea de como lograrlo?
este es el menu:
te lo paso por email, aqui no me deja.
tampoco va el email, bueno, miralo en el codigo fuente de pontenova.es
Puedes usar el código de este menú, sólo que en lugar de poner un texto pones el código de la imagen del ícono.
Saludos.
Me ha encantado, enorabuena tambien cambie los botones por gif animados y va genial, puse uno para al que le guste venga aqui.http://nolo493.blogspot.com/
Te han quedado muy bien Manolo :)
Saludos.
hola amigo quisiera saber como hago para colocarles los contenidos al menu osea las etiquetas porque pruebo y no me anda el menu quedo bueno pero al hacer click en los iconos me llave a una pagina que dice que no se encuentra el contenido del blog que se desea buscar algo asi me gustaria que me respondas muy bueno los tutos
Ahí donde dice URL del enlace debes poner el enlace que quieres, por ejemplo:
http://google.com
Saludos.
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.