Twitter Delicious Facebook Digg Stumbleupon Favorites More

CSS MENU MAKER ( Generador de menús ) para blogger



detalles

 para blogger



He recibido varias peticiones sobre menús horizontales, ya hablamos sobre el clásico menú horizontal y sobre el menú despegable
Esta vez es algo diferente, un generador de menús, la forma de crearlo es muy sencilla para ello accederemos a CSS MENU MAKERencontraremos a la izquierda menús horizontales y a la derecha verticales.
Escogemos el que mejor se adapte nuestro blog.





Ver efecto en Menú Crystal

Una vez decididos...

Clicamos en Customize


Agregamos el número de temas que harán de enlace para en el menú y clicamos en Submit

Llenamos los campos requeridos para el título y agregamos a la derecha la url del lugar que vamos a enlazar. Clicamos de nuevo en Submit
A continuación nos proporciona dos códigos copiaremos el segundo que dice: 
CSS Code y nos situaremos en plantilla Edición html
Justo antes de ]]></b:skin> lo pegaremos.

Luego copiaremos donde dice HTML Code nos situaremos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<ul id='menu'>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
</ul>

Guardamos los cambios y arrastramos esa etiqueta hasta el lugar deseado. Volveremos de nuevo al lugar donde copiamos los códigos para la plantilla y el elemento de página y descargaremos donde dice "Click here to download Image files" se trata de un archivozip con las imágenes del menú.Abriremos la carpeta "images" y extraeremos las imágenes en formato gif. que más tarde alojaremos en un servidor para conseguir la url de las imágenes.Esa url la debemos pegar en el código que agregamos a la CSS de nuestra plantilla.
Viene detallado donde agregarla, deberéis buscar donde dice algo así como:
background:transparent url("images/nombre-de-la-imagen.gif") .......

0 comentarios:

Publicar un comentario

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates