El post ha sido actualizado en 2017 y el menú desplegable funciona correctamente.

Hoy te traigo un tutorial que, aunque parece muy complicado, es la mar de sencillo. Por fin te enseño a poner un menú desplegable en tu blog en blogger, tenía ya ganas de hacerlo.

Recuerdo en 2014 cuando empecé con mi blog en blogger, que no tenía ni idea de cómo iba todo y leí “menú desplegable”, te juro que en ese momento me empezó a dar vueltas la habitación, quien me iba a decir a mi que más tarde estaría enseñándote a ti y a todos mis redheads cosas sobre blogging y blogger y, sobretodo, que yo sería quien te enseñe a ti a poner tu menú desplegable en blogger.

Si no eres usuaria de blogger pero si de wordpress y has llegado a este post de casualidad, te recuerdo que también he explicado cómo crear un menú desplegable en wordpress.

¿Tienes todo preparado? Lo que vas a necesitar es abrir el escritorio de tu blog, para poder entrar en diseño y en plantilla cuando lo necesites y un word, sí, un word, yo lo hago así porque me es más fácil.

Muchas blogueras veo que en muchos post que explican html hablan de editores para poderlo ver mientras lo cambias, yo se que nadie de los que me lee, o al menos casi nadie, tiene este tipo de editores, así que usa un word y ya está, que también vale y tampoco son cambios tan significativos como para que tengas que estarlos viendo en directo.

Me siento como el hombre de bricomania ahora mismo, pero yo te voy a enseñar todo paso a paso, no voy a hacer como ellos que cortan y de repente está ya todo barnizado y perfecto, que cuando lo intentas hacer tú te sale todo del revés. Ahora sí bricomaniaco, ¿empezamos?

Escoger las categorías y subcategorías que quieres poner en el menú.

Yo, antes de empezar con el html ni esos rollos me miro bien mi blog y escojo que categorías y subcategorías quiero poner. Como siempre te voy a poner ejemplos, de un blog de cocina, que tengo hambre.

Ejemplo nº1: Blog de cocina – Puedes hacer categorías que sean primer plato, segundo plato, postres, tentenpiés, etc. Las subcategorías podrían ser por ejemplo en los postres: chocolate (que eso es muy popular y seguro que hay gente que sólo quiere ver postres con eso), con frutas, calientes, frios, no sé, hay mucho donde elegir, yo ahora mismo con el hambre que arrastro buscaba en cualquier categoría.

Ejemplo nº2: Blog de moda/maquillaje – Siempre puedes poner las típicas categorías de verano, invierno, primavera y otoño, incluso te diría que algo que a mi me gusta mucho y le puse a uno de las plantillas personalizadas que hice es ponerlo por colores. En el caso de maquillajes también pueden ser día y noche o por colores. Sólo tú sabes realmente de que hablas en tu blog y que categorías harían que estuviese mejor organizado y fuese más fácil para tus lectores navegar por él. De subcategorías serían todos los colores que hayas usado o también, si eres una fanática de todo tipo de pantalones, incluso puedes hacer una que sea pantalones y de subcategoría todos los tipos de pantalones que has enseñado a combinar.

Ejemplo nº3: Blog de ahorros/prueba de productos – Los hay, seguro que te has topado con alguno o tú eres el dueño de uno. Como categorías podría ser higiene personal, alimentos, productos de limpieza, vamos, todo el tipo de producto que pruebes en tu blog. Y de subcategorías pueden ser las diferentes marcas, de ahorros seguro que tarde o temprano la misma marca lanza otros descuentos y si es de prueba de productos, seguro que puedes hacer más colaboraciones con dicha empresa. Así de fácil.

Todo esto que te acabo de decir, si has leído mi entrada de la importancia de las etiquetas, seguro que ya lo sabías, si no entonces tienes un pequeño repaso rápido, aunque te aconsejo que leas esa entrada también ya que hay información más ampliada.

Lo que sí te aconsejo es que dejes siempre la primera pestaña como “inicio” porque les será más fácil a tus lectores entender que si quieren volver a ver la página de inicio deben clicar allí, también funciona clicando a la imagen de portada, pero he visto sitios en los que no, así que no está de más nunca tener esa pestaña. Yo no lo tengo, no te chives, tengo que hacerlo, sí, se que has mirado a ver si realmente lo tenía o no. Este verano lo haré, pero estoy de entregas hasta arriba y tengo el blog a medias, soy un desastre, no hace falta que me lo recuerdes.

Antes de empezar

Antes: No olvides hacer una copia de seguridad de tu plantilla yendo a Diseño –> Plantilla –> Crear/Restablecer copia de seguridad y guardas la plantilla actual antes de hacer ningún cambio.

Una vez hayas hecho esto, clica en editar html. Haz clic dentro del código y después con el teclado da a Control+F. Se te abrirá un buscador.

En ese buscador debes poner lo siguiente: <div class=’region-inner header-inner’>

Una vez lo hayas encontrado, justo debajo habrá una línea en la que tendrás que cambiar tres cosas:

  • maxwidgets = ‘1’ por maxwidgets = ’10’. Es decir, añadir un 0.
  • showaddelement=’no’ por showaddelement=’yes”. Cambiar el no por el yes.
  • locked=’true’ por locked=’false’. Es decir cambiar true por false para que deje de estar bloqueado.

Una vez hayas hecho esto, guarda los cambios y ya puedes empezar.

Elabora el menú

menu desplegable

Ahora ya sabes que categorías y subcategorías vas a poner en tu blog, así que vamos a elaborar el menú para que puedas instalarlo en tu blog. Ahora debes abrir un word en blanco y pegar allí el siguiente código, no te olvides ninguna coma ni nada, si te olvidas de algo el código no funcionará.

<div id=’mbwnavbar’>
<ul id=’mbwnav’>
<li>
<a href=’URL’>Pestaña 1</a>
</li>
<li>
<a href=’URL’>Pestaña 2</a>
</li>
<li>
<a href=’URL’>Categoría 1</a>
<ul>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
</ul>
</li>
<li>
<a href=’URL’>Categoría 2</a>
<ul>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
</ul>
</li>
<li>
<a href=’URL’>Categoría 3</a>
<ul>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
</ul>
</li>
<li>
<a href=’URL’>Pestaña 3</a>
</li>
<li>

</li></ul>

</div>

Ahora, una vez tengas pegado el código en tu word deberás cambiar lo siguiente:

  • URL: Cambiarlo por la url que corresponda a cada categoría o subcategoría o a la de tu blog si se trata del inicio.
  • Pestaña/Categoría/Subcategoría: Cambiar por el nombre de cada apartado.

Si te fijas, en las categorías desplegables tienes un # donde supuestamente iría el enlace de la pestaña, si quieres que simplemente sea el nombre de la categoría para ordenar tus pestañas desplegables deja el #, si  por el contrario quieres que también el “título” del desplegable también lleve a alguna parte de tu blog en concreto ponle el enlace en el lugar del # y solucionado.

Nota rápida: Recuerda que para saber que url tiene una etiqueta lo único que tienes que hacer es clicar en la etiqueta y copiar la url que aparezca.

¿Necesitas añadir más…?

Añadir más subpestañas: Sólo tienes que copiar <li><a href=’URL’>Subcategoría</a></li> debajo de la última subcategoría y solucionado, cópialo tantas veces como te haga falta, sobretodo no te olvides que va justo antes de </ul>.

Añadir más categorías desplegables: Para esto deberás copiar más código y pegarlo donde lo necesites, en concreto el código será este:

<li>
<a href=’URL’>Categoría 1</a>
<ul>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
<li><a href=’URL’>Subcategoría</a></li>
</ul>
</li>

Añadir más categorías simples, sin desplegables: Simplemente deberás copiar <li><a href=’URL’>Pestaña 1</a></li> y pegarlo donde lo necesites.

Igualmente si tienes cualquier duda o necesitas ayuda para elaborar tu menú, contáctame y te ayudo.

Una vez tengas elaborado tu menú deberás ir a Diseño y en el apartado que pone “cross-column”, donde visualmente estaría el menú, añadir un gadget html/javascript y pegar tu código html con tu menú hecho.

Dale tu toque al menú desplegable

No me mates, lo se, tu menú está todo descuadrado y ni funciona ni nada, lo se, ahora lo que debes hacer es darle tu estilo y todo irá de maravilla. ¿cómo dices? Con CSS. Ves a Plantilla –> Personalizar –> Avanzado –> Añadir CSS y pega este código (no te olvides ni una coma):

/**MBW Navgation bar**/
#mbwnavbar {
background: #F78181;
width: 800px;
color: #000000;
margin: 0px;
padding: 0;
position: relative;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height:35px;
}
#mbwnav {
margin: 0;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbwnav li {
list-style: none;
margin: 0;
padding: 0;
border-left: 0px solid #333;
border-right: 0px solid #333;
height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #ffffff;
display: block;
font: bold 12px Helvetica, sans-serif;
margin: 0;
padding: 10px 10px 10px 10px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #F6CED8;
color: #000000;
display: block;
text-decoration: none;
margin: 0;
padding: 10px 10px 10px 10px;
}
#mbwnav li {
float: left;
padding: 0;
}
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbwnav li ul a {
width: 140px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #F6CED8;
width: 150px;
color: #000000;
display: block;
font: bold 12px Helvetica, sans-serif;
margin: 0;
padding: 10px 10px 10px 10px;
text-decoration: none;
z-index:9999;
border-bottom: 1px solid #000000;
}
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #ffffff;
color: #000000;
display: block; margin: 0;
padding: 10px 10px 10px 10px;
text-decoration: none;
}

Para encontrar el codigo del color que quieres puedes encontrar una gama amplia en esta página, puedes cambiar todos los que son #numerodelcolor, además puedes cambiar el tipo de borde y la letra y tamaño de ésta. Es muy fácil y lo único que tendrás que ir haciendo es tocando lo que te he marcado en azul hasta que encuentres. Tienes un visor que te va enseñando los cambios, el problema es que no podrás ver las subpestañas, así que yo lo que hago es ir guardando y viendo el blog directamente para así poder ver el desplegable y todo.

Te animo a que vayas probando y toqueteando, no te preocupes si lo lías todo, puedes volver a empezar. Simplemente si haces un cambio que te gusta, te recomiendo que te copies el código en un word, por si la lías, tienes hecho ya un trozo y no tienes que volver a empezar de cero.

Paréntesis informativo:

Mientras creaba este submenú en mi blog de pruebas he visto que aparecían unas líneas enmedio, así que he decidido también añadirlo al tutorial por si a ti también te pasa, si te aparece algo como esto:

menu desplegable lineas

No te preocupes, simplemente en el mismo sitio donde estás, es decir Diseño –> Plantilla –> Personalizar –> Avanzado, si usas una plantilla simple encontrarás una pestaña que pone “Acentos”, los pones transparentes y voilá!

Captura

Últimos consejos:

  1. Utiliza colores que combinen bien con tu blog, no pongas colores a lo loco y intenta que los colores de la tipografía y el fondo no contrasten mucho. Por ejemplo, no pongas fondo negro con letras verde fosforito porque no se va a poder ver nada bien y va a molestar a la vista.
  2. No hagas desplegables infinitos, escoge tus categorías y subcategorías importantes. Si tienes muchas, revisa seriamente tu blog porque entonces quiere decir que estás abarcando mucho más trabajo del que deberías y puedes acabar agobiándote.
  3. Pon las categorías importantes, no pongas una pestaña dedicada a premios. Todos conocemos los premios que nos damos unos blogs a otros, se agradecen mucho pero no hace falta que uses el menú para ponerlos, yo cometí ese error y me arrepiento mucho. El menú es una forma muy  visual de ver de que trata tu blog.
  4. Tomate con calma esto de hacer tu menú desplegable, como si tardas una semana, sin agobios.

¿Que te ha parecido esta entrada? A mi me ha encantado hacerla para ti, creo que es una de las que más me ha gustado hacer, así que espero que haya muchas más que me encante hacer 🙂 Para cualquier duda o sugerencia de tutorial no dudes en ponerte en contacto conmigo, respondo a todos los mails.

Un besazo enorme!

Laura Montón.

Pin It on Pinterest

Share This