71

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

Entradas Relacionadas:

71 comentarios:


Imagine

Perfecto Rosa!!!

Llevo días rompiendome la cabeza en cómo hacer esto, crear un menú y que no dependiera de la categorías del blog. Una vez más, muchas gracias!! Reviso unas cuántas veces al día tu blog!!!!

La Music Magazine

Hola Rosa, estoy mortificada porque no se como meter un fondo en mi blog :( y he buscado por aquí pero no encuentro...
Me podrías ayudar y decirme como?

Rosa

Imagine, ya me contarás que tal te fue con esto, aunque no creo que tengas problemas ;-)

Rosa

la music magazine veo que ya lo has conseguido ¿no? el fondo con las cintas de cassette, porque te referías a eso supongo...

Gabriela

rosa:
es posible poner una imagen en el header a lo largo horizontalmente, sin tener que recortar la imagen???

es una pregunta que me hizo una amiga, pero no se que responderle

mira aquíhttp://imagenesysonidos-stop.blogspot.com/

Rosa

Gabriela, supongo que te refires a que cuando pones una imagen mayor que la cabecera esta se sale por encima de los bordes ¿es eso? Porque si es eso te diré que puede ponerse, solamente tenemos que eliminar esos bordes y listo. Si es esto me lo dices...

Rubén

Después de esto me siento como los niños que van al cole y tienen enchufe con la profe :-)

Gabriela

lo que mi amiga busca es poner la imagen, sin recortarla pero hacerla mas alargada en forma horizontal, como estirar la imagen hacia los lados ???

Rosa

Gabriela, la imagen tiene el tamaño que tiene...puedes recortarla como dices pero no agrandarla en horizontal. Podrías alargar la cabecera pero la imagen seguirá con su tamaño. Supongo que podrá hacerse con algún programa de tratamiento de imágenes, digo supongo porque yo en eso estoy pez :-(

Rosa

Rube, no te sientas mal, ni enchufado, je,je, es solo que estos no me gustaban para tu blog, por la estética digo...

Julian

Rosa!! Buenas noches!!

Queria dejarte una consulta. Resulta que hace tiempo quiero decorar mi pie de página, pero no lo puedo hacer. Veo que muchos aconsejan como hacerlo, diciendo como tienen que modificar el #footer o #main-footer que vi explicado en varios blogs como el tuyo. El problema es que yo a pesar de ir a la edicion html de blogger no tengo en ninguna parte ese famoso #main- footer, te agradecería que me dijeras como hacer

Rosa

Saludos Julian!

Pues supongo que si no está siempre podríamos añadirselo, claro que sin ver la plantilla o el blog, no podré ayudarte demasiado...

Julian

Dime como hacemos, si prefieres que te mande la plantilla vía mail así lo ves. Muchas gracias desde ya

Rosa

Julian, por email está bien y si haces el favor copia su código con los elementos expandidos y pegala en el blog de notas, es como menos problemas me dará para probarla...

Cabalas Virtuales

Tu siempre pillando aunque sea un gripazo!!!, jajaja que es broma, por cierto no sé de donde pille yo esto lo pondrá en el post no? jajaja...
Pero si lo divertido es pillar- practicar-compartir, como tu dices.

Lo peor es copiar, y no llevarlo a la practica, y compartirlo sin muchas ganas, eso debe ser tremendamente aburrido:))

Besotes unos cien...por todos los dias que no digo ni mu...vale?
sorry

Rosa

¡Besotes Yoli!!
Yo antes no podía dejar huella en tu casita, je,je, pero ahora te vas a enterar...

Sullen Lady

Hola Rosa!

Pues yo soy una chica que de pura casualidad cai en tu blog y la erdd es que son muy buenas las cosas que pones aqui, peeer pues yo soy principiante y hay demasiadas cosas que no entiendo, como eso que quiero que mis links se abran en diferentes ventanas y pues en fiiiin demasiadas cosas mas...

Agradeceria que me ayudara!

Gracias!

Rosa

Sullen Lady, estaré encantada de ayudarte. Deja tus dudas concretas en la entrada que corresponda o envíame un email y tranquila, no es difícil...;-)

Lyserg Reginleif.-

tuve un error de interpretacion...
intente con solo uno de los codigos, no con los dos.
utilizando los dos si resultan.
Muchas gracias!

Rosa

Lyserg, je,je, me di cuenta, me llegó el aviso de tu comment al mail y vine volando pero ya la habías borrado, ¡que rápid@!

"woper"

hice todo lo que se suponia que tengo que hacer,... pero el menú sólo me cubre por encima las columnas de post y sidebar derecha..., y además hace qe estas aparezcan por debajo de la sidebar de la izq. (no al lado)

cual es el problema... aun no lo he guardado y si no lo soluciono... quitare el Witch (html) añadido y cuando consiga la solución ya lo pondré

que me sugieres

Rosa

Woper, se me ocurre que no has colocado el código que muestra el menú en el lugar correcto, o que le hayas puesto demasiados links...no se, es que sin ver como queda es complicado...¿Lo has colocado justo debajo del header?

"woper"

bueno da igual... no te lies la cabeza... al final lo voy a quitar y ya está... se me ha ocurrido otra cosa como alternativa...

perdon por las molestias y gracias otra vez

Rosa

Woper, es que tampoco pude ver como te quedaba, tenías el perfil deshabilitado y no fui capaz a recordar el título de tu blog para buscarlo en Google. :-$

Charly

Menos mal que con tus tutoriales y los de mucha gente, nos ayudais a hacer nuestros blogs.

Un abrazo desde Logroño.

Rosa

Charly, menos mal que con tus comentarios y los de mucha gente, me ayudáis a seguir con mi blog.

¡Un abrazo desde Asturias! :-)

luis

Hola Rosa, he estado viendo tu blog y me ha servido de ayuda para muchas cosas por lo cual te estoy muy agradecido, pero llevo varios dias intentado crear un menu como este u otro parecido y no hay manera de que me salga bien.Mi intención es que al pinchar en una entrada me salgan en todas las entradas relacionadas con ese tema.Ahora mismo solo tengo dos entradas, ya que no se si eso se debe hacer al principio o despues. Ya tengo las entradas etiquetada. Agradecería tu ayuda. Un Saludo.
Mi Blog se llama Nemeño y la dirección es http://o-luiso.blogspot.com/
Otro correo: luisgontad@hotmail.com

Rosa

Luis, con dos entradas solamente es imposible que puedas hacer el menú, a no ser que quieras hacerlo ahora y que los enlaces se queden "vacios" y modificarlo cuando tengas más entradas.

Imagina...ahora hay dos entradas, una con la etiqueta "yo" y otra con la etiqueta "tu", si en una de las pestañas del menú pones "yo" con la dirección de esa etiqueta, solo te saldrá esa entrada, ya que no hay más entradas con esa etiqueta...

Otra cosa es que no quieras relacionar el menú con las etiquetas, sino con otros temas como "Inicio, Perfil, Contacto"...o cosas así.

luis

Entendido, empezaré a crear distintas entradas y etiquetaré, para después poder crear el menú.
Creo que es eso lo que me quieres decir. GRACIAS.

Pizca

Rosa:

creo que te estoy invadiendo.... te envié dos mails, pero es que mi desesperación llegó al límite....quiero morir...

es que he intentado lo de la entrada, pero no puedo ponerlo debajo del titulo, y además perdóname por ser tan lenta pero no entendí cómo poner las imágenes, si lo vieras y me dijeras qué puedo hacer sería estupendo....bueno, además de lo que te puse en el mail...uno que dice sidebar =)
Espero no sea mucha molestia, pero es que tus ideas siempre me habían resultado...menos ahora =(

si vas a mi perfil encontrarás tres blogs... del que te hablo es: listacelyc2008 o se llama trabajando por una identidad , esq no recuerdo como lo pone ahi. es una de dos.

porfis =)

Rosa

Pizca, vamos a ver, tranquila...nadie se va a morir aquí y menos aún, por culpa de un blog XD. :D

A ver, no entendí nada...no me ha llegado ningún email tuyo, y he mirado en no deseados también...así que no tengo idea a donde los habrás enviado...
Mi dirección es esta :lejaniaimposible@hotmail.com

Si no, deja un comentario y empieza explicando tus problemillas desde el principio...

Pizca

ya te envié los mails otra vez, espero ahora si lleguen bien...los asuntos son: sidebar pizca y T_T.

Espero no sea mucha la molestia.

Gracias por ser tan amable

Pizca

en todo caso si no llegaran los mails por algún motivo

el blog es listacelyc2008.blogspot.com

si te fijas no pude añadirle una sidebar, y el menú q me diste está bajo el título pero no está completamente estirado, además no supe ponerle las imágenes =)

gracias de antemano

Rosa

Pizca, esta vez si he recibido los emails, ten un poco de paciencia, tengo muchas consultas, a lo largo de esta tarde-noche espero poder mirar lo tuyo.

Noche Mortífera

Hola Rosa, el artículo esta genial. Pero como hacemos para el dropdown menu??

Gracias de antemano!

Rosa

Noche, ¿a qué dropdrown menú te refieres?

Ventrílocuo

Hola Rosa!
finalmente, y gracias a tu ayuda logré ensanchar las columnas y más ¡cumplir el viejo anhelo de tener 3 y que no sean horrorosas! ahora quiero aplicar lo del menú, pero no quiero que sea debajo del título sino dentro de la columna izquierda, en reemplazo de `mis otros blogs', por ejemplo. Y también me interesaría utilizarlo en lugar de las categorías (un botón por cada una de ellas) ¿es posible?
gracias

Rosa

Ventrílocuo, es posible y además hay una forma de hacerlo casi automática, es decir, que cada vez que añadas una nueva etiqueta, se cree un botón para ella (sin que tengas que hacer nada).
Eso si, son menús en vertical, o sea, un botón debajo del otro, ya que para la sidebar uno horizontal como el de esta entrada sería una locura...

Si tienes un mínimo de paciencia, preparo la entrada y, si me da tiempo esta noche, la publico, sino, sería mañana...

ventrílocuo

Sí Rosa, em olvidé de aclararlo, tiene que ser vertical, incluso, si te fijás entre las opciones 'Vertical CSS Menus' es el primero, el negro con botones naranjas, que se ajusta al tono de mi blog (incluso seguro que se puede modificar tamaño y variar los colores de los botones, según lo utilice para links a páginas externas; blogs o categorías) Te espero.
gracias

Ale

Hola rosa! Gracias por responder mi anterior pregunta. Pero ahora necesito una ayudita mas por favor!

Quiero poner uno de esos menus horizontales en mi blog, pero el problema es que no puedo mover elemtentos abajo de la cabecera, unicamente lo puedo poner e el lado derecho o abajo, probe poniendo un menubar, pero solamente te deja poner links...espero que sea facil de solucionar. Entendi todo pero no se como hacer para mover un elemento abajo de la cabecera, porque no me deja, habra que ponerlo en la plantilla HTML directamente?
GRacias

http://buxtosudamerica.blogspot.com

Rosa

Ale, mira al final de esta entrada.

Ventrílocuo

Hola Rosa! no te olvides del menú vertical en sidebar. O es post 'contenidos por categorìas' y yo no me di cuenta.
Gracias!

Rosa

Ventrílocuo, tranquilo que no me he olvidado ;-) Esta noche.

Anónimo

Hola Rosa, gracias por este post, me encanta este tipo de menú por su accesibilidad y visibilidad.
Seguí los pasos uno a uno, pero al guardar el código HTML de la plantilla, me dice:

"Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.
■ HTML6"

No sé qué significa y me da miedo guardar por si acaso rompo algo... Jolín que paleta soy.... Gracias.

nana

Ya lo solucioné, y me salén las pestañas, sólo que me salé todo negro y no de la forma que aparecía en la página web, es decir, no me salen los botones de colores, ni se quedan marcados cuando estás visitando uno de ellos. Aunque al menos lo conseguí... jejeje ^^
Gracias Rosa.

Rosa

nana, ¿estás segura que has añadido las imágenes al menú? :-X

nana

Si, subí las imágenes a blogger y en cada uno de los espacios coloqué la dirección dónde estaban alojadas(aunque no sabía cómo subir imágenes sin crear una entrada así que la creé y la dejé en borradores pero miré la dirección).
El código CSS lo pegué en el apartado de "menús" y el html añadiendo un nuevo elemento.
La cosa es que los enlaces funcionan, pero no se ve el menú que yo escogí.
Gracias por tu ayuda, soy imposible...

Rosa

nana ¿podrías decirme en que blog está colocado para mirarlo? porque en el tuyo no lo veo :-X

nana

Siento el retraso, pero estuve muy liada con los exámenes, al final conseguí poner el menú, (correctamente por fin), el fallo estaba en el host que utilicé para alojar las imágenes. Pero sigue dándome un problemilla, y es que, al colocar el menú, la sidebar izquierda seme desplaza mucho para abajo y no sé que hacer, ni qué medidas están mal. ¿Podrías ayudarme por favor? Muchas gracias.

nana

Además el texto en cada botón no me queda centrado y quisiera además cambiar su color. ¡Pero qué pedigüeña! Gracias, de verdad.

Rosa

nana, para empezar te diré que en el css has colocado código sobrante, debajo de /* END BUBBLE PLASTIC HORIZONTAL MENU */ todo lo demás sobra, eso son los ejemplos segun el color de cada menú y no hay que colocarlos.

En cuanto a la sidebar que se te cae, yo creo más bien que es por algo que has puesto dentro de ella y que es más ancho de lo que tendría que ser...la mascota o algo de eso, no pueden ponerse cosas en la sidebar o las entradas que tengan más anchura de lo que ellas mismas tienen...

nana

Quité la mascota, y la luna, pero la sidebar sigue sin subir... ='(
Y lo del css, quité todos los ejemplos menos el del 'aqua hover', porque de quitarlo, no se me queda el color que yo seleccioné para el menú y sigue quedando como "descolocado"... GRACIAS! Siento si te vuelvo loca con mis "catástrofes".

simsloves

Rosa:
La verdad que tus tutoriales estan barbaron aprendo mucho, pero este e suna excpencion no se como hacer para que tome los cuadraditos de menu porque soea es decir
aparecen pero el cuadrado d emenu no :S si em podes ayudar te l oagradezco?

tenes algun tutorial que diga como hacer plantillas?

Rosa

simsloves, eso es porque no has colocado las urls de las imágenes en el menú tal como está indicado en el paso [6] de la entrada.

No, no tengo un tutorial sobre como hacer una plantilla desde cero, pero imagina que si la construyeses sería algo así como la Mínima de Blogger, de hecho, todas las plantillas de mis blogs son Mínima y luego modificadas con prácticamente todas las cosas que explico en El Escaparate.

UN TEMA CADA DIA

Hola!!! Debo ser el más inútil de la red porque no se como hacer el menu. Mi problema es algo tan básico como las urls. ¿De dónde las saco?. :s
Intentaré explicarlo mejor :P. En mi columna lateral de momento solo tengo 2 elementos (archivo y etiquetas). Con ellos quería empezar a hacer el menu (ya lo iré ampliando). Pero me encuentro con que ninguno tiene url propia, ninguno se puede pulsar (sí los elementos que lo componen). Entonces ¿Cómo me lo monto?.
A ver si me puedes ayudar.

Un saludo y gracias por tu tiempo.

Pd: tu blog es genial. Intentaré seguir todos tus tutoriales/ consejos para ver si así consigo un blog decente :P

Rosa

UN TEMA CADA DIA , los archivos por ejemplo, no pueden usarse para esto, pero imagina que usas las etiquetas, y que en una pestaña del menú pones por ejemplo, Progressive, pues la url que has de poner ahí es la que ves cuando pinchas sobre la etiqueta Progressive en tu navegador arriba, o sea, esta:
http://enjoyhousemusic.blogspot.com/search/label/Progressive

Y así puedes hacer con las otras etiquetas, una vez se pinche ahí, pues irá a todas las entradas con esa etiqueta.

Anónimo

HOLA ROSA GRACIAS POR EL SITIO..

SABES NO ENTIENDO DONDE HAY QUE PEGAR EL CODIGO HTML Y SOBRE ELEMENTOS DE HTML NOSE MUCHO

SOLO ESO GRACIAS

Rosa

Anónimo, pues en la entrada está dicho...en un Gadget HTML, luego lo arrastras a debajo de la cabecera o a donde vayas a mostrarlo.

Yois

Muy buenas noches...

Escribo porque estaba tratando de agregar esta funcionalidad a mi blog para poder darles a mis visitantes visitar algunas de las diferentes cosas que he seccionado para descargar la pagina principal.

en fin, quizas estoy haciendo algo mal pero cuando intento agregar los menus que se crean en la pagina CSSmenumaker.com no me resulta.

El menu se muestra como simples enlaces de texto en vez de botones como deberia de ser :(( ..

Si posible dejame saber que puedo hacer :S ... Gracias

Yois Rivas de El Traqueteo--La W3b--

Rosa

Cuando te descargas el archivo para el menú, hay unas imágenes que hay que subir a un alojamiento y después colocarlas en el código css del menú.

José Angel Mena

mi blog es http://escepticoempirico.blogspot.com

Antes de la consulta darte la enhorabuena por tu página es interesantísima. Me estoy volviendo loco con algo que debe ser trivial. He realizado los pasos en CSSMENUMAKER, he descargado el zip y lo he subido a Skydrive. La consulta se refiere a que código he de colocar antes de /b:skin (no le pongo los corchetes ya que no me deja enviarte esta consulta) para llamar a la hoja de estilo que he colgado en skydrive. Y por último, entiendo que el código que viene en installation instruction (dentro del zip) lo tengo que insertar entero en un gadget.
No me corre prisa, cuando tengas un hueco y puedas estaré muy agradecido.
Como verás mi blog tiene un trasfondo financiero, para lo que necesites en el ámbito financiero, aquí me tienes.
Gracias

Rosa

José Angel Mena , vamos a hacer una cosa...creo que será más cómodo para ambos.

Me envías un email:

lejaniaimposible@hotmail.com

No se te olvide poner en el correo el menú exacto que te has descargado de CSSMENUMAKER.

A la vuelta te enviaré las instrucciones lo más detalladas que me sea posible ¿OK?

Espero el correo...:D

Lacrimas

Que buen aporte rosa como siempre :)
tengo una duda, ahora en la pagina CSS Menú Maker no dice generate Menu code, dice "Download Now" y al darle click te descarga un archivo .rar que contiene una carpeta que dice menu, contiene dentro un archivo que se llama menu_style, ese es el codigo o no? :S

ojalas que me puedad ayudar mis correos

jonathan.acroma@hotmail.com
xdark.blood@gmail.com

Mi Blog - http://xdarkblood.blogspot.com/

Rosa

Lacrimas Ese es el código css si, de todos modos, pincha arriba en mi etiqueta "Menus" y verás varias opciones de menú explicadas paso a paso, algunas sacadas de Menú Marker... quizás tienes suerte y uno de ellos es el que querías.

karcomen

hola rosa:
tengo un blog de videos, quiero crear un menu en concreto drop down, para utilizarlo como indice de mis videos ordenados por tema, por lo que tendria que tener una pagina aunque fuese manual para pornerlo, bien, mi pregunta es tengo que poder desde el principio una url para enlazar o la puedo ir modificando cada vez que me sea necesaria o me surga un nuevo tema.?

saludos

Rosa

karcomen Se modifica o se añade en el código del menú.

karcomen

gracias Rosa, otra pregunta,el menu en el firefox (que es el que uso) no me sale lo mismo en el explorer, que deberia de hacer para que fuesen iguales o casi?

saludos

Rosa

karcomen Pues dependerá de la versión del navegador que se use en cada caso, aunque tu ajustases el CSS del menú para verlo igual o casi en ambos, siempre habrá quien use otra versión y lo vea distinto... es imposible diseñar de tal modo que sirva en todos y cada una de las versiones...

Jennifer

Hola Rosa:
Mil gracias por este tutorial. Como me gusta cambiar diseño de cuando en cuando, ahora he utilizado un menú de CSS Maker pero me hubiera sido imposible insertarlo en mi blog sin tu ayuda.
Un saludo

Ernesto

Hola Rosa, lo primero: increible tu blog... una guia estupenda para poder diseñar uno propio sin saber de programación, gracias.

Una pregunta sobre este menu. Lo he cargado y me sale bien todo excepto que cuando se despliegan los submenus me salen como por detrás del fondo y claro, se ve que se despliega pero no se ve :( puedes verlo en www.elspotdemivida.blogspot.com ... que puedo hacer?? otra cosa es que me gustaría cambiar el alto de la barra de menu y hacerla un pelin más chica... Muchas gracias por adelantado y felicitaciones por el blog!! SAlu2!!!

Rosa

Ernesto Es por el diseño de las nuevas plantillas... el menú está preparado para las anteriores... no sabría decirte si podría modificarse o si debería tocarse el disño de la plantilla... aún no me he "metido" con ellas...

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S