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.
No hay comentarios:
Publicar un comentario