SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

24 sept. 2014

Poner y Personalizar menú desplegable para Blogger

Buenas!!
Hoy vamos a aprender a poner y personalizar un menú horizontal desplegable.
Este es un tutorial del que hay miles en internet, como todos, pero bueno, explicado a mi manera y solucionando esos problemillas que en otros blogs no solucionan, como el centrar este menú.

Me vi "negra" para centrarlo, lo conseguí, de una manera bastante rudimentaria pero en fin, ahí os lo dejo.

Primerísimo de todo hacemos copia de seguridad por si la liamos pardita.
Luego en un bloc de notas o en el word haremos lo siguiente, mirad:
Copiáis y pegáis éste código:

<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL-Principal-de-tu-BLOG">Inicio</a></li>
<li><a href="#">Pestaña1</a>
<ul>
<li><a href="URL SUB-MENU1">Sub-menu1.1</a></li>
<li><a href="URL SUB-MENU2">Sub-menu1.2</a></li>
</ul>
</li>
<li><a href="#">Pestaña2</a>
<ul>
<li><a href="URL SUB-MENU1">Sub-menu2.1</a></li>
<li><a href="URL SUB-MENU2">Sub-menu2.1</a></li>
</ul>
</li>
<li><a href="URL pestaña sin submenus">Pestaña3</a>
</li>
<li><a href="URL pestaña sin submenus">Pestaña4</a>
</li>
</ul>
</div></div>

Y ahora lo editáis, es decir lo rellenáis, donde dice Pestaña1, Pestaña2... son los menús principales.
Donde dice sub-menu pues son los menús, pestañitas que aparecerán debajo de los principales al pasar el ratón por encima, os dejo una imagen mirad:
¿Veis?
Bueno es muy sencillito, solo tenéis que poner el título del menú principal donde dice Pestaña1, Pestaña2..y así.
Lo mismo para las subpestañitas, pero introduciendo la url de donde queréis que vaya al hacer click donde dice URL SUB-MENU2.

Si queréis poner más pestañitas pues añadir código, copiándolo y pegándolo, es muy facilín.

Bueno, una vez que lo tenéis ya editado, vais a la página de administración de vuestro blog y hacéis click en Diseño.

BORRÁIS el gadget de páginas (no os preocupéis que no se borrarán las páginas)
AÑADÍS un gadget HTML/Javascript.
PEGÁIS el código que habéis editado.
GUARDÁIS TODO

Muy bien, ahora os vais a Plantilla y le dais a Editar HTML.
Abrís el Código CSS (si no sabéis dónde está leeros el curso 3)
Una vez allí, buscáis

</b:skin>

¿Encontrado? Pues pegáis esto:

/* Menú Desplegable LN
----------------------------------------------- */
 #menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#F5A9D0; /* Color de fondo del menú */
border-radius:0px; /* Bordes redondeados, si queremos ponerlos */
}
.menu {
width: 100%;
float: left;
font-family: Arial; /* Tipo de fuente*/
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 0px 0px; /* Bordes redondeados del submenú, si queremos ponerlos */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#F5A9D0 url() bottom right no-repeat;
color:#000000; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #F3A9EB; /* Color de las pestañas al pasar el cursor */
color:#000000; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#F8E0EC; /* Color de fondo de las subpestañitas */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho de las subpestañas */
z-index:100;
border-top:1px solid #fff; /* Borde superior de las subpestañas */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 0px 0px; /* Borde redondo de las subpestañas, si queremos ponerlo */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#F8E0EC; /* Color de las subpestañas al pasar el cursor por encima */
color:#000000; /* Color de las letras*/
text-decoration:none;
}

.menu {
margin-left: 150px; /*Juega con el % o los píxeles para centrar el menú entero*/
}
#menu {text-align:center !important;}
#menu li {display:inline !important; float:none !important; text-align:center !important;}

Si os dais cuenta, en el código ya os he puesto los campos que podéis personalizar bien explicaditos.
Vale, pues solamente quedan 2 detalles, no os mováis de la plantilla, seguimos editándola, ahora buscáis esto :
Tabs
Y tenéis que encontrar esta sección del blog:
Y borráis lo que os he enmarcado en rojo, es decir, TODO lo que haya dentro de tabs, hasta la siguiente sección. es muy fácil, todo borrado.
Ahora pegáis esto:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}


.tabs-outer {z-index:1;} 

Así esa sección ahora os queda así:
 
Muy bien,  ahora en el buscador osea, en el Ctrl+F buscáis la palabra crosscol y encontraréis esto así:
 
Os he marcado ahí dos cuadritos en los que dice: class= 'tabs' ¿verdad? pues los borráis, las dos cositas que os he enmarcado, las borráis.

Y guardáis todo lo que habéis hecho.
Así que solo os queda personalizarlo a vuestro antojo y listo, ya tenéis un menú horizontal desplegable la mar de chulo.

Besotes!
Lireth's Notebook

79 comentarios:

  1. Tú lees la mente??? jajajajaj... Bromas a parte, te explico, es que ayer estuve peleándome toda la mañana para poner el dichoso menú desplegable y no me funciona. A ver si esta tarde, con tus indicaciones, consigo ponerlo de una vez.
    Muchas gracias!!!
    besos

    ResponderEliminar
  2. Hola! la verdad es que es algo que teníamos en mente poner con el tiempo, muchas gracias por compartirlo! besis

    ResponderEliminar
  3. Hola ^_^!!! Que chulo yo quería ponerlo en el blog y con tu explicación parece fácil voy a ver si puedo ^^.
    Un beso

    ResponderEliminar
  4. Otra tarea más para mi blog...

    Gracias

    ResponderEliminar
  5. Coincido con Aisha tienes la bolita mágica heheeh me animo a seguir el paso a paso como por 3 vez, pero bien dicen que la tercera es la vencida. Mil gracias por este super post. Un abrazo

    ResponderEliminar
  6. A ver si algún día nos animamos a poner un menú desplegable, aunque por ahora lo vamos a dejar como está jajaja ¡muchas gracias por estos tutoriales!
    Muaksss

    ResponderEliminar
  7. Que bueno, me encanta, en cuanto tenga más cosillas por el blog lo modifico, gracias

    ResponderEliminar
  8. Me ha funcionado!!! Gracias!!!! :)
    besos!!

    ResponderEliminar
  9. Puse esto tan solo hace un mes y me volví loca para que me cuadrasen las cosas.
    Si llego a saber te espero, que siempre lo explicas todo genial

    ResponderEliminar
  10. No tengo todavía tanto contenido como para necesitarlo, pero vamos que me lo guardo bien guardadito

    ResponderEliminar
  11. Buffff, esto me viene de fabula,ya que tengo pensado poner varias coas, y esto me vendrá bien . gracias por compartir . Un besin

    ResponderEliminar
  12. Me encantan tus tutoriales, te he conocido gracias al club MGC.
    Un saludo,
    Imma

    ResponderEliminar
  13. Vengo de la fiesta de enlaces ,aunque ya te conocía y precisamente este tutorial lo tenía en mente para el segundo blog que he echo www.dukanfacilescalera.blogspot.com
    gracias

    ResponderEliminar
  14. Lo añado a la lista de mejoras para el blog, a ver cuando me puedo poner al lio.
    Muchas gracias por tu ayuda
    Buenas noches

    ResponderEliminar
  15. Esto lo quiero hacer pero en el menu lateral, voy a ver si usando este tuto consigo lo que quiero... muy guay... saludines

    ResponderEliminar
  16. uooo!! Gracias! A ver si me animo y lo pongo en práctica :D

    Besitos ^^,

    ResponderEliminar
  17. uff le tendré que echar un vistazo bueno a esto! gracias ^^

    ResponderEliminar
  18. Yo tambien me lo guardo.....y comparto. Un beso

    ResponderEliminar
  19. He echo lo que has dicho exactamente y mira lo que me sale:
    https://www.dropbox.com/s/b530y979li3hvm0/Captura%20de%20pantalla%202014-10-03%2013.36.29.png?dl=0

    ResponderEliminar
    Respuestas
    1. Se ve así porque coge el código como texto. Hay que ponerlo dentro de la parte de código CSS.

      Si ves que se te complica mucho ponme de administradora y te lo hago o bien cuando esté en casa y tenga un ratin hablamos por el chat de gmail y lo arreglamos.

      Besotes :)

      Eliminar
  20. Entrada muy interesante, si compartida en Twiiter, un saludo #ClubMC

    ResponderEliminar
  21. Comparto y guardo para cuando encuentre un ratito ponerme al lío! Gracias, Lireth!

    ResponderEliminar
  22. Muy bonito post, aunque yo uso wordpress... :)

    Vengo desde el club "me gusta compartir" un saludo!

    ResponderEliminar
  23. Me ha sido de gran ayuda tu tutorial, lo habia intantado con otros pero no me salia...con este lo conseguí!!!! Pero me sale mal una cosita...me harias un gran favor si pudieses pasarte y decirme si sabes porque puede ser. Muchas gracias!: Te dejo mi enlace:) http://tuverdaderotu.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola!! ya me he pasado y he visto los fallitos, uno es el ancho de la barra de menú (habría que jugar tocando los números) y el otro es el color de fondo de las pestañas, la primera de inicio no tiene, así que yo le quitaría el color a las demás pestañas con un transparent.
      Es complicadillo porque es ir probando, para dar con la solución, te habría enviado un correo pero en tu blog, como en el de muuuchas no tenéis un apartado de Contacto, con un mail a la vista para una fácil comunicación.

      Así que te invito a que me mandes un mail para solucionar tu menú si tu no das con la solución.
      Besotes :k

      Eliminar
  24. Hola, quería agradecerte la ayuda que prestas a las que empezamos con esto, el menú funciona a la perfección, Había probado ya en varios sitios pero no lo conseguía, hasta que dí con tu blog, de verdad muy agradecida, volveré a menudo, un beso

    ResponderEliminar
  25. Muchisimas gracias ! habia intentado hacer esto y nunca me salia ! ahora gracias a tu tutorial me salio eres la mejor ! los explicastes bien facil, nada complicado como en otros blogs. Todavia estoy bregando con los colores, pero si quisieras echarle un vistaso y darme tu opinion este es mi blog :http://booksparadises.blogspot.com/

    ResponderEliminar
  26. Hola, te comento porque ya arregle los colores, le añadi una subpestaña pero ahora cuando paso el cursor por las subpestañas estas desaparecen. Me puedes decir que hice mal ? este es mi blog : http://booksparadises.blogspot.com

    ResponderEliminar
  27. Por fin un código impecable que funcionó en todos mis blogs. Aunque bueno, tuve que cambiarle los tonos rosa que no van con lo que escribo....

    ResponderEliminar
  28. Descubrí este blog justamente por esto, tengo que decir que funcionó a la perfección, no sé mucho de CSS o HTML, pero sé lo básico y jugando con los números y otras cositas lo arreglé perfecto para mi blog literario.

    Por cierto ya me he descargado tus cursos y en cuanto pueda seguramente me pondré al corriente. ¡Mil gracias por todo lo que haces!

    ResponderEliminar
  29. Gracias, ya pude colocar mi menu :D sin embargo, cuando se busca "" el codigo a copiar y pegar se coloca detras de "". Si se coloca por delante no funciona.!!!! Del resto exelente post!!!

    Miren mi MENU:
    www.universodelamecatronica.blogspot.com

    ResponderEliminar
  30. Hola Lireth, me gustaría añadirlo a mi blog, sólo que tengo una duda, si no quiero ponerle color ni nada de eso (me gusta que sea la nos proporciona blogger :D ) entonces no agrego el código CSS?


    Otra cosita, yo he llevado a cabo el tutorial de añadir los emoticones en los comentarios (iguales a los tuyo) me gustaría que me dijeras cual es la combinación para hacer la carita lanzando besitos.

    Espero tu respuesta!! :D
    Te envió un montón de Besitos :*

    ResponderEliminar
  31. Hola buenas tardes he echo el tutorial completo de como poner el menú desplegable y por cierto esta quedando genial, pero esto teniendo un problema a la hora de cambiar el color del fondo del menú y es que solo cambia un trocito de la barra lo demás botones se me quedan del color que tu tienes aquí, y no se como hacerlo, si me pudieras ayudar o alguien supiese echarme una mano se lo agradecería por que la verdad esta quedando maravilloso gracias a ti. Un saludo a todos y buenas tardes.

    ResponderEliminar
  32. Hola! muchas gracias, lo he insertado en mi blog y va genial, salvo que no se desplegan las subcarpetas de las subcarpetas...me podrías ayudar, por favor??? Mil gracias!! www.pequesymamis.blogspot.com

    ResponderEliminar
    Respuestas
    1. Solucionadoooo!!!! ya funciona perfectamente!!! graciasssss...es que me había saltado un paso :O
      Lo único que me queda es que el espacio donde se desplegan las subcarpetas, no me cabe todo lo que tengo escrito..y se ve cortado...algún consejo??? besos y gracias!

      Eliminar
    2. Otra cosa, lassubpestañasseesconden tan deprisa, que no deja meterse en ellas para acceder a los enlaces...cómo lo puedo solucionar?? gracias de nuevo

      Eliminar
  33. pregunta!!!!! como puedo personalizar los bordes del menú? eh buscado y no encuentro como :(

    ResponderEliminar
  34. hola!! muchisimas gracias por tus tutoriales. he reado un menu desplegable, antes tenia las paginas pero se me han borrado. ahora no se como hacer que aparezca la informacion cuando pincho en cada item..
    por si quieres y puedes echarle un vistazo. http://mimandoamama.blogspot.com.es/
    mi email mimandoamama@gmail.com

    ResponderEliminar
  35. Buenos dias, he hecho lo que has puesto y funciona perfectamente pero no me cambia el color del fondo de las pestañas y por mas que pongo un codigo ascii distinto al tuyo (rosita) no me lo coge. ¿Cómo puedo hacerlo?.
    Me cambia lo que es el menú entero y las pestañas me las deja rositas...
    Muchas gracias, me corre un poco de prisa!! gracias ;)
    Mi blog para que lo veas: suculaff.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Vale, ya lo he solucionado. Gracias de todas formas por el artículo, me ha servido de mucho :)

      Eliminar
  36. Hola, como puedo poner las fuentes de las pestañas y subpestañas en negrita? gracias!!

    ResponderEliminar
  37. Hola! Muchas gracias! se me ha quedado justo como quería :)

    ResponderEliminar
  38. hola gracias por la ayuda como hago para que al dar clic a la pestana se muestre la informacion que quiero es decir la pestaña se llama directiva y la subpestana organigrama pero al dar click no que no existe la pagina y por fa como cambio los colores

    ResponderEliminar
  39. Hola hice todo como lo explicaste pero tengo el problema de que por ejemplo si alguien buscara algo en mi blog y no lo encuentra, el texto que dice: "No hay entradas que coincidan con la consulta" si se hace desplegar un sub menu, este mensaje se superpone con el submenu, espero que me hayas entendido jaja. es como que el submenu no se pone sobre ese texto

    ResponderEliminar
  40. Me ha caído como anillo al dedo, Gracias!!!

    ResponderEliminar
  41. holaa disculpa no se si es por lo frustrada que estoy..p oero no lo entendiiiii :(

    ResponderEliminar
  42. afgradeceria que me ayudaras, creo un blog para un congreso de jovenes y estoy literalmente pariendo

    ResponderEliminar
  43. Hola, Me gustaría saber como hago para que mi barra quede en el mismo margen que mi portada con respecto al lado izquierdo no soporto que haya ese vacio en el lado izquierdo

    ResponderEliminar
  44. Hola! Gracias por el tutorial! Tengo una situación... no me muestra otros niveles de sub menus. Quiero crear sub sub menus, y lo muestra todo junto y además omite información. Yo asumo que es algo en el codigo html que se debe añadir, pero ni idea. ¡Help!

    ResponderEliminar
  45. Buenos días!!

    no sé si estás ocupada o algo, he visto que los últimos comentarios no tienen respuesta y puede que te pille en un momento muy ajetreado como para responder. De todas formas te dejo mi duda por aquí. Acabo de hacer todo lo que has dicho, y me ha quedado como puedes ver:
    http://esthervampire.blogspot.com.es/

    Es como si no hubiera pestañas, toda la barra ha desaparecido y a la izquierda aparecen los enlaces "Páginas" y bajo él como submenú "Página principal".

    ¿Qué he hecho mal? ¿Cómo puedo arreglarlo?

    Gracias de antemano. Espero tu respuesta.

    ResponderEliminar
  46. Guau!!! Me ha funcionado a la primera! No me lo puedo creer! Un millón de gracias :)

    ResponderEliminar
  47. Gracias por el tutorial.!!!
    Siempre me cuesta modificar códigos.

    Me sirvió de mucho.

    Gracias, Gracias.

    ResponderEliminar
  48. Gracias *3* me has ayudado un montón <3

    ResponderEliminar
  49. Hola lireth, gracias por el tutorial, pude instalar la barra desplegable en mi blog, luego de varios intentos (:
    Pero te quiero preguntar, ¿como puedo hacer para agregarle borde, superior e inferior? Necesito algun otro codo o en el codo que diste los puedo agregar?

    Gracias ^^

    ResponderEliminar
  50. Hola Lireth,

    Muchísimas gracias por el tutorial, me ha sido de gran ayuda pero tengo una duda, en el menú me salen unos puntos entre cada palabra. Así: + Inicio +Fotos +Contacto... ¿Por que puede ser? Me gustaría que saliera solo la palabra.

    Muchas gracias.

    ResponderEliminar
  51. Eres simplemente increíble, me quedó fascinante.

    ResponderEliminar
  52. eres una genio felicitaciones me sirvio :)

    ResponderEliminar
  53. Me ha sido de gran ayuda, muchas gracias!!

    ResponderEliminar
  54. Holi, una duda por que mi menú no se ve en versión móvil??

    ResponderEliminar
  55. ¡Hola!

    ¡Muchísimas gracias! No sabes el tiempo que llevo intentando ponerlo en mi blog y con ninguna explicación que encontraba lograba que me funcionara, pero gracias a la tuya ahí lo tengo /^-^/

    ¡Saludos!^^

    ResponderEliminar
  56. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  57. Genial!!! en algo he metido la pata porque soy un poco torpe, pero aún así queda bien
    MIL GRACIAAAAAAAAAAAS

    ResponderEliminar
  58. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Te había escrito aquí pero cuando he visto que se te puede enviar un correo, pues he borrado los mensajes. Espero que te llegue mi correo!
      Feliz Navidad
      Ana

      Eliminar
  59. Gracias, me ha parecido un tutorial muy útil, me ha ayudado a crear mi menú desplegable y estoy contenta con el resultado. Aunque las pestañas desplegables me han quedado un poco movidas a la derecha... no sé que puedo haber tocado. Si te apetece, pásate por mi blog y así ves el resultado (http://saboreandoideas.blogspot.com)

    ¡Saludos y te sigo leyendo! :)

    ResponderEliminar
  60. Me ha quedado hermoso todo. Cómo hago para poner mis publicaciones , sólo encuentro la opción en páginas como lo hacía antes.
    Gracias !!!!!

    ResponderEliminar
  61. Enhorabuena, logre colocar y modificar el menú, milll gracias.

    ResponderEliminar
  62. Muchisimas gracias por el aporte,,, empecé a armar mi blog esta semana y realmente me ayudó mucho este tutorial... besos

    ResponderEliminar
  63. En efecto.... hice el menú, pero no se despliega U.U

    ResponderEliminar
  64. Hola. Pues yo sigo todo y me queda el menú, pero por más que lo ubique debajo del header me queda como lista de modo vertical. ¿cómo lo podría solucionar?

    ResponderEliminar