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 Diseño > Edición de HTML y después de <head> pega esto:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>
Ahora pega antes de ]]></b:skin> lo siguiente:
/* Menu Dock
----------------------------------------------- */
.dock {
position: fixed;
width: 100%;
bottom: 40px;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.dockItem img {
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
position: absolute;
}
Por último busca la etiqueta </body> y antes de ella pega esto:
<div id="dock" class="dock">
<div class="dockContainter">
<a class="dockItem" href="URL del enlace"><img src="http://3.bp.blogspot.com/_qgZA1ny_dAs/S8yeGOygORI/AAAAAAAAECk/MabUFPSv1CA/s1600/Icon_Home.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeGum8szI/AAAAAAAAEC0/ogrG1G_NSaQ/s1600/Icon_Rss.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUfY2TpI/AAAAAAAAEC8/WLyxFS0Tv9U/s1600/Icon_Twitter.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://1.bp.blogspot.com/_qgZA1ny_dAs/S8yeFsjwO4I/AAAAAAAAECc/URJd0EO38d0/s1600/Icon_Facebook.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://4.bp.blogspot.com/_qgZA1ny_dAs/S8yeGYiAfpI/AAAAAAAAECs/ej5Vj7cAj68/s1600/Icon_Picasa.PNG"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeUnjJ75I/AAAAAAAAEDE/RkHWNQmOmeE/s1600/Icon_Mail.png"/><span>Título del enlace</span></a>
<a class="dockItem" href="URL del enlace"><img src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S8yeFT8iuqI/AAAAAAAAECU/ZAZaxpJ7j84/s1600/Icon_Help.png"/><span>Título del enlace</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)
}
);
</script>
Cambia las URL 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.
Ver también | Parte 1
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
75 comentarios:
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.
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!
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.
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.
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
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
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!
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!
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!
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!
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í.
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.
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)
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.
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
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.
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!!!
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!
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!!!
Ojalá y andes despistado sólo por las fiestas decembrinas, jaja.
Un abrazo!
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!!!
Eso se llama Bloggerzheimer, jaja.
Un abrazo!
por que me salen los iconos detras del blogg??
menudo pakete jijiji estoy hecho
benga gracias
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 :(
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.
ah
gracias
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.
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.
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!
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.
ciertoo habia un espacio en la etiqueta pero se creaba el solo... gracias por tu ayuda potro..
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..!!
Necesitaría que pongas el código en tu plantilla para ver el error.
Saludos.
salee asii identicooo.... osea sale esoo en lugar del boton :(
Sí, pero necesito que pongas el código en la plantilla para poder ver el código fuente y así saber qué sucede.
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....
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.
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
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.
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(
Eso es porque tu plantilla no es compatible del todo en Internet Explorer.
Saludos.
¿Y hay forma de arreglarlo?
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!
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.
gracias por el aporte Potro, esta muy bueno ya lo estoy usando, http://compugraphic.blogspot.com; tengo una duda respecto a los archivos js que utilizas, me gustaria saber si estos archivos no se pierde con el tiempo y donde podria obtenerlos en caso se perdieran, para poder colocarlos en algun otro host que tenga, gracias de nuevo.
Hola compugraphic,
El primero no se pierde ya que está alojado en Googleapis, el segundo sí te recomiendo alojarlo en otro 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.
una pregunta porque no sirven para dominios propios? (
compugraphic es mi paisano de guate yea) o de que forma si se puede?
No tengo idea, hay scripts que son así de caprichosos :S
No me va! se me queda arriba y no lo quita de ahí!!
http://drawer4everyone.blogspot.com/
SOCORRO, POTRO: AYUDAME!!!!
Está arriba porque tienes el código para que se muestre arriba.
¿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.
No siempre, me equivoco muchas más veces de las que crees ;)
Felicidades por ese 10 !
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!!!
El segundo código que tienes no es de este menú, sino del anterior para que se muestre arriba.
Muchas Gracias me funciono bien pero sabes como puedo cambiar las imagenes?
En el tercer código busca las URL de las imágenes y cámbialas por las tuyas.
Hola , que le agrego al codigo para que los botones abran otras ventanas en lugar de abrir la misma pagina ?
saludos , gracias.
Lee esta entrada, ahí se explica cómo.
Saludos.
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
aaa por si de pronto necesites saber la direccion de mi blog: www.juventudesmirapasto.blogspot.com
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
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ú.
HOLA BUERNO ESTA PADRE PERO COMO CAMBIO DE LUGAR ME GUSTARIA A UN COSTADO YN O ABAJO COMO LE AGO
Sólo lo he probado con esta versión y con la que va arriba.
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?
Sólo se puede arriba o abajo, alguna vez intenté ponerlo en forma vertical pero no funcionó nada bien.
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/
Gracias por compartirlo ;)
Hola potro puse este menu para que salga abajo, y no me sale ¿que hice mal?
no te dije el blog,lomasnueve.blogspot.com, gracias
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.
Gracias por contestarme potro, y el script Prototype podria quitarlo?
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
Potro he qitado el script prototype,y ahora si que me funciona pero no salen ordenados, un saludo
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.
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.