Menú desplegable para Blogger

En el artículo de hoy hablaremos sobre el menú desplegable de para tu blog, algo muy útil e intuitivo de cara a los lectores, de esta manera pueden seleccionar lo que quieren leer sin problemas.

¿Para qué sirve?

Es una herramienta que nos ayudará a organizar de forma eficiente, agrupando por categorías, los contenidos de nuestro blog.

Antes de empezar, recuerda hacer una copia de seguridad por si te arrepientes.

Empezamos:

1- Copiamos el siguiente código, ¿Por qué? Buena pregunta. Es la estructura de nuestro menú desplegable:

<ul id="Menublog">
 <li><a href="#">Menú Normal1</a></li>
 <li>
 Menú Desplegable
 <ul>
 <li><a href="#">Submenú 1</a></li>
 <li><a href="#">Submenú2</a></li>
 <li><a href="#">Submenú3</a></li>
 </ul>
 </li>
 <li><a href="#">Menú Normal2</a></li>
</ul>


2- Una vez copiado, nos dirigimos al editor de blogger y entramos en Diseño.

Si ya tienes un menú (Crosscol, páginas) puedes eliminarlo (Siempre que hayas hecho copia de seguridad por si no te gusta el nuevo).

3- Nos situamos delante de Multicolumnas o Cross-column y clickamos en añadir un gadget (Tiene que ser justo el que hay debajo de Cabezera):

El gadget a añadir es HTML/JavaScript:

En la ventana que se abre, pegamos el código:

4- Ahora que ya lo tenemos y antes de guardar, debemos ponerlo a nuestro gusto, por ello necesitamos tener en cuenta dos elementos:
     
a) Estructura del menú
         
Botón Sencillo: Es el código  <li><a href="#">Menú Normal1</a></li>
         
Botón con Submenú: Es el código
<li>
Menú Desplegable
<ul>
<li><a href="#">Submenú 1</a></li>
<li><a href="#">Submenú2</a></li>
<li><a href="#">Submenú3</a></li>
</ul>
</li>
         
Truco: Si queréis que "Menú Desplegable también tenga un link, debemos ponerlo así.
<li>
<a href="#">Menú Desplegable</a>
<ul>
<li><a href="#">Submenú 1</a></li>
<li><a href="#">Submenú2</a></li>
<li><a href="#">Submenú3</a></li>
</ul>
</li>

b)  Elementos del menú:

<a href="#"> : Debemos sustituir la almohadilla (#) por el enlace que queramos, recordad NO borrar las comillas. Por ejemplo, si queremos poner que vaya a la página principal, crearíamos así el menú simple: <li><a href="https://writepleasure.blogspot.com.es/">Inicio</a></li>. Lo mismo ocurre con los menús desplegables, añadiendo las categorías o apartados.

Una vez hechos los cambios, no olvides guardar.

5- Aquí no hemos acabado todavía, por ahora lo veremos mal configurado. Vamos al editor de nuevo y nos dirigimos a Plantilla:

Entramos en Personalizar y ahí clickamos en Avanzado. Hacemos scroll y utilizaremos la última opción que tenemos, Añadir CSS:

 

Y pegamos el siguiente código:

/*menu desplegable para El placer de escribir*/
.tabs-inner .widget ul#ybmenud {
 text-align: left;
 display: inline;
 margin: 0;
 padding: 15px 4px 17px 0; /* espacio de padding de los botones del menú */
 list-style: none;
 border:none;
}
.tabs-inner .widget ul#ybmenud li {
 font-size: 12px/24px; /* tamaño de fuente de tu menu */
 font-family: sans-serif; /* fuente de tu menu */
 display: inline-block;
 margin-right: -4px;
 position: relative;
 padding: 12px 20px;
 background: #b8b8b8; /* color de fondo de tu menu */
 float:none;
 cursor: pointer;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
}
.tabs-inner .widget ul#ybmenud li a {
padding:0;
font-family: sans-serif; /* letra para los links del menu */
border:0;
}
.tabs-inner .widget ul#ybmenud li:hover {
 background: #94b1b4; /* color de fondo para cuando pasas el ratón por encima del botón de la barra */
 color: #fff; /* color de la letra cuando pasar con el ratón por encima */
}
.tabs-inner .widget ul#ybmenud li:hover a {
 background: transparent;
 color: #fff; /* color de la letra cuando pasar con el ratón por encima */
}
.tabs-inner .widget ul#ybmenud li ul {
 z-index:1000;
 border:none;
 padding: 0;
 position: absolute;
 top: 45px;
 left: 30px;
 float:none;
 width: 150px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 display: none;
 opacity: 0;
 visibility: hidden;
 -webkit-transiton: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -transition: opacity 0.2s;
}
.tabs-inner .widget ul#ybmenud li ul li {
 background: #94b1b4; /* color del fondo de las pestañas del sub-menu */
 display: block;
 color: #fff; /* color de la letra de los sub-menus */
 text-shadow: 0 -1px 0 #000;
}
ul#ybmenud li ul li a{
 color:#fff /* color de los links de los submenus */
}
.tabs-inner .widget ul#ybmenud li ul li:hover {
 background: #a9bcbe; /* color de fondo cuando pasas el ratón sobre el sub menu */
}
.tabs-inner .widget ul#ybmenud li:hover ul {
 display: block;
 opacity: 1;
 visibility: visible;
}

Una vez pegado, puedes hacer los cambios que creas necesarios en cuanto a colores y letras para adaptarlo a tu blog.


¿Qué te ha parecido? ¿Has probado a hacerlo? ¿Añadirías algún paso más para facilitar su uso? No dudes en dejar tus comentarios, todos estaremos encantados de leerlos.