MENÚ DESPLEGABLE PARA BLOGGER

MENÚ DESPLEGABLE PARA 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



 Un clic en “Plantilla”

 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

 Busca otra vez 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>

 Busca este código

<body>

Un clic en “Plantilla”

 Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su 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.

 Coloca este código en el buscador y dale un "Enter"


<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ú.



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

 Data de la Publicación; 05-09-2019

 Fuente;  ayudadeblogger

 Publicado por;