Menú estilo Dock para Blogger (2)

26 de diciembre de 2009 139 comentarios ,
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/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 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


139 comentarios en:

" Menú estilo Dock para Blogger (2) "

  1. Muy bueno el post.
    Aunque no he podido colocar correctamente los anteriores me gustaria probar este.

    Veo que todavia conservas la araña del mes pasado.

    Saludos.

    ResponderEliminar
  2. Quizá sea por algún estilo de tu plantilla por la que no sale bien el menú anterior.

    La araña está muy tierna, que se quede ahí =)

    Saludos!

    ResponderEliminar
  3. Y si ya pusimos el dock anterior, cual sería la parte a cambiar para que aparezca abajo potro? (y se podrian tener dos menus? uno arriba y otro abajo?) Un abrazo. Gracias por todo.

    ResponderEliminar
  4. Hola Juan Carlos Agudelo

    No se recomienda usar los dos al mismo tiempo, ya que pueden no funcionar.
    Si ya tienes el de arriba y quieres cambiarlo abajo sólo elimina el código anterior que habías puesto antes de ]]></b:skin> y pon el que muestro en este post.
    Y el código actual que tienes del menú córtalo y pégalo antes de </body> y listo.

    Saludos.

    ResponderEliminar
  5. Muy bueno, la verdad, no todos los días se ve esto. En lo especial, me encantan los botones que tu pusiste, pero si quisiera poner otros botones me difiicularía encontrar otros iguales.
    Pero está genial!
    Un saludo

    ResponderEliminar
  6. Muy buena entrada Sr. Potro :D

    Puse las estrellitas en el puntero, gracias y Feliz Navidad -aunque un poco tarde- shhh me he olvidado.

    Besos

    ResponderEliminar
  7. Ascesino96, será cuestión de buscar en la red algunos íconos que sean de tu agrado. La verdad es que yo tardé mucho más buscando los íconos que escribiendo la entrada =S de cualquier modo seguro podrás encontrar algo que te guste, sólo será cuestión de dedicar un par de horas para hacerlo. Saludos!

    Graciela, qué bueno que ha sido de tu agrado este post. Igualmente deseo que hayas tenido una feliz Navidad y que tengas un próspero Año Nuevo, seguro el año que viene vendrá con mayores éxitos para ti y los tuyos. Besos!

    ResponderEliminar
  8. Potro.
    Estos tipos de menus me encantan.
    Eres un genio como ya te lo dije.
    Seguro que papa Noel te dio millones de regalos ya que tu te has portado muy bien con nosotros, ayudandos a mejorar nuestro blogs.
    Un saludo muy grande, y espero que hallas pasado un muy buena navidad.
    Porcierto, veo que dentro de poco La ciudad cumplira su primer año, jejejeje me da mucha alegria.
    Saludos!

    ResponderEliminar
  9. Jjaja, cambié de cuenta y borré la anterior, es una larga historia que no quiero explicar. Pero se puede decir que es por culpa de Youtube!

    ResponderEliminar
  10. PepeX, no sé si me haya portado bien pero Papá Noel sí me trajo regalitos =)
    Es verdad, en un mes cumple un año, a ver si preparo algún sorteo para ese día. Un abrazo!

    Ascesino96, qué lástima que tengas que cerrar el directorio, pero entiendo que todo tiene su ciclo. Mucho éxito con Vida negra!

    ResponderEliminar
  11. Gracias, pero en realidad, el borrar mi otro blog estuvo mal. Una vez conocí a un blogger que me dijo:
    - Tener éxito con un blog es cuestión de tiempo, por lo cual, no puedes borrar un blog a los 3 meses de creado.
    Entonces ahora no quiero ni encontrarme con ese blogger porque me daría una vergüenza enorme...
    Ahora quiero llegar muy lejos con mi blog y bueno, ahí sí.

    ResponderEliminar
  12. Hola.
    Esta vez que cambie mi plantilla me encontre con una muy parecida a la tuya.

    pero tengo algunas dudas.

    la primera es que quiero agregar los banners, intente con el codigo de las imagenes que me diste la otra vez pero no funciona.

    y la otra es como quitar el "leer mas"

    gracias.

    ResponderEliminar
  13. Gracias, creoque lo dejare arriba, mas interactivo para migusto personal, Una pregunta sobre el leer mas de la plantilla del Iphone, como puedo hacer que diga: Read more (lo quiero cambiar por la mayoria de mis visitantes son anglosajones)

    ResponderEliminar
  14. Ascesino96, la paciencia es una virtud que si bien no nos asegura el éxito sí nos reconforta en momentos difíciles.

    El Venado, no sé cuál banner dices, si es como el que tengo arriba del buscador sólo pega el código de la imagen arriba del código de tu buscador. Para quitar el leer más elimina todo el código que está desde </head> hasta <body> luego con los artilugios expandidos busca Continue Reading... y elimínalo.

    Juan Carlos Agudelo, con los artilugios expandidos busca el texto Leer más y cámbialo por el texto que quieres.

    ResponderEliminar
  15. hola El Potro..necesito tu ayuda..y no tiene nada que ver al post q publicaste..pido disculpas..si te mando un mail no creo que me respondas o anda saber cuando
    tengo un problema con mi plantilla (http://lasoleush.blogspot.com)

    quiero saber como pongo idioma español.xq la plantilla esta en ingles..
    como cambio la imagen porque si voy a diseño de pagina no sale ahi para cambiar la cabecera
    y quiero sacar la parte de arriba que dice "home"--"post rss"..etc etc.

    te muestro la imagen si no entendes.
    y mil disculpas

    http://i.imagehost.org/0962/cambios.jpg

    ResponderEliminar
  16. Hola GiseUsh,

    Todos los correos los respondo, sólo que los comentarios hechos en el blog tienen mayor prioridad.
    La imagen que me mandaste no corresponde a la plantilla que tienes hecha en el blog, supongo que ya la habrás cambiado.
    De cualquier modo deja te comento que no hay opción para cambiar de idioma en las plantillas, es decir, los diseñadores las crean con el idioma que ellos eligen, ese tipo de detalles sólo se cambian directamente en el código.

    Saludos.

    ResponderEliminar
  17. Oye bro, sabes que soy un terrible despiestado, pero por esas casualidades de la vida noté que tienes alojado el Script en Google Sites... ¿funciona de nuevo ese servicio? porque hasta hace poco no se podían crear nuevas webs, sólo administrar las existente ¿o me equivoco? Digo porque varias veces intenté acceder y me decía eso.

    Un abrazo!!!

    ResponderEliminar
  18. El que dejó se funcionar es Google Pages. En cuanto Google Sites aun se pueden crear sitios, al menos Google no ha amenazado con eliminarlo. Haz la prueba y me comentas, pero no creo que tengas problemas para crear un sitio.

    Un abrazo!

    ResponderEliminar
  19. Tienes razón bro, si se puede... te dije que era despiestado!!!! ahora recuerdo que como dices, era Google Pages.
    Muchas gracias bro!

    Un abrazo!!!

    ResponderEliminar
  20. Ojalá y andes despistado sólo por las fiestas decembrinas, jaja.
    Un abrazo!

    ResponderEliminar
  21. Que??? ya son las fiestas??? Jajajajajaja (demasiado despiestado XD)

    Si, por suerte a lo despiestado que soy se le han sumado decenas de proyectos que tengo en la cabeza, así que hay momentos en que no recuerdo ni como me llamo y tengo que resetear XD. Pero todo bien.

    Un abrazo!!!

    ResponderEliminar
  22. Eso se llama Bloggerzheimer, jaja.
    Un abrazo!

    ResponderEliminar
  23. por que me salen los iconos detras del blogg??
    menudo pakete jijiji estoy hecho
    benga gracias

    ResponderEliminar
  24. Generalmente cuando se tienen videos insertados estos tapan otros elementos como la Lista de Seguidores o en este caso el menú. Es cuestión del video, ahí no hay nada que se pueda hacer :(

    ResponderEliminar
  25. Perdón, no termine el comentario anterior.
    La única alternativa sería que pongas el menú en la parte de arriba para que no se encime con los videos.

    Saludos.

    ResponderEliminar
  26. Oye tengo una duda, hago los pasos uno por uno y orrectamente creo yo y cuando le doy vista previa, sí se ve bien la barra, pero a la hora de abrir el blog ya no se ve, sólo se ve el icono de help, no sé que está sucediendo.

    ResponderEliminar
  27. En Vista Previa no se ejecutan los scripts, tienes que guardar los cambios para verlo funcionando correctamente.
    En caso de que tampoco funcione entonces deberá ser por algún otro script que no deja que este funcione correctamente.

    Saludos.

    ResponderEliminar
  28. hola potro mira hicee absolutament todo lo ke dices ke haga...pero cuando pongo el ultimo codigo (el ke va antes del body) y luego le doy guardar me sale 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: The processing instruction must begin with the name of the target.

    No se ke hacer..!! realmente kiero este menu..xfa ayudame..! gracias!

    ResponderEliminar
  29. Hola Hrod,

    Revisa de nuevo que estás poniendo el código tal cual debe ir. Ese mensaje indica que hay una parte del código que no estás poniendo o bien, que dentro del código pusiste un espacio que no debe ir.

    Saludos.

    ResponderEliminar
  30. ciertoo habia un espacio en la etiqueta pero se creaba el solo... gracias por tu ayuda potro..

    ResponderEliminar
  31. Mira otra preguntita sabes ke en mi blog http://inwebmusical.blogspot.com/ ... esta el menu pero ala hora de poner los enlaces para dirigirlo ejm: *http://inwebmusical.blogspot.com/search/label/Noticias guardo y al entrar en la pagina me sale este error.. no entiendo porq? osea en otros blogs yo lo he hecho y sirve pero aqui me sale esto :

    TEMPLATE ERROR: LHS of numeric is null before 49 in http://inwebmusical.blogspot.com/search/label/Noticias

    Xfa ayudame..!!

    ResponderEliminar
  32. Necesitaría que pongas el código en tu plantilla para ver el error.

    Saludos.

    ResponderEliminar
  33. salee asii identicooo.... osea sale esoo en lugar del boton :(

    ResponderEliminar
  34. Sí, pero necesito que pongas el código en la plantilla para poder ver el código fuente y así saber qué sucede.

    ResponderEliminar
  35. Ok esta "chirindongo", sé ve bien ya termine mis propios iconos, pero ahora las letra que describen no se ven ¬¬, se pueden subir o hacer algo para que se distingan?, otra pregunta, cómo pongo mi icono enlugar del de blogger cómo tú ciudad en las paginas o face o twitter...etc....

    ResponderEliminar
  36. Hola METAuto,

    De hecho los estilos están configurados para que el texto salga arriba del ícono, supongo que tu plantilla ocasiona que se muestren abajo. Lo que puedes hacer es subir los iconos para que el texto tenga espacio y se vea.
    Para hacerlo busca esta parte,

    a.dockItem {
    text-align: center;
    color: #000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    width: 40px;
    position: absolute;
    display: block;
    bottom: 0;
    }

    Cambia donde dice bottom: 0 por bottom:10px
    Si quieres cambiar el color del texto busca donde dice color: #000 y ahí cambia el código del color que quieras.

    Saludos.

    ResponderEliminar
  37. Gracias, sí funciono, ahora lo de el icono? que preguntaba? bueno tú logo quiero poner el mio en lugar de el de blogger en las pestañas. y es posible ponerle un fondo a las letras para que resalte

    ResponderEliminar
  38. Hola METAuto,

    Ya te he respondido lo del favicon. Con respecto al fondo de la pestaña no creo que se pueda cambiar, o al menos yo no sé hacerlo.
    Saludos.

    ResponderEliminar
  39. Gracias pero sigo sin poder, ahora revise con IE8 mi blog y mis iconos de menu se desplazaron a la derecha y solo se ven tres no todos X(

    ResponderEliminar
  40. Eso es porque tu plantilla no es compatible del todo en Internet Explorer.

    Saludos.

    ResponderEliminar
  41. ash ahora ya lo quite trate de subirlo y ahora no sé puede, me recargo eso significa que no debo ponerlo, tan bien que me habia quedado mta...dirian en morelos Aray!

    ResponderEliminar
  42. Jajajajajajajajajajaja, ya había olvidado esa expresión.
    Creo que lo mejor sería que busques otro menú más serio y profesional si es para una empresa.

    ResponderEliminar
  43. 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
  44. Hola compugraphic,

    El primero no se pierde ya que está alojado en Googleapis, el segundo sí te recomiendo alojarlo en otro lado 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
  45. una pregunta porque no sirven para dominios propios? (
    compugraphic es mi paisano de guate yea) o de que forma si se puede?

    ResponderEliminar
  46. No tengo idea, hay scripts que son así de caprichosos :S

    ResponderEliminar
  47. No me va! se me queda arriba y no lo quita de ahí!!

    http://drawer4everyone.blogspot.com/

    SOCORRO, POTRO: AYUDAME!!!!

    ResponderEliminar
  48. Está arriba porque tienes el código para que se muestre arriba.

    ResponderEliminar
  49. ¿Por que siempre tendrás razón?
    ¡Gracias a este Blog me han puesto un 10 en informática!

    Muchísimas gracias Potro, y saludos desde Bilbao, España.

    ResponderEliminar
  50. No siempre, me equivoco muchas más veces de las que crees ;)
    Felicidades por ese 10 !

    ResponderEliminar
  51. hola capo!!!necesito una ayuda porque cuando pongo este menu las letras siguen apareciendo abajo y el efecto se pierde!!! www.agrupacionsinapsis.blogspot.com!!! muchas gracias!!!

    ResponderEliminar
  52. El segundo código que tienes no es de este menú, sino del anterior para que se muestre arriba.

    ResponderEliminar
  53. Muchas Gracias me funciono bien pero sabes como puedo cambiar las imagenes?

    ResponderEliminar
  54. En el tercer código busca las URL de las imágenes y cámbialas por las tuyas.

    ResponderEliminar
  55. Hola , que le agrego al codigo para que los botones abran otras ventanas en lugar de abrir la misma pagina ?


    saludos , gracias.

    ResponderEliminar
  56. hola Potro...
    Por favor ayudame, he querido siempre mejorar mi blog, y tenerlo siempre COOL jeje, y este menu es lo que andaba buscando por meses, y ahora que al fin lo encuentro....
    NO ME FUNCIONA!!
    no me sirve el efecto, solo me sale un pequeñito icono, el de el signo de interrogacion "http://img695.imageshack.us/img695/2604/iconhelp.png" a la esquina izquierdo-inferior... e intente con el codigo para ponerlo ARRIBA el menu....pero tampoco funciona (EL QUE ME INTERESA ES EL DE ABAJO) por favor AYUDAME Potro, confio en tus conocimientos, y FELICITACIONES, eres un genio para blogger jeje

    ResponderEliminar
  57. aaa por si de pronto necesites saber la direccion de mi blog: www.juventudesmirapasto.blogspot.com

    ResponderEliminar
  58. Ya lo probe en otro blog y si me funciona...pero en el que mas me importa digue sin funcionar, y quisiera saber como hago para colocar este menu, en el footer de mi blog....Muchas gracias de ante mano

    ResponderEliminar
  59. Este menú usa jQuery y tú tienes en el blog un script que se llama Scriptaculous, ambas librerías no son compatibles, así que si tienes Scriptaculous no podrás usar ningún truco que requiera jQuery como por ejemplo este menú.

    ResponderEliminar
  60. HOLA BUERNO ESTA PADRE PERO COMO CAMBIO DE LUGAR ME GUSTARIA A UN COSTADO YN O ABAJO COMO LE AGO

    ResponderEliminar
  61. Sólo lo he probado con esta versión y con la que va arriba.

    ResponderEliminar
  62. Una pregunta amigos...lo estoy utilizando para diseñar una pagina pero me interesa usarlo en forma VERTICAL y no consigo donde tengo q modificar...alguno me podra ayudar con eso?

    ResponderEliminar
  63. Sólo se puede arriba o abajo, alguna vez intenté ponerlo en forma vertical pero no funcionó nada bien.

    ResponderEliminar
  64. ya consegui un enlace...donde descargue uno vertical...lo dejo para q otros se sirvan de usarlo

    tendran q poner en practica su ingles...pero esta rebueno!

    http://net.tutsplus.com/tutorials/javascript-ajax/jquery-os-x-style-dock-and-stack-navigation/

    ResponderEliminar
  65. Hola potro puse este menu para que salga abajo, y no me sale ¿que hice mal?

    ResponderEliminar
  66. no te dije el blog,lomasnueve.blogspot.com, gracias

    ResponderEliminar
  67. No has hecho nada mal, lo que sucede es que usas un script llamado Prototype y no es compatible con jQuery, el script que hace que este menú funcione.

    ResponderEliminar
  68. Gracias por contestarme potro, y el script Prototype podria quitarlo?

    ResponderEliminar
  69. Pues sí puedes quitarlo pero seguro está ahí por una razón así que si lo quitas algo dejará de funcionar.
    Si se te complica mucho este menú o te da muchos problemas puedes probar con este otro que ofrece Vagabundia:
    http://vagabundia.blogspot.com/2010/04/menu-estilo-dock.html

    ResponderEliminar
  70. Potro he qitado el script prototype,y ahora si que me funciona pero no salen ordenados, un saludo

    ResponderEliminar
  71. Quizá haya conflictos con los estilos de la plantilla, prueba el que te mencioné en el otro comentario, quizá con ese tengas más suerte.

    Saludos.

    ResponderEliminar
  72. Pero hay un problema, si bajas la pagina desaparece el efecto...

    ResponderEliminar
  73. Me parece que ese problema sólo se presenta en las plantillas nuevas de Blogger :\

    ResponderEliminar
  74. Pff.. pues yo tengo la plantilla ``sencillo´´... hare un back up del blog actual y probaré

    ResponderEliminar
  75. He hecho los cambios en todos los tipos de blog... me da el mismo fallo, cuando bajas abajo de la página desaparece el efecto..

    ResponderEliminar
  76. La plantilla 'Sencillo' es una de esas plantillas nuevas de Blogger. De todos modos este menú y el otro han estado dando muchos problemas, podrías intentar con una opción parecida que ofrece Vagabundia:
    http://vagabundia.blogspot.com/2010/04/menu-estilo-dock.html

    ResponderEliminar
  77. Estimado Potro, he intentado colocar el menu estático en la parte inferior y me sale este error "Declaración de variable no válida en máscara de página: La variable se utiliza, pero no está definida. Información: document", mi blog es: http://ceipbuzanada.blogspot.com/, podrias ayudarme a colocarlo sin error, gracias.

    ResponderEliminar
  78. Podría ser por alguna URL que estás poniendo en el menú. Necesitaría que pongas de nuevo el menú sin ningún enlace para verificar que se trate de eso.
    En caso de que tampoco puedas entonces podría ser que no estás poniendo el código en el lugar especificado.

    Saludos.

    ResponderEliminar
  79. Hola he intentado poner el menu esilo dock pero no me convence el resultado final y luego he intentado hacer los pasos al revés para borralo de mi blog y ahora me queda un texto en la cabecera de mi blog que no puedo sacar:
    "/* 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; } "

    ¿SABES QUE PUEDO HACER PARA SACARLO?

    Gracias

    ResponderEliminar
  80. Sólo busca ese texto dentro de tu plantilla y elimínalo.

    ResponderEliminar
  81. hola potro saludos desde colombia queria que me ayudaras con este menu para mi blogger http://bestiagames.blogspot.com/ espere una respuesta pronto..

    saludes y exitos

    ResponderEliminar
  82. graxx potro me decidi por el otro menu es que este que esta aca publicado no me sirvio

    ResponderEliminar
  83. por ahora me podrias ayudar en lo de los seguidores al colocar el cuadro de seguidores aparece totalmente en negro

    ResponderEliminar
  84. No veo que tengas puesta la lista de seguidores.

    ResponderEliminar
  85. Buen aporte...!
    Tengo un problema. Hice todo los pasos pero los enlaces que coloco no me llevan al lugar donde quiero, es decir, suponiendo que mi blog fuese "nuevo.blogspot.com" y yo quiero que me lleve a "www.web.com" al hacer clic en el icono del dock, este me lleva a "nuevo.blogspot.com/www.web.com", lo mismo pasa con otras aplicaciones con por ejm el icono fijo en el blog, solo está bién la imágen pero no funciona el enlace...

    ResponderEliminar
  86. Lo que sucede es que estás poniendo las URLs de forma equivocada, donde dice URL del enlace, debes sustituirlo por completo por la URL que quieres que enlace, por ejemplo, http://google.com

    ResponderEliminar
  87. Gracias.
    Tan simple era la cosa.XD
    El Dock ahora funciona de maravillas. Chevere aporte.
    Saludos....

    ResponderEliminar
  88. Buenas, perdona las molestías Potro quería probar poner un menú dock a mi Blog, y googleando llegué hasta aquí

    Me ocurre lo mismo que a Hrod cuando intento poner el dock en la parte inferior del blog de forma fija... cuando lo pongo arriba, si que puedo ponerlo, tengo un problema diferente, pero eso lo obviaré.

    El ERROR es:

    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 processing instruction must begin with the name of the target.

    El error también me lo da el que va antes de "/body", pero yo no veo en ninguna parte espacio o errores, hice un copy/paste de lo que tu pusiste y solo cambie los links para empezar a hacer pruebas con el dock en el blog.

    El código que pegué tal cual es este:

    http://www.megaupload.com/?d=8X98KMB7

    Y el blog es:
    http://dame-linux.tk

    ResponderEliminar
  89. Vale, ya funciona más o menos el dock... más o menos...

    Donde pone

    div id="dock" class="dock"
    div class="dockContainter"

    Y donde pone:

    a class="dockItem"

    Probando lo cambié por comillas simples, y dejo de darme error... quedando algo así:

    div id='dock' class='dock'
    div class='dockContainter'

    y

    a class='dockItem'

    ResponderEliminar
  90. Perdón por postear 2 veces, pero olvide hacer una consulta... ahora cuando el blog esta arriba del todo, funciona bien... pero cuando bajo la página del blog, comienza a funcionar mal.

    ResponderEliminar
  91. Hola SGAN,

    Bienvenido a Ciudad Blogger. Lamentablemente el script ya presenta ese problema desde hace varias semanas y hasta ahora no veo una solución.
    Quizá quieras probar con uno muy parecido que tienen en Vagabundia:
    http://vagabundia.blogspot.com/2010/04/menu-estilo-dock.html

    Saludos.

    ResponderEliminar
  92. No te preocupes... arriba, es que no podía ponerlo por que se me cortaban los iconos al crecer, quedando tapados por la entradas del blog... y por debajo me hacía lo que te comenté... además, los "nombres" de los iconos se veían solo la mitad y la otra mitad no...

    Lo he dejado mas o menos puesto ahora cambiando en el script para los "logos superiores" lo de "top: 0", por "bottom: 0" (para que crezcan de abajo a arriba, alineandose por abajo)... y luego moviendo el objeto/script, poniéndolo encima de las entradas, en vez de debajo del encabezado del blog, quedando algo "parecido", pero que más o menos me funciona.

    ResponderEliminar
  93. No se si me he explicado bien, por si acaso te dejo la web para que lo mires:

    http://dame-linux.tk/

    ResponderEliminar
  94. Pues creo que te ha quedado más que bien, sin duda supiste cómo resolverlo para adaptarlo a tu plantilla y a mi parecer te ha quedado fabuloso :)

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

    ResponderEliminar
  96. Hola Potro
    Oye tengo una dudisima !

    ¿Que es eso de ']]>' ?
    De donde sale?, donde esta?,
    esta cuando ya subi mi pagina con mi dominio?
    o como?!
    AYUDAME !

    ResponderEliminar
  97. ]]>
    Hola Potro
    Oye tengo una dudisima !

    ¿Que es
    'Ahora pega antes de ]]> lo siguiente:' ?
    De donde sale?, donde esta?,
    esta cuando ya subi mi pagina con mi dominio?
    o como?!
    AYUDAME !

    ResponderEliminar
  98. Hola! Es la primera vez que comento en este exelente blog! realmente genial!

    Quería saber como hiciste para que apareciera en tu blog de pruebas, en la parte inferior derecha, esa imagen de Lisa...

    Se que este post no se trata de eso, pero no encontré otro post donde se abordara ese truco.

    Desde ya muchas gracias! Arriba :)

    ResponderEliminar
  99. cek0_1, está ahí en Diseño > Edición de HTML. Utiliza las teclas CTRL + F para localizarlo.

    Nacho, bienvenido a Ciudad Blogger! Aquí está el tutorial que buscas.

    ResponderEliminar
  100. Genial! muchas gracias!

    Igual, seria mucha molestia que me explicaras si se puede agregar un link en esa imagen? osea, al clikear en ella, redirigirme a otra pagina...

    Gracias!

    ResponderEliminar
  101. Ok
    Lo entiendo GRACIAS

    Pero dime
    ¿Que programa uso o como?
    Yo aun no subo mi pagina... y quiero ver como se veria !
    Yo uso HTML-Kit
    ¿Pero donde pongo eso?

    ResponderEliminar
  102. Nacho, encierra el codigo entre <a href="URL del enlace"> y </a> si tienes otra duda sobre ese tema deja el comentario en esa entrada.

    cek0_1, no se si estamos hablando de lo mismo. Estos tutoriales son para Blogger, ahi se cargan las plantillas y ahi se editan. Todo lo que explico aqui es editado desde Blogger.

    ResponderEliminar
  103. HEY !

    Ya ya entiendo... Esque no estaba familiarizado con tu pagina web y no captaba.
    POR FIN ! Ya CAPTE !
    GRACIAS !
    [No entendia, perdon por las molestias]

    ResponderEliminar
  104. Hola, quisiera saber si es posible que al momento de pinchar cualquier botón, y me direccione a la página correspondiente, en ésta poder poner una imagen que indique al usuario en que página está. Me explico, por ejemplo: si pincho el botón que dice "perfil", que en esa página me aparezca una imagen o texto que diga "perfil", que ubique al usuario con respecto al sitio, y que se vea en todo momento, por lo que deberia ser un elemento independiente pegado sobre la página independiente.

    Me llamó la atención los personjes de los simpson que aparecen en la esquina inferior derecha del blog, y pensé que tal vez se pueda hacer. Existe la manera de poner a cadsa página independiente una imagen como esa?

    Desde ya muchas gracias!
    Saludos!

    ResponderEliminar
  105. Hola franz,

    Puedes poner una imagen en un gadget y luego usar este código, sólo que en lugar de la primera línea usarías esta:

    <b:if cond='data:blog.url == &quot;URL de la página&quot;'>

    Eso haría que ese gadget sólo se muestre en determinada página, por lo tanto puedes hacer lo mismo con otros gadgets los cuales contendrán la imagen que deseas.

    Saludos.

    ResponderEliminar
  106. Estupendo menú, muy bonito. Gracias por compartirlo.

    Estoy planteándome usarlo en mi blog pero antes quería saber, ¿hay forma de añadirle submenús?.

    ResponderEliminar
  107. A este tipo de menús no Efraín :(

    ResponderEliminar
  108. Hola, he intentado con este menú, pero me aparecen errores. El resultado es que los iconos aparecen demasiado grandes. a qué se puede deber esto? realicé todos los pasos anteriores. ¿? Espero me puedas responder.
    Ah!, y muchas gracias por mantener este blog!
    Saludos!

    ResponderEliminar
  109. Hola franz, ¿en dónde lo has puesto?

    ResponderEliminar
  110. aquí está el link.
    http://franz-book.blogspot.com/

    ojalá tenga solución.

    Saludos!

    ResponderEliminar
  111. tendrá algo que ver el hecho de que coloqué los botones "subir y bajar" en el blog??

    ResponderEliminar
  112. Así es, ese efecto deslizante usa Scriptaculous y no es compatible con jQuery.
    Prueba cambiar esta parte del último código:

    $(document).ready(
    function()
    {
    $('#dock').Dock(
    {

    Por esta:

    jQuery.noConflict();
    jQuery(document).ready(
    function()
    {
    jQuery(('#dock').Dock(
    {

    ResponderEliminar
  113. ouch! no me funciona, sigue igual.
    :/ creo que tendré que elegir entre dejar el menú o las flechas. Gracias de todos modos!
    Saludos!

    ResponderEliminar
  114. wow :3 que bonito!!... Potro, crees que se pueda colocar en forma vertical?
    Por cierto, estoy que reviso las entradas una a una y recién voy terminando el año 2009 y tengo la lista de marcadores llena hasta el tope xDD! hay demasiada info útil aquí, mis más sinceras felicitaciones y sigue así!
    Se despide. Rizel

    ResponderEliminar
  115. Jajaja, ya mero vienen las vacaciones así que habrá tiempo de leerla todas :)
    Con este me temo que no, ya una vez hice unos cambios pero aunque quedaba de forma vertical el efecto se perdía.
    Alguna vez vi uno vertical en alguna parte, pero no recuerdo ni tantito dónde lo vi :(

    ResponderEliminar
  116. Ya encontré eso del skin, lo que ocurre ahora es que aparecen cuando bajo y a demás no se agrandan los íconos, también el texto queda al lado. La plantilla que utilizo es Picture Window.

    ResponderEliminar
    Respuestas
    1. No mencionas en cuál blog lo has puesto pero ésta podría ser la causa:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  117. Ya introduje los códigos y se ve muy bien en el blog. Eres los máximo. PERO, ahora tengo un problema, no se cómo encontrar el URL que debo poner.
    A ver si me puedes ayudar con eso. Te lo voy a agradecer mucho.
    Si puedes echa un vistazo para que veas como ha quedado y el problema que aparece.
    Mi blog es : www.jvilchez2009.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Jorge, copia de la barra de direcciones de tu navegador la URL de la entrada o de la página que quieras enlazar. Si quieres enlazar varias entradas por categorías entonces mira esta entrada:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  118. Hola, he puesto el menú pero el texto me aparece abajo de los botones y me aparece incompleto el texto. Intenté ver el código pero no es que sea una experta tampoco. Si pudieras ayudarme te lo agradecería para que el texto quede encima de los iconos... este es mi blog.

    http://historiasdeunamenteretorcida.blogspot.mx/

    Gracias, y amo tu blog ;)

    ResponderEliminar
  119. Por cierto, me preguntaba si había la posibilidad de que al hacer clic en las imágenes se abriera el link en otra ventana.

    ResponderEliminar
    Respuestas
    1. No he podido ver el blog, sólo admite invitados :(
      Para lo otro mira esta entrada:
      http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

      Eliminar
  120. Hola!! Me encantan los botones y he conseguido ponerlos correctamente en un blog simple que tengo de prueba pero no en el blog que estoy haciendo como proyecto que es donde quiero ponerlos de verdad. Me aparece sólo el botón de la interrogación en la esquina izquierda, supongo que por algún tipo de conflicto con la plantilla que tengo instalada.

    ¿cómo podría saber cómo solucionarlo? no tengo conocimientos de HTML excepto lo que voy aprendiendo poco a poco con estos tutoriales.

    Muchas gracias!

    ResponderEliminar
  121. Hola!

    Me encantan los botones y he conseguido colocarlos correctamente en un blog simple que tengo de prueba pero no en el que estoy haciendo como proyecto que es donde quiero ponerlos realmente. Sólo se ve el botón de la interrogación en la esquina de la izquierda, supongo que es por algún tipo de conflicto con la plantilla que tengo instalada pero como no tengo conocimientos de HTML no sé cómo identificarlo y solucionarlo. ¿Alguna idea?

    Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Noela, no mencionas en cuál blog tienes el problema pero revisa que no tengas repetidas las versiones de jQuery, ni que estés usando Scriptaculous:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
  122. Potro ayúdame no encuentro eso de: ]]>
    por ningún lado jajajaja porfavor !

    ResponderEliminar
    Respuestas
    1. Hay que dar click en la flechita que está junto a <b:skin>...</b:skin> ahí lo encontrarás.

      Eliminar

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