miércoles, 6 de abril de 2011

CREAR MENUS DESPLEGABLES EN TU BLOG

Los menus son una forma de organizar la navegación en tus publicaciones..


Bien empecemos de lo mas facil a lo mas complicado.

I. Menu desplegable con 'pureCSSmenu.com'. (facil)
(Solo funciona en la parte de abajo, ver ej. mas abajo)
1. Entra en el primer link registrate y crea tu menu. (es muy facil)

http://purecssmenu.com/
http://chicablogger.com/pure-css-menu-generador-de-menus-desplegables-sin-javascript/
2. Descargalo.
3. Descomprime y edita el archivo purecssmenu.html con un editor de texto. Ej:Notepad, etc.
4. Copia desde '<style>..... hasta  </ul>'
5. Pegalo en un gadget de tipo  HTML Javascript.
6. Listo tienes un menus desplegable. !!Pero en la parte de abajo¡¡.

II. Menu desplegable en la parte izquierda ó derecha. 

http://www.devinrolsen.com/pure-css-vertical-menu/ (en ingles).
Ver ejemplo en la parte izquierda y en la parte derecha.
  1. Descarga el archivo 'menui.zip' ó 'menud.zip' y descomprimelo en un lugar apropiado.
  2. Abre el archivo 'menu-v.html' con un navegador. (IExplorer, Firefox,etc)  Esto para ver como se verá tu menu.
  3. Abre el archivo 'menu-v.html' con un editor de texto. (Notepad,WordPad, Notepad++,etc).
  4. Busca las partes encerradas entre '/* ... */' ahi se explica que es lo que debes cambiar para personalizar los colores.
  5. Guarda los cambios que hiciste.
  6. Vuelve a seguir los pasos desde el punto 2. Hasta que estes satisfecho.
  7. Copia desde la parte de '<style>..............  hasta ..............</div>' y pegalo en un gadget en la parte izquierda ó derecha de tu blog.
.III. Menu desplegable en la parte superior.

  1. Descarga el archivo 'menu-h.zip' y descomprimelo en una carpeta a tu gusto.
  2. Abre el archivo 'menu-h.html' con un navegador. (IExplorer, Firefox,etc)  Esto para ver como se verá tu menu.
  3. Abre el archivo 'menu-h.html' con un editor de texto. (Notepad,WordPad, Notepad++,etc).
  4. Busca las partes encerradas entre '/* ... */' ahi se explica que es lo que debes cambiar para personalizar los colores.
  5. Guarda los cambios que hiciste.
  6. Vuelve a seguir los pasos desde el punto 2. Hasta que estes satisfecho.
.Esta parte es un poco complicado.
En la parte de <div style="position: absolute; left: -5px; top: -5px;">
Cambia los valores de 'left' y 'top' para ubicar el menu donde se desee, dependiendo de que si el gadget esta en la parte izquierda o en la parte derecha.
Tambien hay que cambiar el primer 'width: 400%;' que aparece despues de <style>.
.
.
.

No hay comentarios:

Publicar un comentario