Es un proyecto que hace un tiempo empecé y quiero compartir con ustedes, espero que les guste.
Es totalmente personalizable mediante CSS.
Al abrir el blog o página el menu va entrando desde abajo con efecto deslizante.
Ver Imágenes.
Se le puede poner imágenes o texto.
Imágenes junto con texto.
La altura se adapta al tamaño de la imagen.
Se puede elegir el tamaño y colores.
También se puede mostrar en el centro.
Queda siempre fijo en la parte de abajo del blog o página, con un ancho del 100%, adapatandose a la resolución del monitor del visitante.
Se puede cambiar el ancho por un valor fijo, junto con su posición.
A la derecha tiene un botón de cierre del menú.
Al cerrar el menú queda una imagen fija para poder abrirlo nuevamente.
Las imágenes de los botones se pueden cambiar por otras, a su gusto.
Dentro del menú puede ir imágenes junto con texto, solo imágenes o solo texto.
Se le puede colocar distintos tipos de botones sociales.
La altura se adapta a la imagen o se pueden ponerla con una altura fija.
Como vieron en las imágenes de arriba se puede cambiar el color del fondo y del texto.
¿Cómo poner el menú?
El código va dentro del cuerpo del documento entre las etiquetas <body> y </body>
Yo lo puse debajo de <body>
En Blogger también se puede poner en un gadget HTML/Javascript.
Código:
<div id="vkumenubardos" style="padding:4px;position:fixed;z-index:990;right:0;bottom:0;display:none;">Lo de Rojo es el contenido que se ve en el menú, ahí muestro el ejemplo con imágenes y texto.
<!-- Acá va el botón para abrir el menú --><a href="javascript:abVkuMenuBar()"><img src="http://img44.xooimage.com/files/c/d/a/top-1eb247f.png" style="border: 0; margin-right: 5px; width:24px; height:24px;" /></a>
</div>
<!-- Personalizar menú, color del fondo y borde --><div id="vkumenubar" style="padding:0;position:fixed;z-index:999;left:0px;bottom:-100px;width:100%;background-color:#555;border-top: 4px double #ccc;">
<!-- Acá va el botón para cerrar el menú --><a href="javascript:closeVkuMenuBar()"><img src="http://img10.xooimage.com/files/0/d/2/1279873511_close_box_red-1e94d34.png" style=" float: right; border: 0;margin-right: 10px;" /></a>
<!-- Acá van las imágenes con sus link -->
<a class='linkvkumenubar' href='http://twitter.com/v_ku' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img41.xooimage.com/files/7/9/5/logo_twitter-1eb2409.gif" title='Twitter'/></a>
<a class='linkvkumenubar' href='http://www.facebook.com/loseasi' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img49.xooimage.com/files/0/f/f/logo_facebook-1eb23fb.gif" title='Facebook'/></a>
<a class='linkvkumenubar' href='http://www.youtube.com/user/thevku' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img41.xooimage.com/files/b/6/1/logo_youtube-1eb240c.gif" title='You Tube'/></a>
<a class='linkvkumenubar' href='http://www.myspace.com' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img45.xooimage.com/files/2/b/3/logo_myspace-1eb2423.gif" title='MySpace'/></a>
<a class='linkvkumenubar' href='http://feeds.feedburner.com/blogspot/qygH' target='_blank'><img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img43.xooimage.com/files/3/f/5/rss-1eb2412.jpeg" title='Rss'/></a>
<a style="text-decoration: none; bottom:17px; margin:0 10px;position:relative;color:fff" href='http://loseasi.blogspot.com' target='_blank'>¿Cómo se hace...?</a><!-- Fin imágenes con sus link -->
</div>
<script src='http://sites.google.com/site/vkuloseasi/archivos/vkumenubar.js' type='text/javascript'></script>
Personalizar cambiando las imágenes, link, etc., o poner sus propios botones.
Si quieren pueden descargar el archivo JS y subirlo a otro servidor, sin modificar los datos.
O sustituir:
<script src='http://sites.google.com/site/vkuloseasi/archivos/vkumenubar.js' type='text/javascript'></script>Y poner en su lugar el script dentro del archivo.
Del siguiente modo:
<script type="text/javascript">
// aquí va el contenido del script ...
</script>
Si tienen dudas pueden dejar un comentario.
Leer Importante...
Enlaza el blog ...
Ultimos comentarios
Buenos días,vku:5)
Su tema y una guía única en su creatividad :9)
Añadido Sostamlha éxito, pero más tarde :15)
Y tengo una propuesta sencilla, que es un
Selección de las imágenes más bien pequeño
Añadido a la entrada y
32px
http://www.iconfinder.com/search/?q=social+buttons
Gustó mucho tu blog y el primer post espero
que me confidencialmente qué nivel de :17)
¡Buena suerte
Gracias por el dato de las imágenes, pero yo puse como ejemplo las redes sociales.
Pero en el menú podes poner lo que quieras, hasta un iframe, link de inicio, botones para cambiar el tamaño del texto, color del blog, no se muchas cosas, hasta el reproductor de una radio como dejotas.
Hola amigo
Vi lo de tu hijo, lo lamento mucho, cuando puedas por favor respondeme
tengo un likesite FBLIKEES, en el cual quiero meter esta barra, pero no me aparece, solo un alert de href no valid command
Podrías darme este código para poder usarse en otro sitio? me gust+o la barra negra de as imagenes de arriba
Pon el código con el script incluido sin imágenes y despues guarda a ver si te da error, si no te da error agrega los link con tus imágenes y guarda, fijate que este bien cerradas las etiquetas
@ Vku: Gracias VKU, ya quedó, ahora te tengo dos preguntas, podrías conectarte al chat de ayer? Gracias
hola yo pongo el codigo y me aparece perfectamente el menu solo que cuando le doy clic en el boton de cerra este nose oculta
andikirus tu perfil no esta disponible, no pude ver el error. Dejame un enlace en donde lo has colocado.
@ Vku:
te dejo el enlace temporal
http://friends.webcindario.com/home/index.php
Yo lo veo bien, pero veo que abajo tienes una tabla con un monton de link
@ Vku:
y si te lo cierra.
crees ke la tabla sea el poblema?
creo que al footer le tienes que dar un margen inferior.
Oh que genial! yo estaba buscando alguna forma de reemplazar el menu que va debajo del header o el menu lateral (el cual no me sale bien jejeje) y probando con tu código, me ha salido a la perfección :)
Te agradezco mucho la ayuda y si me lo permites, enlazaré tu blog con el mío como agradecimiento :D
Solo tengo una pregunta con respecto a esto, como le cambio el tamaño a las imágenes porque me salen muy pequeñas, no encuentro la parte del código donde se edite el tamaño del as imágenes, jejeje... :23)
A las imágenes les agregas o cambias, ej la de twitter: width:24px; height:24px;
Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.
Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.
Nota: solo los miembros de este blog pueden publicar comentarios.