Construir un menú con CSS Menú Maker

En el blog Cabalas Virtuales me encontré con esta entrada donde Yolanda nos presenta un magnifico tutorial que seguro nos ayudará a crear un menú para nuestro blog sin complicarnos mucho la vida. Yo misma hice uno sin problemas en un blog de pruebas siguiendo las instrucciones de Yoli.

[1] Accedemos a la web de CSS Menú Maker y escogemos el menú que vamos a colocar en el blog.
Por ejemplo este y pinchamos en "Customize":

[2] Se abrirá una nueva pantalla donde veremos un ejemplo del menú elegido y justo debajo, ponemos el número de enlaces que tendrá nuestro menú y pinchamos en "Submit"

[3] Ahora tendremos que ingresar el Título para cada enlace y du dirección (url).

[4] Para comprobar como quedará nuestro menú, pinchamos en "Update your Menu" y podremos ver el menú con nuestros enlaces allí mismo y además en funcionamiento real:

[5] Una vez visto el menú en funcionamiento, si decidimos usarlo, pinchamos en "Generate Menu Code". Nos darán entonces dos opciones:

a)Usando la primera opción tendremos la posibilidad de descargarnos todo lo necesario para construir nuestro menú (html, css, imagenes e instrucciones de instalación) en un archivo zip.

b) Usando la segunda opción tenemos que copiar los códigos generados y pegarlos en nuestra plantilla:

CSS Code Es el código CSS de nuestro menú y hemos de pegarlo en nuestra plantilla justo encima de ]]></b:skin>

HTML Code Este es el código que tenemos que colocar en un elemento html de la plantilla y que luego moveremos debajo de la cabecera en el caso de que hayamos escogido un menú horizontal como el de mi ejemplo.

<ul id='menu'>
<li ><a href='http://http://elescaparatederosa.blogspot.com'>El Escaparate</a></li >
<li ><a href='http://http://cabalasvirtuales.blogspot.com'>Cabalas Virtuales</a></li >
<li ><a href='http://http://eternamentecabreada.blogspot.com'>Eternamente Cabreada</a></li >
</ul>

[6] Completados estos pasos descargamos el archivo con las imagenes del menú pinchando en "Click here to download Image files" Es una archivo en formato zip. que hemos de descomprimir para obtener las imagenes.
Subiremos las imágenes a un alojamiento gratuito o al mismo Blogger y pondremos la dirección de las imagenes en el código CSS del menú, es decir, el primer código que colocamos antes de ]]></b:skin> donde dice

background:transparent url("URL_DE_LA_IMAGEN") repeat-x top left;

En el caso del menú de este ejemplo, serán tres imágenes que no serán difíciles de colocar guiándonos por su nombre.

Enlace: CSS Menú Maker