Menú estilo Dock para Blogger (1)

21 de diciembre de 2009 337 comentarios ,
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.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.


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á.

Después de haber aclarado lo anterior, descarga este archivo, descomprímelo y súbelo a un hosting.
Luego vamos a 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='URL del archivo js' type='text/javascript'/>

Cambia donde se indica en color rojo la URL del archivo que subiste previamente.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbB9Gw8_M7lt0Zv2mz4YK5k8Cmtz7LPL_wiyewKYg4DgTaEX74EVIbEORoM6zq-Q-f6tBBXRcd0rr9bKmZY3_QwO2Yt7KUpNLZBY61NkNDod3spyP6Bt1xtUZQK0EP2C9op23b6oLY8_o/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/AVvXsEgYtKUhEBMv-yJl4vsAAH16OOVSawP8gvt-MERbTo4QuZ_cKajUTrROWYs9GxPCuAI_ct61Re8fqfS-9mLzdD7kFQAs71Vgpw7qzQerKrQ5gz8tfdkdbOFN_xF0wbq4mpuGFngNkKjwo_Y/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/AVvXsEjMH6Nlyfl_1UT9UHAKz_DdyV4gQYDOEx3PJZGgXa_kSufGUD0Puvh44bTcJQLE27wZXfF5tZ4DxbyjRO_cSmNB0Y8-aHlvKBfkFuvIZ_k1nPdIkhmk4rY3boY_mvvaMvQA0ypZTXICXQ0/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/AVvXsEjd3J_4qf87uY_oSBuxA_SG7X5twXEmMSDBcWQJNC8zDf_QZU_KYa1xJ1BfvOrAqmhVkurV_SXQmNGzXaJn9v4UivXrs54N_dOb8DVa_BDRkTfCxSlmZKio5czaa3uzvgukPSg35W-cB1w/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/AVvXsEjsTDKBVK8PjzA-T0bCefTm1URfHRUSZLApVsJMkwRkg-eI4zpA8qO2wbq7XChEUJUSUXWLA5N0hE8sM2Ke10puuVP0-gmqNRD2YQzAAEyfa_j6iZK2CKQ7hyQN8gbaKHgIqokTo_XnZLg/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/AVvXsEjYDgCsC2UtAaQikv4veeIqFhR5yqlj1g7KudUfYWUazI-3YGtUTMP9CcJb3oiMnngXsD470Kz8j9moiMsgUcXUS33wDY0ozKv1C8Vjaks4-xuCV3T2ogJFf_wBRVVagVLYbFJywmz6_vw/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/AVvXsEgr8-EuEYlLQvYGdQv9Jju_50_bPawZthTGUHdgcVGfZiEu2f-oLcwQK2-87WgASU-FoLtbgVcSGpF35WI3kB3DLPg9R0nnRXyziwrM6GK-HSPA28CIMNGrtKH8fm64VQzfrIm_6UuUvTk/s1600/Icon_Help.png"/><span>Título del enlace</span></a>

</div>
</div>

<script>
$(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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8-EuEYlLQvYGdQv9Jju_50_bPawZthTGUHdgcVGfZiEu2f-oLcwQK2-87WgASU-FoLtbgVcSGpF35WI3kB3DLPg9R0nnRXyziwrM6GK-HSPA28CIMNGrtKH8fm64VQzfrIm_6UuUvTk/s1600/Icon_Help.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.


Ver también | Parte 2


337 comentarios en:

" Menú estilo Dock para Blogger (1) "

  1. 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!!

    ResponderEliminar
  2. Era para dejarlos en suspenso, jajajaja.
    Gracias por avisarme, ya está abierto para todos.

    Saludos!

    ResponderEliminar
  3. jajaja! que buenoo ;)

    lo he pillado a la segunda leida XD

    Saludos!

    ResponderEliminar
  4. 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.

    ResponderEliminar
  5. Wow, me quede asombrado cuando vi el blog de pruebas.
    En ese momento pense ¿Como no ponerlo?

    Saludos.

    ResponderEliminar
  6. Quiziera saber ¿Donde encontraste esas buenisimas imagenes?

    ResponderEliminar
  7. 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 =)

    ResponderEliminar
  8. 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.

    ResponderEliminar
  9. 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!!!!

    ResponderEliminar
  10. 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!

    ResponderEliminar
  11. Maestro... hoy nos traes esto tan genial, el jquery es lo más asombroso que hay. Pero ahora estoy en plenos cambios y me temo que voy a tener que modificar tanto mi blog que ya n oserá lo de antes... Un saludo.

    ResponderEliminar
  12. WOW EN REALIDAD ES ESTUPENDO MAGNIFICO ME ENCANTO GRACIAS POR TAN BUEN POST Y PERDON POR GRITAR TANTO

    ResponderEliminar
  13. Ascesino96, definitivamente se pueden hacer cosas increíbles con JQuery. Saludos!

    Sergio, gracias por tus comentarios. Un abrazo!

    ResponderEliminar
  14. 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

    ResponderEliminar
  15. me podrias pasar la URL o de donde encontraste estoy botones por que estan geniales
    digo si se puede

    ResponderEliminar
  16. 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

    ResponderEliminar
  17. 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!

    ResponderEliminar
  18. 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

    ResponderEliminar
  19. Hola, se puede hacer verticalmente el menu ?

    ResponderEliminar
  20. Que tengas unas Felices Fiestas y disfrutes con los tuyos.
    Saludos.

    ResponderEliminar
  21. Muy buen menu!!! Por sierto, como hago para cambiarle los botones al menu?? Gracias, y felizes fiestas!

    ResponderEliminar
  22. 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.

    ResponderEliminar
  23. 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!

    ResponderEliminar
  24. 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

    ResponderEliminar
  25. Jaja, creí que tu próximo nombre sería Criss Orton o algo así =P
    Saludos.

    ResponderEliminar
  26. 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.

    ResponderEliminar
  27. 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 "/>".

    ResponderEliminar
  28. 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.

    ResponderEliminar
  29. 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

    ResponderEliminar
  30. 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.

    ResponderEliminar
  31. 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.

    ResponderEliminar
  32. 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

    ResponderEliminar
  33. 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!

    ResponderEliminar
  34. 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!!!

    ResponderEliminar
  35. Hola Potro

    Tu si que vales, estupendo los trucos que nos enseñas día a día.

    Un saludo y feliz navidad.

    ResponderEliminar
  36. 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!

    ResponderEliminar
  37. Hola Eduardo Sanguino,

    Muchas gracias por tus comentarios, me alegro que te haya gustado este menú.
    Felices fiestas igualmente para ti.

    Un abrazo!

    ResponderEliminar
  38. 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!!

    ResponderEliminar
  39. ¡Feliz Navidad Potro!

    Que pases unos felices días con los tuyos.

    Un saludo,
    Juan

    ResponderEliminar
  40. 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!

    ResponderEliminar
  41. Hola.
    Yo igualmente te deseo lo mejor esta navidad.

    saludos.

    ResponderEliminar
  42. Gracias El Venado, mis mejores deseos para ti.
    Saludos.

    ResponderEliminar
  43. 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!

    ResponderEliminar
  44. 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!

    ResponderEliminar
  45. 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.

    ResponderEliminar
  46. 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!

    ResponderEliminar
  47. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  48. 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

    ResponderEliminar
  49. 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.

    ResponderEliminar
  50. 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!

    ResponderEliminar
  51. 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!

    ResponderEliminar
  52. 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

    ResponderEliminar
  53. Hola Manolo,

    Te está quedando muy bien todo. Gracias por tus comentarios!
    Saludos.

    ResponderEliminar
  54. 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

    ResponderEliminar
  55. 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.

    ResponderEliminar
  56. 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

    ResponderEliminar
  57. 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.

    ResponderEliminar
  58. 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

    ResponderEliminar
  59. 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.

    ResponderEliminar
  60. 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/

    ResponderEliminar
  61. Puede ser por los estilos de tu plantilla; quizá algo esté haciendo conflicto.

    ResponderEliminar
  62. hola pootro y como cambio el color de texto de cada boton
    ?

    ResponderEliminar
  63. 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.

    ResponderEliminar
  64. 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

    ResponderEliminar
  65. 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.

    ResponderEliminar
  66. 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!

    ResponderEliminar
  67. 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.

    ResponderEliminar
  68. 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?

    ResponderEliminar
  69. 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.

    ResponderEliminar
  70. 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.

    ResponderEliminar
  71. 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.

    ResponderEliminar
  72. tampoco va el email, bueno, miralo en el codigo fuente de pontenova.es

    ResponderEliminar
  73. 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.

    ResponderEliminar
  74. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  75. 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/

    ResponderEliminar
  76. Te han quedado muy bien Manolo :)
    Saludos.

    ResponderEliminar
  77. 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

    ResponderEliminar
  78. Ahí donde dice URL del enlace debes poner el enlace que quieres, por ejemplo:
    http://google.com

    Saludos.

    ResponderEliminar
  79. todo bien con los codigos del menu pero no me salen las imagenes mejor para q lo ves como quedo pasa por mi blog
    bajandopeliculaslatinas.blogspot.com

    ResponderEliminar
  80. Debes tener algún otro script que no deja que este funcione.

    ResponderEliminar
  81. Hola,

    Enhorabuena por todo el éxito que estas teniendo, depués de tanto trabajo se agredece supongo!

    Ahora bien, me gustaría poner este menú en mi Blog, pero ni idea en donde se encuentra lo de: ]]>

    Puesto que no soy muy informático, te agredecería cualquier aclaración.

    www.espaciomir.blogspot.com

    Un saludo.

    ResponderEliminar
  82. Usa las teclas CTRL + F, ahí escribe la etiqueta que buscas y podrás encontrarla.

    Saludos.

    ResponderEliminar
  83. Gracias por compartir esta información. Lo he tratado de probar en mi blog, seguí al pie de la letra lo indicado en este post, pero no funciona. Al final, sólo me muestra el último icono de la lista y nada más (centrado), no hay movimiento ni animación ni aparecen el resto de iconos.

    Probé ubicar el gadget html/javascript debajo de la cabecera como indicas en otro post pero nada.

    No estoy usando dominio propio, pero si estoy usando una plantilla que no pertenece al grupo de plantillas de blogger.

    ¿Podrías ayudarme por favor?
    Gracias y recibe un saludo desde Lima, Perú

    ResponderEliminar
  84. Hola Rómulo,

    El problema radica en la compatibilidad de los scripts. Estás usando Prototype y Scriptaculous para que funcione Lightbox, esas librerías no son compatibles con JQuery, que es el que usa este menú.
    No se pueden usar al mismo tiempo, pues no son compatibles, es por eso que el menú no funciona en esa plantilla.

    Saludos hasta Perú!

    ResponderEliminar
  85. Parece que no se publicó mi respuesta anterior. bueno, primero gracias por tan pronta respuesta. Algo así me había imaginado. Dime ¿conoces algún script que sea similar al lightbox pero con jquery?.

    Otra opción que se me ocurre es poner un iframe que cargue el menú de manera externa, ¿que opinas?

    Gracias por todo mi estimado

    ResponderEliminar
  86. cosa rara.... acabo de publicar un simple html en el web de mi empresa y es el mismo resultado.....

    http://mastersdesigners.com/blogger/menudock.html

    y el código es el mismo, ¿alguna idea?

    ResponderEliminar
  87. Podrías intentar con el iframe, aunque hay opciones de ventanas modales con JQuery, una de ellas es Thickbox, no es muy pesado aunque actualmente ya no tiene soporte, de cualquier modo puedes encontrar otras opciones con JQuery en la red.
    La página que mencionas está funcionando perfecto, acabo de ver el menú ahí sin ningún problema.

    ¿No será tu navegador?

    ResponderEliminar
  88. pues es curioso: he probado con IE, FF y Chrome y sólo con Chrome puedo ver el último icono. Estoy usando una laptop con vista home edition de 64bits y en IE y FF no veo nada de nada... Probé con otra máquina con Xp Pro SP3 y el mismo resultado (excepto que ahí no tengo chrome)

    ¿que navegador has usado tú?. porque el blog de pruebas lo puedo ver normal con el Chrome.... eso si es bien raro.... ¿alguna idea mi estimado?

    ResponderEliminar
  89. asunto solucionado..... retire lo de lightbox (buscaré otra opción menos vistos, no importa, tal vez una ventana modal como has sugerido)..... gracias mil

    ResponderEliminar
  90. Sólo lo vi en Chrome, acabo de formatear mi equipo y no he instalado los demás navegadores.
    Qué bueno que ya lo has solucionado, a veces hay que arrancar el problema desde la raíz.
    Por las ventanas modales no creo que tengas problemas, hay varias con JQuery que podrás probar y que son compatibles con el menú.

    Saludos!

    ResponderEliminar
  91. Se pueden colocar dos menus tipo Dock, uno en la parte superior debajo del titular (Dock 1) y otro fijo en la parte de abajo (Dock 2) sin que se arme un estropicio

    nuestro blog es burgasbeat.blogspot.com

    Saludos

    ResponderEliminar
  92. Sí se puede pero tienes que cambiar el nombre del ID en el script así como de los estilos. Yo lo he hecho y no siempre se ve bien, generalmente quedan mal, pero puedes intentarlo.

    Saludos.

    ResponderEliminar
  93. hola Potro mira mi duda es que quisiera poner un menu horizontal debajo de la cabecera del blog pero en las pestañitas del menu quiero poner listas de libros en otra autores en otra libros que mas me gustan y asi, y no tengo ni idea de como hacerlo. si me puedes ayudar pleeease. ;D

    ResponderEliminar
  94. Ui vale encontre lo del menu horizontal muy chulo pero no se, si los datos los quiero poner yo, como hago, que url pongo. juis es k ni idea. Gracias Potro

    ResponderEliminar
  95. pues no, no lo consigo juer mira que soy nega pa esto :_(

    ResponderEliminar
  96. Pues puedes escribir una entrada poniendo la lista de enlaces que quieres.
    Luego en la pestaña pones el enlace a esa entrada, así al hacer click se mostrarán las listas que quieres.

    Saludos.

    ResponderEliminar
  97. Potro un ídolo maestro con este menu que pasaste! Me costo un poco poder ponerlo en mi blog , ya que tenía otra aplicación que supongo provocaba un conflicto. muchísimas gracias por tu aporte.

    ResponderEliminar
  98. Qué bueno que ha sido de tu agrado, creo que a todos nos ha gustado este menú :)

    ResponderEliminar
  99. puse un menú como este en mi blog (solo cambié algunos iconos)...
    pero no logro hacer que se vean las letritas.
    me ayudas en esto?
    saludos

    ResponderEliminar
  100. Temo que tu plantilla no permite que se muestre todo el gadget, es por eso que se corta cuando se amplia :(

    Prueba con ponerlo en otro lugar.
    Saludos.

    ResponderEliminar
  101. Hola potro me gusto mucho el menu lo probe y me jalo de maravilla, lo unico es q el dia de hoy varios d elos iconos ya no quisieron abrir, de todas formas los consegui por la red y ya actualize los links, nada mas te comento ya que si alguien entra y quiere ver la prueba q dejas ya no se visualizan varios de los iconos...

    Saludos

    ResponderEliminar
  102. Hola Freejack,

    Gracias por avisarme lo de las imágenes, son un fastidio esos hostings, ya van varias veces que cambian las URL de los archivos sin avisar :S
    Ya las he subido de nuevo a Blogger (ese es más seguro) y ya están funcionando nuevamente.

    ¡Saludos!

    ResponderEliminar
  103. Holaaa, primero decirte que estoy empezando en esto de los blogs, y que me encanta esta web, desde que la he descubierto me vuelto loco con el blog ejej =). Quisiera preguntarte si hay forma de que el texto aparezca por encima de los iconos yno por debajo como está puesto, ya que en el blog que estoy diseñando creo que quedaría mejor de esa forma. Gracias y un saludo!

    ResponderEliminar
  104. Hola Caverdemort,

    Puedes probar con la otra opción de este menú, en ese las letras salen arriba pero el menú va abajo.

    Saludos.

    ResponderEliminar
  105. como hago que los titulos esten sobre los iconos y no debajo de los iconos.
    gracias

    ResponderEliminar
  106. Lee la respuesta del comentario anterior.

    ResponderEliminar
  107. Saludos mi buen amigo y de nuevo mi agradecimiento por tu apoyo reciente.

    Te comento que este efecto que me parecio genail lo implemente ayer noche en mi blog, y gusto a la primera, la unica salvedad fue que lo coloque en la barra lateral y con solo tres iconos para los servicios que mas me interesa mostar, sin embargo hoy recibi la observacion de que desde Internet Explorer no se podia abrir mi blog pues arrojaba el problema que he visto por allí de que "Internet explorer no puede abrir el sitio...."
    Tuve que eliminar el efecto de mi blog, sabras tu hermano porque se genera ese problema? Es cuestión del internet explorer o puedo hacer algo para evitarlo.

    Muchas Gracias por tu apoyo de antemano amigo.

    Exitos.

    ResponderEliminar
  108. Definitivamente es Internet Explorer, esos errores suceden mucho en las versiones anteriores, aunque igual la actual versión 8 presenta conflictos en muchos blogs.

    ResponderEliminar
  109. Quiere decir entonces que no conoces de alguna solución al problema amigo? Es genial el efecto, investigaré un poco a ver si encuentro algo, si tienes alguna pista estaré pendiente y lo agradeceré. Un abrazo mi buen amigo.

    ResponderEliminar
  110. No, y es que en sí el problema no es el script que se usa, pues si entras desde Internte Explorer al blog de pruebas que hice que tiene el menú verás que no marca ningún error, pero aclaro, al menos en la última versión de ese navegador no hay ningún problema. Supongo que quienes tienen ese fallo usan versiones anteriores ¿la solución? que ellos actualicen su navegador ;)

    ResponderEliminar
  111. Saludos soy nuevo en esto y quisiera saber como hacer que en mi blog salga una hoja de calculo (Parte para hacerla ver por los visitantes).
    Mi direccion es imp-mesa-redonda.blogspot.com
    Agradeciendole su colaboracion de antemano

    ResponderEliminar
  112. Hola Arturo Arlex,

    En esta entrada se explica cómo hacerlo, en sí en esa entrada habla de cómo mostrar archivos PDF y Powerpoint pero igual puedes subir otro tipo de documentos como hojas de cálculo en formato XLS

    ResponderEliminar
  113. oye me parece que esto esta bueno pero no se como buscar el elemento html java script
    me odrias ayudar mi coreo es jams_meek@hotmail.com

    ResponderEliminar
  114. Entra en Diseño > Elementos de la página > Añadir un gadget, y selecciona HTML/Javascript. Ahí debes pegar lo que se indica.

    ResponderEliminar
  115. ola potro queria saber como puedo realinear los iconos en el dock porque me salen uno encima del otro

    ResponderEliminar
  116. Eso es porque debes tener otro script que no deja que trabaje el script de este menú.

    ResponderEliminar
  117. aver espera lo vere con el notepad++ ire provando script por script

    ResponderEliminar
  118. hola potro esta super la pagina felicidades, me gustaria preguntarte algo ,yo hace poco me hice un blog pero me gustaria saber como colocar mis propios link en la barra de menu que trae por defecto mi plantilla si pudieras ayudarme gracias.

    ResponderEliminar
  119. Hola Ceres,

    No veo los enlaces que mencionas en tu blog, pero se hace como se haría en cualquier plantilla. Entra en Diseño > Edición de HTML y busca el texto del menú, por ejemplo Inicio, o Contacto, ahí al lado verás el espacio para ponerle la URL del enlace que deseas.

    Saludos.

    ResponderEliminar
  120. Hola Potro, vengo otra vez a hacerte una consulta, realmente no recuerdo de que entrada publicada saqué este menú que tengo en mi blog, pero resulta que recién me di cuenta que toda la pagina sobre todo en el menú horizontal se desordena en un monitor de 17 pulgadas y de 15 más aun, te solicito por favor, si me puedes ayudar con éste problema, tengo un monitor de 19 pulgadas y yo veo bien ordenada la pagina, espero que me puedas dar algunas observaciones, como siempre te agradezco de antemano tu gentil ayuda, gracias.

    ResponderEliminar
  121. Me olvidaba, como puedo centrar el texto para que en todos los monitores pueda verse igual y también las imágenes flotantes, saludos y gracias de nuevo.

    ResponderEliminar
  122. No sabría decirte pues no tengo un monitor de esa medida para poder ver el problema real, pero es de por sí un tanto "normal" que una página no se vea igual en distintas resoluciones.
    Algunos elementos se mueven de lugar en monitores grandes o cuando una ventana está maximizada pero eso es porque su ubicación está pensada para ocupar todo el ancho de la ventana, o bien, su posición se fija para el ancho de la ventana, así que si la ventana es más grande estos elementos se recorrerán para ajustarse al modo que fue diseñado.

    Saludos.

    ResponderEliminar
  123. Oye potro, recien vengo entrando a tu pagina y la verdad es realmente excelente la mejor que e encontrado para blogger en todo sentido, eres realmente muy amable en ayudarnos y explicar cada detalle.

    Bueno ahor voy a mi pregunta, quiero colocar el menu estilo dick en mi pagina, pero veo que colocaste una nota que no funciona para blogs con dominio propio? en tonces solo puede ser para blogs? si tengo un blog con un dominio adquirido con ellos no lo puedo poner? bueno esto lo pregunto para no regarla ysalir de dudas antes de colocar el codigo

    Nuevamente muchas gracias potro!!!

    ResponderEliminar
  124. Muchas gracias a ti por tus comentarios :)

    Al parecer no funciona en dominios propios cuando el script está alojado en Google Sites, para serte honesto no he intentado alojarlo en otro sitio y así probar si en verdad es el alojamiento o el dominio lo que hace que no funcione. Puedes intentarlo alojando el segundo del primer código en otro hosting, es decir, este:
    http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js

    Con suerte y alojándolo en otro lado sí funcione en dominios propios, inténtalo y nos avisas ;)

    ResponderEliminar
  125. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  126. Potro, perdon por publicar en este post, pero en el que queria no me dejaba publicar, no se si sera por la cantidad de comentarios o que... Te paso a explicar. Estoy trabajando con un blog para una cátedra, con un template para Blogger con pestañas, mi intención es que esas pestañas tengan sub-menues, tal cual explicas en esta direccion http://ciudadblogger.com/2009/09/menu-horizontal-con-efecto-deslizante.html?showComment=1275767401328#c1504034740693138936 , obviamente conservando las pestañas del template, pero la verdad que con este modelo de template no pude modificar las pestañas, lo intente pero los sub-menues me quedan al costado y no abajo como quiero. Te paso la dirección del blog www.sistemaproductivounlp.blogspot.com a ver si me podes dar una mano, no se si necesitas el html, de todas maneras te agradezco cualquier tipo de ayuda. Tu blog es excelente! Gracias! Perdon por publicar acá pero no sabía a donde hacerlo, saludos!

    ResponderEliminar
  127. Hola Nico Garcia Z.,

    No en todos los menús se pueden usar subpestañas, y en el caso del menú de tu plantilla es aún más complicado pues el fondo de las pestañas es una imagen que contiene varias imágenes distintas lo cual hará imposible adaptarlo a ese menú.
    Aquí está la imagen de fondo del menú que usas:
    http://www.templatesimages.com/images/Inove/menu.gif


    Lo mejor será buscar otra opción que se asemeje a o que buscas.

    Saludos.

    ResponderEliminar
  128. Gracias Potro, la verdad que siempre sos de ayuda en todo esto de los blogs para los que no tenemos un conocimiento profesional del html. Saludos y muchas gracias. Excelente siempre!

    ResponderEliminar
  129. Hola.
    Lo he probado pero no me funciona.
    En la pagina muestra esto:
    No se encuentra la página.
    Lo sentimos, la página que estabas buscando en el blog Imagination no existe.
    imagination es mi blog.
    Si puedes ayudarme por favor.

    ResponderEliminar
  130. Las URL siempre deben empezar con http://
    Debes ponerla así:
    http://klaus-imagination-oncinema.blogspot.com/

    Saludos.

    ResponderEliminar
  131. excelente el menu me gusto mucho,
    te dejo el link para que veas como va mi blog y me digas que tal.
    http://adwords-win.blogspot.com/

    ResponderEliminar
  132. oye amigo tengo un problema pasate por mi blog dime como arreglar

    ResponderEliminar
  133. No veo que tengas completo el primer código en tu blog.

    ResponderEliminar
  134. Hay un código más fácil lo he puesto en mi web Huppix.blogspot.com , si quieren saberlo contactenme....

    ResponderEliminar
  135. snicker4us, si deseas compartir algo hazlo públicamente para que no parezca SPAM.

    ResponderEliminar
  136. Hola! Buenísimo el menu! Pero tengo un problema, lo hice a modo de prueba, pero cuando aumenta la imagen, me queda detrás del post, por lo cuál no sólo la mitad queda dtras sino que no se ve el título del enlace... Te fijarías? El blog es: http://inexaesteticacapilar.blogspot.com/ se que hay algo que toqué porque antes no me pasaba, pero no se que es... :(

    ResponderEliminar
  137. Prueba poniendo debajo de .dock { esto:
    z-index: 3;

    Sino funciona entonces busca esta parte y elimina lo que está en negrita:
    .body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: 1;

    ResponderEliminar
  138. Me quedó perfecto ahora, sólo que lo pasé para que quede arriba del post porque si no los nombres no se leen. Muchísimas gracias y felicitaciones por tu trabajo!

    ResponderEliminar
  139. Perdón, te molesto con algo mas? Quisiera saber como puedo hacer para achicar el espacio que queda entre el menú horizontal y el post, busqué por varios lado, y estuve toqueteando un poco pero antes de hacer lío, prefiero consultarte... :D

    ResponderEliminar
  140. Prueba poniendo antes de ]]></b:skin> esto:

    #HTML1 {margin-bottom:-30px;}

    Con eso quizá se reduzca el espacio, si funciona entonces puedes controlar la distancia con ese número. Con una cifra mayor será más reducido el espacio.

    Saludos!

    ResponderEliminar
  141. Sos un genio total, no sólo por lo que sabés, si no también por ayudar desinteresadamente... ;) Ya lo solucioné TODO. Y gracias a tus datos, busqué y disminuí también el espacio entre post. Ahora lo voy a pasar al blog correspondiente, ya que este, es de prueba. Mil gracias nuevamente!!!

    ResponderEliminar
  142. Qué bueno que ya lo has solucionado y que ha quedado como querías :D
    Muchas gracias a ti por tus comentarios.
    ¡Saludos!

    ResponderEliminar
  143. Hola!
    Solamente comento para agradecer qe compartas este menú, lo hice y lo modifiqé para qe sus colores y diseño qedaran bien con mi blog, tuve algunos problemitas pero los solucioné leyendo algunos comentarios con preguntas y tus respuestas. MUCHÍSIMAS GRACIAS!
    si te interesa ver como qedó, -> http://wegotodisneyworld.blogspot.com
    Suerte y gracias de nuevo!

    ResponderEliminar
  144. Te ha quedado muy lindo.
    Muchas gracias por tu comentario, me da gusto que te haya resultado como esperabas.

    Saludos.

    ResponderEliminar
  145. Gracias! Y solo una pregunta más...¿No tendrás por acá algun tutorial qe enseñe a cambiar algunas de las fuentes del blog? Por ejemplo para personalizar la fuente/colores del titulo de una entrada o algo asi? Te agradeceria mucho!
    Abrazo

    ResponderEliminar
  146. No, pero veo que usas una plantilla del nuevo diseñador de plantillas, en la sección 'Avanzado' puedes hacer esos cambios cuando eliges la plantilla. Sólo que si lo haces ahora quizá pierdas los cambios que ya hayas hecho en tu plantilla.

    Saludos.

    ResponderEliminar
  147. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  148. Hola! Eliminé el anterior coment, porque con el apuro escribí cualquier cosa :D
    Vuelvo a molestarte... Te acordás que había solucionado el problema, de que el menú quedaba detras del post? Bueno, yo no había visto, que en IExplorer no funciona... sigue quedando detras del post. Es firefox queda perfecto, pero en el otro explorador sigue con la misma falla... :( Alguna idea? http://www.inexaesteticacapilar.blogspot.com/

    ResponderEliminar
  149. Prueba buscando esta parte:

    .body-fauxcolumn-outer .cap-top {
    position: absolute;

    Cambia ese absolut por relative
    Quizá con eso funcione, pero igual cerciórate que no se descuadre alguna otra cosa con ese cambio.

    Saludos.

    ResponderEliminar
  150. Hola Potro, probé pero no hay caso, sigue quedando detras del post en el explorer... Hasta cambié de plantilla por las dudas que fuera eso. Tendrá solución? Me estoy volviendo loca!!!

    ResponderEliminar
  151. Por las dudas te comento que tengo el IE8...

    ResponderEliminar
  152. Lo último que se me ocurre es que busques esta parte y elimines lo que está en negrita:

    .body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: 1;

    ResponderEliminar
  153. Hola Potro! No te preocupes! Lo puse arriba del post, asi se ve bien y no me complico mas... Mil gracias por tu ayuda. Te mando un abrazo grande! ;)

    ResponderEliminar
  154. Vale, quizá sea lo mejor, y es que con las plantillas nuevas de Blogger todo es un caos :\

    Otro abrazo para ti!

    ResponderEliminar
  155. Men.. Con ke script no fuinciona el JQuery??

    Gracias xD

    ResponderEliminar
  156. No es compatible con Scriptaculous, Prototype y Mootools.

    ResponderEliminar
  157. Ok men Gracias..!! y men como puedo crear mis propias imagenes pero con el mismo estilo ese de los botones..?? :D

    ResponderEliminar
  158. Pues con un programa de diseño, por ejemplo Photoshop.

    ResponderEliminar
  159. Hola potro, antes que nada gracias por el aporte esta muy bueno.. Solo una duda y espero que sea respondida aunque ya es algo viejo el post y tiene mas de 150 comentarios.. hice todo exactamente como dice y me funciono !! peroo ha cambiado el tipo de letra de mi blog y también el tapiz de fondo se recorto.. ! agradeceria tu ayuda saludos.. !

    ResponderEliminar
  160. Desconozco por qué suceda eso, lamentablemente de las plantillas nuevas sabemos muy poco. ¿Cómo cambiaste la letra?

    ResponderEliminar
  161. Bueno lo que pasa es que al insertar el codigo despues del head y el otro que es antes de skin todo va bien... pero a la hora de insertar el html para los widgets pasa que me voy a ver blog y la letra la cambia a una muy tosca y me voy a configuracion de letra y por mas que se la quiera cambia no lo hace o sea que es un problema con el codigo insertado en el menu html... y el papel tapiz de fondo se recorta como quien dice la primera parte de arriba del blog si aparece bien pero despues se queda en blanco todo el fondo.. estos errores no afectan para nada el blog pero lo hacen ver mucho menos estetico, lo cual es contraproducente.. muchas gracias por tu respuesta potro

    ResponderEliminar
  162. Si sólo quieres cambiar la letra del menú puedes probar agregar dentro del segundo código que has pegado esto:

    .dockItem span a {
    font-size: 12px;
    }

    Quizá funcione y de ser así no tendrás que modificar el tipo de letra de todo el blog.

    ResponderEliminar
  163. Lo lamento pero no funciono tendré que picar el codigo html a ver cual es el error.. no tengo ni idea de como funcional el html pero quien quita y en una de esas le atino al error.. Gracias

    ResponderEliminar
  164. bUENAS NOCHES HICE TODO EL PROCESO PERO LOS ICONOS NO ME SALEN ALINEADOS HORIZONTAL SINO VERTICALMENTE.. AGRADEZCO TU AYUDA PARA ARREGLAR MI MENU... radioactivoarv@hotmail.com

    ResponderEliminar
  165. En las plantillas nuevas de Blogger casi ningún menú funciona :\

    ResponderEliminar
  166. ufa esta buenísimo pero tengo dominio propio ajaj, lo leí una vez q hice todo .. q hay para nosotros?

    ResponderEliminar
  167. Me parece que el problema es nada más con el servidor, es decir, por alguna rara razón cuando se suben a Google Sites dejan de funcionar para dominios propios, así que podrías probar subiendo los dos primeros archivos en otro servidor (como Dropbox) y seguramente funcionará.

    ResponderEliminar
  168. Holaaaaa de nuevo yo :S jejeje aqui de moleston jaja oye
    una cosa ya puse mi dock pero se cortan los iconos cuando se pasa el cursos, se ven por debajo de la seccion de entradas :S bueno mas bien no se ven por que los cubre la seccion de entradas cuando se hacen grandes. habra alguna forma de que se pongan siempre encima??

    de antemano muchas GRACIAS :D

    ResponderEliminar
  169. Pues yo lo he visto en Chrome, Internet Explorer y Firefox y lo veo perfectamente bien, se agranda al pasar el cursor pero no sobre pasa el ancho como para llegar hasta las entradas, es decir, se muestra completo y perfecto.

    ResponderEliminar
  170. si lo se gracias :S es que le aunmente los valores para que se viera mas grandote jejeje pero ya esta perfecto Muchisisisismas gracias :D y por cierto muy buena pagina :D

    saludos

    ResponderEliminar
  171. Tengo un problemilla.... el menu me sale bien, pero meto este enlace en uno de los elementos y me salta un error de que es imposible guardar la plantilla por noseque de XML y que ``codcompeticion´´ tiene que ir delimitado por ; y definido..

    enlace: www.ffcm.es/pnfg/NPcd/NFG_VisCalendario_Vis?cod_primaria=1000120&codtemporada=6&codcompeticion=173581&codgrupo=173665

    Blog: http://juvenilprovincialc.blogspot.com/

    ResponderEliminar
  172. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  173. Ah! y el texto me sale d ebajo del icono, y no se ve bien.

    dios, me he colado, es este menu pero la parte 2 T.T sorry...

    Un saludo, felicidades por el blog y muchas gracias por tu trabajo ^^

    ResponderEliminar
  174. La URL ponla así:
    http://www.ffcm.es/pnfg/NPcd/NFG_VisCalendario_Vis?cod_primaria=1000120&codtemporada=6&codcompeticion=173581&codgrupo=173665

    Para que el texto te quede arriba prueba poner el código así:
    <a class="dockItem" href="URL del enlace"><span>Título del enlace</span><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUnjJ75I/AAAAAAAAEDE/RkHWNQmOmeE/s1600/Icon_Mail.png"/></a>

    Saludos.

    ResponderEliminar
  175. Pff.. me tira el mismo error con esa url... me dice:

    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: The reference to entity "codtemporada" must end with the ';' delimiter.

    ResponderEliminar
  176. Perdón, era así:

    http://www.ffcm.es/pnfg/NPcd/NFG_VisCalendario_Vis?cod_primaria=1000120&amp;codtemporada=6&amp;codcompeticion=173581&amp;codgrupo=173665

    ResponderEliminar
  177. Hola Potro:
    Gracias por este blog que nos ayuda muchisimo a los torpes como yo.
    He colocado el menu en el siguiente blog de pruebas
    http://pruebamenu2010.blogspot.com/
    Pero como ves se queda debajo de las entradas. He realizado los cambios que pones en el comentario 144 y sigue igual. Ruego me ayudes si tienes tiempo.

    ResponderEliminar
  178. Hola diariopegassus,

    Parece que no ha aparecido tu comentario pero lo he leído en el correo.
    La única solución que le veo y no sé si funcione del todo bien es que pongas arriba de .dock { esto:

    #dock {z-index: 30;}

    ResponderEliminar
  179. Nada de nada. no funciona. la verdad es que es desesperante, me tiene un poco loco, llevo con este tema ¡dos semanas! y no hay manera, pero bueno. El tema es que esto pasa con cualquier menu despegable que ponga, es de locos. Bueno si se te ocurre una solución, te agradeceria que me la dijeras. Muchas gracias y suerte.

    ResponderEliminar
  180. Sí, de hecho ningún menú con subpestañas funciona en esas plantillas. Quizá quieras probar con otra plantilla que no sea del Diseñador de plantllas de Blogger.

    ResponderEliminar
  181. Potro una consulta tienes el PSD de los botones?? es que quiero personalizar los botonces, de antemano muchas gracias

    ResponderEliminar
  182. No lo tengo, pero te dejo el enlace del pack de íconos originales:
    http://vicing.deviantart.com/art/rounder-png-65215412

    ResponderEliminar
  183. Gracias :D, y otra consulta, como se le puede hacer para que la barra quede si cambiamos el dominio??

    ResponderEliminar
  184. Hola Potro! Alguna idea para disminuir el espacio entre las entradas y las imágenes que están debajo? http://cromall.blogspot.com/

    ResponderEliminar
  185. Debajo de .footer-outer {
    Agrega esto:

    margin-top:-30px;

    Con eso podrás disminuir el espacio entre las entradas y los gadgets del footer.
    Saludos.

    ResponderEliminar
  186. Gracias!!!!!! funciona perfecto! me quedo hermoso el blog!

    ResponderEliminar
  187. Hola
    Mira soy nuevo en esto y me pierdo algunas veces.
    He instalado el menu dock. Y tengo dos problemas.
    El primero es que cuando señalo el icono, la imagen al aumentar sale cortada. Me imagino que habra que aumentar la altura del script.
    Y por ultimo, una vez instalado las imagenes. Como incorporo el contenido que quiero que salga al pinchar las imagenes.
    Mi blogs es mcpepo03.blogspot.com

    ResponderEliminar
  188. Hola de nuevo POTRO:
    como ves, no he tardado en volver, esta vez para molestarte.Me ha "enganchado" este menú, pero si no hay alguna solución tendré que prescindir de él,mal que me pese.Te comento:
    He seguido todas tus indicaciones, lo he dejado todo tal cual, con tus iconos y URLS, sin embargo sólo logro ver un emoticón y sin el efecto deseado. ¿Es culpa de la libreria Prototype y Scriptaculous? No hay alguna manera de arreglarlo?
    Otros blogs tienen las dos librerias y parece que todo en ellos funciona a la perfección.
    Tal vez no sea por culpa de ésto, soy profana en la materia, perdóname; pero no encuentro otra respuesta. ¿Puedes ayudarme? Gracias anticipadas.

    ResponderEliminar
  189. Hola de nuevo ESNAPRI,

    De hecho le has atinado, la librería Scriptaculous y Prototype no son compatibles con jQuery que es el que se usa para este menú y es por eso que no te funciona.

    Hay un hack que algunos usan para poder usar ambas librerías pero yo lo he probado y nunca he tenido éxito es por eso que nunca he publicado nada acerca de ello :(

    ResponderEliminar
  190. Jolines....qué pena; con la cantidad de cosas guapas que hay. Entonces solo queda esperar a que los creadores de ambas librerias, hagan "algo" en común....en fin, tendré que resignarme.
    Gracias por tu pronta respuesta.
    Hasta pronto.

    ResponderEliminar
  191. Igual no tienes que resignarte pues en Vagabundia hay un menú muy parecido que no necesita esas librerías así que no tendrás conflicto ;)

    http://vagabundia.blogspot.com/2010/04/menu-estilo-dock.html

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger