Tutorial: Menú desplegable para blogger

Cómo hacer un menú desplegable en blogger en 5 pasos


Cómo hacer un menú desplegable en blogger



Tutorial para hacer un menú desplegable en blogger de la forma más sencilla.

Un menú deplegable puede ser una estupenda opción cuando empezamos a tener muchos contenidos en nuestro blog y queremos organizarlos de la forma más eficiente agrupando por categorías y subcategorías.
Hacer un menú desplegable en blogger es muy sencillo.
Recuerda siempre que antes de empezar a hacer cambios es recomendable que hagas una copia de seguridad de tu blog.
Paso 1.


Copia el siguiente código:
<div id=’NavMenu’>
<div id=’NavMenuleft’>
<ul id=’nav’>
<li><a href=’#’>Menu normal</a></li>
<li>
<a href=’#’>Menu desplegable 1</a>
<ul>
<li><a href=’#‘>submenu 1</a></li>
<li><a href=’#’>submenu 2</a></li>
<li><a href=’#’>submenu 3</a></li>
</ul>
</li>
<li>
<a href=’#’>Menu desplegable 2</a>
<ul>
<li><a href=’#’>submenu 1</a></li>
<li><a href=’#’>submenu 2</a></li>
<li><a href=’#’>submenu 3</a></li>
<li><a href=’#’>submenu 4</a></li>
</ul>
</li></ul>
</div>
</div>

Paso 2
Abre el editor de blogger y ve a la opción de Diseño.

Si ya tienes un menú (crosscol, páginas) puedes eliminarlo o cambiarlo de lugar (por si no te gusta como queda el nuevo y quieres volver a poner el antiguo), para cambiarlo de lugar sitúate sobre los puntitos que hay en el lado derecho (puntitos blancos en vertical, fondo gris) y cuando en tu puntero salga una cruz lo puedes pinchar y mover para ponerlo en el lateral mientras haces los cambios, si al final te gusta el resultado ya puedes eliminar este menú.  Importante cuando hagas cambios en diseño, si mueves elementos sobretodo, acuérdate
Cómo hacer menú desplegable en blogger

Paso 3.

Haz click a la derecha en Añadir un gadget y el menú de opciones que te sale elige la opción HTML/Javascript,  se abrirá una ventana pequeña pega el código que has copiado antes en el espacio donde pone contenido, el título lo puedes dejar en blanco o poner menú como tu quieras


Hacer menú desplegable en blogger
Paso 4.


Una  vez pegado el texto tienes que modificarlo para configurar tu menú en la forma que tu quieras, para ello hay 3 elementos que tienes que tener en cuenta:
La estructura del menú:

  • Botón sencillo (sin submenús): el botón sencillo corresponde con este trozo de código:<li><a href=’#’>Menu normal</a></li>
  • Botón con submenú: el botón con submenú corresponde con este trozo de código:
    <li>
    <a href=’#’>Menu desplegable 1</a>
    <ul>
    <li><a href=’#‘>submenu 1</a></li>
    <li><a href=’#’>submenu 2</a></li>
    <li><a href=’#’>submenu 3</a></li>
    </ul>
    </li>

Los elementos del menú:

  • <a href=’#‘>: tienes que cambiar el símbolo de la # por la url o dirección web a la que quieres que vaya el enlace (ojo con las comillas no las borres sin querer la url tiene que ir entre las comillas, sólo tienes que sustituir la #, ejemplo: si tengo <a href=’#‘> y quiero que vaya a trucos-diseno-web.euroresidentes.com tendría que poner:<a href=’http://www.trucos-diseno-web.euroresidentes.com‘>
  • Donde pone las palabras menús y submenús sustituir por los las categorías o apartados de vuestro blog.
  • Una vez hechos los cambios acuérdate de guardarlos.

menú desplegable en blogger
Paso 5.

Una vez definida la estructura del menú el siguiente paso es darle forma y personalizarlo, para ello tienes que ir al editor de blogger y hacer click en Plantilla/Personalizar/Avanzado/Añadir CSS y copiar y pegar el siguiente código:

/* Menu desplegable

—————- */






.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffffff; text-align: left !important;}/*Posición del texto del menu*/
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #eeeeee; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #ffffff; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border: 1px solid #333333; /*Borde del menú*/
background: #333333; /*Color de fondo del menú*/
}
#NavMenuleft {
width: 923px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:#fff;}/*Color del fondo del menu*/
#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
font: normal 16px Arial; /*Tamaño y tipo de fuente de las pestañas */
color: #666666; /*Color del texto de las pestañas*/
display: block;
margin: 0;
padding: 10px 15px 10px;
}
#nav li a:hover, #nav li a:active {
color: #cccccc; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal 16px Arial; /*Tamaño y tipo de fuente de los submenus*/
background: #eeeeee; /*Color del fondo de las subpestañas*/
width: 150px; /*Ancho de los submenus*/
color: #333333; /*Color del texto de los submenus*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff; /*Color del fondo de los submenus al pasar el ratón por encima*/
color: #222222; /*Color del texto de los submenus al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }

Hacer menú desplegable en blogger
Una vez pegado el código puedes hacer los cambios para personalizarlo y adaptarlo la estética de tu blog, el texto en rojo te indica a que parte pertenece ese trozo de código y en azul te he puesto los valores que puedes cambiar como el color de texto, fondos, tipo de letra…Recuerda después de hacer los cambios guardar los cambios siempre. Podéis ver el ejemplo de menú en el blog de pruebas
Espero que os sirva..
Feliz día!
Temas relacionados: 

52 Respuestas

  1. Fernando 2 años ago
  2. Diario surrealista 2 años ago
  3. Anónimo 2 años ago
    • Sondar 1 año ago
  4. Daniela Agrafojo 2 años ago
  5. Masajes Dio 2 años ago
  6. Akeboshi Hikaru 2 años ago
  7. JUANVALEER 2 años ago
  8. PASE DE BARANDA 2 años ago
  9. Carl 2 años ago
  10. ARIEL SALVADOR 2 años ago
  11. robert ku canche 2 años ago
  12. Anónimo 2 años ago
  13. Tutoras 3º y 4º 2 años ago
    • trinimora 2 años ago
  14. Chele Guada 2 años ago
  15. karol ayala 2 años ago
  16. Pedro Rocha 2 años ago
    • Chele Guada 2 años ago
  17. Isfannyable S.C 2 años ago
  18. Marta Lucena 2 años ago
  19. nuria daya 2 años ago
  20. Astrid Strasser 2 años ago
  21. Cheilali Tarazona 2 años ago
  22. María G 2 años ago
  23. Legendary Darkness 2 años ago
    • Anónimo 1 año ago
    • Anónimo 1 año ago
    • Anónimo 1 año ago
  24. Dos Viajeras 1 año ago
  25. Naralidades 1 año ago
  26. Ana Rodriguez 1 año ago
  27. E♡ 1 año ago
  28. Levio 1 año ago
  29. Leo S. Lee 1 año ago
  30. Natalia Calvo 1 año ago
  31. Natalia Calvo 1 año ago
  32. Moreno Música 1 año ago
  33. Justa 1 año ago
  34. Anónimo 1 año ago
  35. sonia toboso 1 año ago
  36. Señorita Scarlet 1 año ago

Añadir Comentario