Menu desplegable para Bloguer

Lo primero que hay que hacer es editar la plantilla de nuestro blog

El siguiente paso ya dentro del código le damos a las teclas CTRL + F y buscamos la siguiente línea de código

<div class='region-inner header-inner'>

Cuando encuentres el código, luego de seguida vas encontrar un código parecido con el siguiente, que tendrás de modifícalo, dejando de la siguiente forma:

(maxwidgets=´10´ showaddelement=´yes´
Locked=´false´)

El siguiente paso es crear el menú; le voy a dejar un menú de ejemplo que lo pueden modificar a vuestro gusto

...

Nav bar desplegale

    <div id='navbar'>
        <ul id='nav'>
          <li>
            <a href="https://frioyelectronica.blogspot.com/p/inicio.html">INICIO</a>
          </li>
          <li>
            <a href='https://frioyelectronica.blogspot.com/p/contactame.html'>CONTACTO</a>
         </li>
          <li>
            <a href='#'>Programacion</a>
          <ul>
                  <li><a href='https://frioyelectronica.blogspot.com/p/curso-html.html'>Curso HTML</a></li>
                  <li><a href='https://frioyelectronica.blogspot.com/p/curso-css-index.html'>Curso CSS</a></li>
                  <li><a href='https://frioyelectronica.blogspot.com/p/curso-de-php-indice.html'>Curso PHP</a></li>
    <li><a href='https://frioyelectronica.blogspot.com/p/curso-sql-indice.html'>Curso SQL</a></li>
              </ul>
           </li>
  <li>
             <a href='#'>Refrigeracion</a>
              <ul>
                  <li><a href='https://frioyelectronica.blogspot.com/p/curso-de-refrigeracion-industrial-index.html'>Curso de Refrigeración Industrial</a></li>
                  <li><a href='#'>Refrigeracion</a></li>
              </ul>
          </li>
  <li>
            <a href='#'>Electronica</a>
          <ul>
                  <li><a href='https://frioyelectronica.blogspot.com/p/curso-de-electronica.html'>Curso de Electrónica Básica </a></li>
                  <li><a href='https://frioyelectronica.blogspot.com/p/curso-electricidad-index.html'>Curso de Electricidad </a></li>
                  <li><a href='#'>Temas de Electricidad </a></li>
              </ul>
           </li>
     <li>
            <a href="">Blogguer</a>
          </li>
     <li>
            <a href="https://frioyelectronica.blogspot.com/p/1-pagina.html">Sobre Mi</a>
          </li>
        </ul>
      </div>

Después del menú creado se van a bloguer -> diseño -> nuevo gadget e implantan un gadget nel local onde quedan el menú

Nota el gadget tiene de ser tipo HTML/JavaScript para poder implantar el código

---

Estilos del navbar

Con los pasos anteriores concluidos, solo nos falta poner los estilos a nuestro navbar

Editamos la plantilla de nuestro blog con HTML

adentro del código clicamos las teclas CTRL+F para buscar el siguiente código:

]]></b:skin> o /b:skin

Por encima de esos elementos copiamos el código que tenemos a continuación y lo pegamos ahí

        /** Navegación bar**/
            #navbar {
            background: #bdbfbf;
            width: 900px;
            color: #d8f602;
            margin: 0px;
            padding: 0;
            position: relative;
            border-top:0px solid;
            height:35px;
            }
            #nav {
            margin: 0;
            padding: 0;
            }
            #nav ul {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;
            }
            #nav li {
            list-style: none;
            margin: 0;
            padding: 0;
            border-left:1px solid #333;
            border-right:1px solid #333;
            height:35px;
            }
            #nav li a, #nav li a:link, #nav li a:visited {
            color: #FFF;
            display: block;
            font:normal 12px Helvetica, sans-serif; margin: 0;
            padding: 9px 12px 10px 12px;
            text-decoration: none;
            }
            #nav li a:hover, #nav li a:active {
            background: #023d90;
            color: #0a0a0a;
            display: block;
            text-decoration: none;
            margin: 0;
            padding: 9px 12px 10px 12px;
            }
            #nav li {
            float: left;
            padding: 0;
            }
            #nav li ul {
            z-index: 9999;
            position: absolute;
            left: -999em;
            height: auto;
            width: 160px;
            margin: 0;
            padding: 0;
            }
            #nav li ul a {
            width: 140px;
            }
            #nav li ul ul {
            margin: -25px 0 0 161px;
            }
            #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;
            }
            #nav li li a, #nav li li a:link, #nav li li a:visited {
            background: #023d90;
            width: 150px;
            color: #FFF;
            display: block;
            font:normal 12px Helvetica, sans-serif;
            margin: 0;
            padding: 9px 12px 10px 12px;
            text-decoration: none;
            z-index:9999;
            border-bottom:1px dotted #333;
            }
            #nav li li a:hover, #navli li a:active {
            background: #70b6bd;
            color: #FFF;
            display: block; margin: 0;
            padding: 9px 12px 10px 12px;
            text-decoration: none;
            }
            
                

Si no hubo errores debe funcionar, como estás viendo el mío lo tengo con ese código

---

Ir al índice