Home Menu desplegable Menú desplegable para Blogger V3

Menú desplegable para Blogger V3

¿Insertar de forma fácil y sencilla un menú desplegable para mi blog de Blogger? Con tres simples pasos instalaras un Menú desplegable en su blog de Blogger, ¡Como hacerlo! Debes seguir las instrucciones de este grandioso tutorial.

Características:

- Carga ligera
- Optimizado
- Diferentes colores
- Fácil de instalar
- Funciona en todos los navegadores web como Firefox, Google Chrome, Internet Explorer, etc.
- Se puede modificar su tamaño
- SEO

Menú desplegable para Blogger V3

Pueden ver su demostración en el siguiente blog de demos

DEMO

¡Les gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla”


3 Un clic en “Editar HTML”


Ahora se le abrirá el Editor HTML de tu plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.


4 Busca este código

]]></b:skin>

Ingresa los siguientes estilos de código justo arriba del código que encontraste

#menu{
background: #4f7ca1;
color: #fff;
height: 50px;
z-index:9;
width:970px;
margin:0 auto;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:50px;width:970px}
#menu li{float:left;display:inline;position:relative;font:normal 0.9em Oswald; text-transform:uppercase;}
#menu a{display: block;
line-height: 48px;
padding: 0 30px;
text-decoration: none;
color: #fff;
}
#menu li a:hover{
color: #fff;
background: #0099cc;
}
li.home a{background:#4f7ca1; color:#fff;}
li.second a{background:#5fa03f}
li.third a{background:#ff0000}
li.fourth a{background:#e89319}
li.fifth a{background:#72347d}
li.sixth a{background:#fc0}
li.seventh a{background:#E71838}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Oswald;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 190px;
background: #000;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:bold 12px Arial;
text-transform: none;
text-shadow: none;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #222;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

Nota: Puedes cambiar el tamaño del menú en los dos lugares que están marcados de color amarillo: 970

 5 Busca este código

]]></b:skin>

Ingresa las siguientes líneas de código justo abajo del código que encontraste

<script type='text/javascript'>
      //<![CDATA[
      /*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *            http://www.opensource.org/licenses/mit-license.php
 *            http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */
      ;(function($){
        $.fn.superfish = function(op){
          var sf = $.fn.superfish,
              c = sf.c,
              $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
              over = function(){
                var $$ = $(this), menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl();
              },
              out = function(){
                var $$ = $(this), menu = getMenu($$), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                  o.retainPath=($.inArray($$[0],o.$path)>-1);
                  $$.hideSuperfishUl();
                  if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay);         
              },
              getMenu = function($menu){
                var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
              },
              addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
          return this.each(function() {
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
            o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
              $(this).addClass([o.hoverClass,c.bcClass].join(' '))
              .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;
            $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
              if (o.autoArrows) addArrow( $('>a:first-child',this) );
            })
            .not('.'+c.bcClass)
            .hideSuperfishUl();
            var $a = $('a',this);
            $a.each(function(i){
              var $li = $a.eq(i).parents('li');
              $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
            });
            o.onInit.call(this);
          }).each(function() {
            var menuClasses = [c.menuClass];
            if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
            $(this).addClass(menuClasses.join(' '));
          });
        };
        var sf = $.fn.superfish;
        sf.o = [];
        sf.op = {};
        sf.IE7fix = function(){
          var o = sf.op;
          if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
            this.toggleClass(sf.c.shadowClass+'-off');
        };
        sf.c = {
          bcClass     : 'sf-breadcrumb',
          menuClass   : 'sf-js-enabled',
          anchorClass : 'sf-with-ul',
          arrowClass  : 'sf-sub-indicator',
          shadowClass : 'sf-shadow'
        };
        sf.defaults = {
          hoverClass               : 'sfHover',
          pathClass  : 'overideThisToUse',
          pathLevels               : 1,
          delay                          : 800,
          animation : {opacity:'show'},
          speed                        : 'normal',
          autoArrows             : true,
          dropShadows : true,
          disableHI   : false,                  // true disables hoverIntent detection
          onInit                         : function(){}, // callback functions
          onBeforeShow: function(){},
          onShow                    : function(){},
          onHide                      : function(){}
        };
        $.fn.extend({
          hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
            .find('>ul').hide().css('visibility','hidden');
            o.onHide.call($ul);
            return this;
          },
          showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
            .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
          }
        });
      })(jQuery);
      //]]>
</script>

6 Busca este código

<body>

Ingresa las siguientes líneas de código justo abajo del código que encontraste

<nav id='menu'>
<input type='checkbox'/>
<label>
        &#8801;
        <span>
          Clic&#160;Aqui
        </span>
</label>
<ul>
<li class='home'>
<a href='/'>
            Inicio
          </a>
</li>
<li class='second'>
<a href='#'>
            Música
          </a>
</li>
<li class='third'>
<a href='#'>
            Menú desplegable
            <font size='1'>
              &#9660;
            </font>
</a>
<ul class='menus'>
<li>
<a href='#'>
                Menú desplegable 1
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 2
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 3
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 4
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 5
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 6
              </a>
</li>
</ul>
</li>
<li class='fourth'>
<a href='#'>
            Contactos
          </a>
</li>
<li class='fifth'>
<a href='#'>
            Menú desplegable 2
          <font size='1'>
              &#9660;
            </font>
</a>
<ul class='menus'>
<li>
<a href='#'>
                Menú desplegable 2.1
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 2.2
              </a>
</li>
<li>
<a href='#'>
                Menú desplegable 2.3
              </a>
</li>
</ul>
</li>
<li class='sixth'>
<a href='#'>
            Menú
          </a>
</li>
<li class='seventh'>
<a href='#'>
            Videos
          </a>
</li>
</ul>
</nav>

Realiza estos cambios:

- Cambia los nombres que están marcados de color rojo por el nombre que desees

- Elimina todos los símbolos numerales (#) que están marcados de color azul y remplázalos por las direcciones URLs de los posts que vas a dar a conocer en el menú.

7 Eso es todo, es momento de dar un clic en “Guardar plantilla”

Visite su blog y mire cómo funciona este nuevo Menú desplegable

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir


Más, sobre Menú desplegables:

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si

TAGS:


Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

11 comentarios:

  1. Trinxat16 de mayo de 2016, 11:46

    hola,pues a mi no me sale, no se ve nada

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger19 de mayo de 2016, 13:16

      Hola Trinxat, con respecto a su pregunta, el código esta probado y funciona correctamente, tal vez algo estas haciendo mal.

      Saludos.

      Eliminar
  2. Valeria Correa11 de junio de 2016, 8:11

    Necesito ayuda! la barra me sale en la parte inferior, que hice mal? que puedo cambiar?

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger12 de junio de 2016, 18:29

      Hola Valeria, con respecto a su pregunta, por favor hágame saber cual es la dirección URL de su blog de Blogger, como también especifique un poco mas su inconveniente

      Saludos.

      Eliminar
  3. Zheyn C.21 de junio de 2016, 15:31

    hola kisiera q me ayudes, por la caja de comentarios de mi blog no cargar en el navegador Chrome?

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger22 de junio de 2016, 0:45

      Hola Zheyn, cual es la dirección URL de su blog de Blogger

      Eliminar
    2. Zheyn C.22 de junio de 2016, 14:13

      el problema es q no carga la caja de comentarios de en el navegador chrome nod32licencia.blogspot.pe

      Eliminar
  4. Club Montisonense de Montaña3 de enero de 2017, 18:05

    Hola, lo primero enhorabuena por el blog y la ayuda que presta. Llevo intentando hace tiempo para hacer un menu despleglabe y siguiendo tus pasos a la primera. Queria saber si se puede poner el menu bajo la imagen de cabecera y en que parte del codigo debo detenerme para cambiar el formato de letra, el color de fondo y el la altura y anchura del menu.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger3 de enero de 2017, 21:14

      Hola CMM, con respecto a su pregunta, remita la dirección URL de su blog de Blogger para poder ingresar y en que parte podría usted ubicar el menú, tal como lo indica, justo abajo de la cabecera principal.

      Sobre su otra pregunta: cambiar el fondo, siga las siguientes instrucciones:

      Busque esta linea de código

      #menu {
      background: #4f7ca1;

      - Cambie el codigo de color 4f7ca1 por un nuevo código de color, puede escoger un codigo de color de la siguiente lista de colores:

      http://www.ayudadeblogger.com/p/codigo-de-colores-para-blogs-de-blogger.html

      - Sobre su otra pregunta, altura y anchura del menu

      Busque la siguiente linea

      #menu {
      background: #4f7ca1;
      color: #fff;
      height: 50px;
      z-index: 9;
      width: 970px;
      margin: 0 auto;
      }

      Modifique, donde dice width: 970px cámbielo a 100%, le quedaría así:

      #menu {
      background: #4f7ca1;
      color: #fff;
      height: 50px;
      z-index: 9;
      width: 100%;
      margin: 0 auto;
      }

      La altura se encuentra en height: 50px

      - Ademas, tendra que encontrar la siguiente linea:

      #menu a {
      display: block;
      line-height: 48px;
      padding: 0 30px;
      text-decoration: none;
      color: #fff;
      }

      Cambie donde dice 48px esta es la altura de cada menú

      - El tipo de letra se encuentra en la siguiente linea:

      font: normal 0.9em Oswald;
      text-transform: uppercase;

      Saludos.





      Eliminar
    2. Club Montisonense de Montaña7 de enero de 2017, 11:48

      Muchisimas gracias. El blog es de prueba http://pruebascmm.blogspot.com.es/ para implementarlo mas tarde en monzonalpino.blogspot.com.

      He visto los tutoriales en su web sobre los menus responsives y me parecen muy interesantes, estado probando http://pruebascmm3.blogspot.com.es/ tengo alguna duda similar a la anterior. Las describo:
      - Como cambiar el color de fondo del menu y desplegables (verde a blanco)
      - Como cambiar el color de fondo(o que no cambie) cuando pasa el mouse en los desplegables
      - cambiar fuente y color de las letras
      - Como hacer para que cuando pase mouse por encima de un boton cambie el color de la fuente o en negrita
      - Quitar la sombra que aparece en el menu y centrarlo
      - Que se desplegue el menu cuando pasa el mouse sin tener que hacer click

      En resumen el estilo-estetica del pruebascmm hacerlo en el pruebascmm3.

      He probado pruebascmm3 en movil pero no aparece el menu en la version movil. Sale la pestaña de entradas normal reducida a movil, Tanto si hago click en version escritorio o en el explorador (chrome) le doy ver como pc me sale la web normal, lo que es evidente, pero no el menu responsive en ningun momento.


      Por ultimo, me gustaria quitar, ya he visto como hacerlo, la palabra "Ayudadeblogger" del menu, aunque me parecería muy justo que si usted tiene logo se lo añadiríamos en la sección de colaboradores con un link a su web como contraprestacion a la ayuda recibida.

      Un saludo.

      Eliminar
    3. Ayudadeblogger7 de enero de 2017, 13:22

      Hola, son muchas pregunta, confusas en cada tema de sus blogs, le informo del por que no se muestra el menú en sus blogs es por que usted esta utilizando una platilla básica de las que Blogger regala en el sitio, es por ello que no se le va a mostrar el menú en un teléfono móvil,

      Sobre su otra pregunta retirar la palabra Ayudadeblogger, usted lo puede hacer, ya que en el tutorial que se presento dice que deben realizar los cambios con el nombre de su blog.

      Lo que dice Ayudadeblogger es solo un ejemplo, usted puede cambiar todo, siguiendo las instrucciones del tutorial:

      http://www.ayudadeblogger.com/2016/09/menu-responsive-desplegable-para-blogger-video-tutorial.html

      Saludos.

      Eliminar