¿Cómo crear un Menú desplegable Responsive en mi blog de Blogger?


¿Necesito que mi menú desplegable se muestre correctamente en un teléfono Smartphone? ¿Cómo hacer que mi menú desplegable sea Responsive y se muestre perfectamente en un teléfono inteligente? ¿Menú desplegable para móviles? ¿Insertar un menú desplegable en mi blog de Blogger para que se muestre en teléfonos Smartphone? Disponer de varias herramientas importantes en nuestro blog de Blogger es una de las formas de llegar más lejos gracias a la evolución de su blog. Si necesitas tener un menú desplegable totalmente Responsive y que se muestre correctamente al abrir su blog desde un Teléfono, sigue las instrucciones al pie de la letra en este grandioso Tutorial de Blogger.

Características principales y ventajas del Menú Responsive para Blogger

Es totalmente Responsive, dispone de un ajuste automático a cualquier tamaño de pantalla móvil
Se mostrara sólo en los dispositivos móviles
Además dispone de un Responsive barra de búsqueda, los usuarios que visitan su blog desde un teléfono, puede navegar fácilmente a través de su sitio
Es compatible con todos los navegadores web
Su estructura anidada permite agregar submenús infinitas
Es Browser multiplataforma compatible

- El menú utiliza el plugin Superfish V 1.7.2 creado por Joel Brich, el cual tiene unos buenos efectos dinámicos de front-end. Superfish es un plugin de jQuery que añade mejoras en el uso de los menús desplegables de varios niveles.

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


Video Tutorial


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

<head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

5 Busca este otro código

</head>

Inserta las siguientes líneas de código justo arriba del código que encontraste

<style>
    .sf-menu a.home:before,#searchnya button:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}.highlight{background-color:#f09903;color:#1a1308}#searchnya{float:right;width:80%;position:relative;right:0}.siy{bottom:0;left:0;background:none;font-size:19px;color:#fff}#searchnya input{padding:5px 10px;width:75%;margin:5px 0 0;background-color:#FFF;height:21px;box-shadow:1px 2px 4px #A2A2A2 inset;position:relative}#searchnya input,#searchnya button{border:0;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;outline:0;font-size:14px;font-family:oswald;color:#BDB5B5;font-weight:400}#searchnya button{background-color:#2f5bb7;padding:0;width:15%;height:31px;margin-right:5px;cursor:pointer;position:relative;top:0}#searchnya button:hover{background:#76D314}
    #navitions{background-color:#242729;border-bottom:0px solid #2f5bb7;box-shadow:0 1px 9px #666;display:none}#mobilenav{display:none}#nav1{height:40px;position:relative;background:#242729;box-shadow:1px 2px 9px #2f5bb7}.sf-menu,.sf-menu *{list-style:none;margin:0;padding:0}.sf-menu li{white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}.sf-menu ul{position:absolute;display:none;top:100%;left:0;z-index:99;min-width:12em;padding-top:4px;width:100%}.sf-menu &gt; li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; ul{display:block}.sf-menu a{display:block;position:relative;height:40px;line-height:40px;text-decoration:none;zoom:1;color:#FFF;font-size:100%;padding:0 15px; font-family:oswald; -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; -ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}.sf-menu &gt; li &gt; a{font-size:105%;font-family:oswald}.sf-menu ul ul{top:0;left:100%}.sf-menu{float:left}.sf-menu a.home{background-color:#A30000;margin-left:4px;text-indent:-9999px;padding:0}.sf-menu li:hover{background:#222}.sf-menu ul li{background-color:#242729}.sf-menu ul li:hover{background-color:#333}.sf-menu ul a{font-weight:400;height:30px;line-height:30px;font-family:oswald,arial}.sf-menu ul ul li{background:#3C3C3C}.sf-menu li:hover &gt; a,.sf-menu li.sfHover,.sf-menu &gt; li &gt; a.current{-moz-transition:none;-webkit-transition:none;transition:none}.sf-arrows .sf-with-ul{padding-right:1em}.sf-arrows .sf-with-ul:after{content:&#39;&#39;;position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFF}.sf-arrows &gt; li &gt; .sf-with-ul:focus:after,.sf-arrows &gt; li:hover &gt; .sf-with-ul:after,.sf-arrows &gt; .sfHover &gt; .sf-with-ul:after{border-top-color:#FFF}.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent transparent transparent #FFF}.sf-arrows ul li &gt; .sf-with-ul:focus:after,.sf-arrows ul li:hover &gt; .sf-with-ul:after,.sf-arrows ul .sfHover &gt; .sf-with-ul:after{border-left-color:#FFF}.sf-menu li &gt; i{position:absolute;top:15px;right:15px;width:27px;height:22px;cursor:pointer;display:none;background-color:#2f5bb7;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0;font:12px Verdana,Geneva,sans-serif}.sf-menu li &gt; i:after{content:&#39;+&#39;;color:#FFF;font-size:19px;position:absolute;left:5px;top:-2px}.sf-menu li ul li i:after{left:3px;font-size: 16px;top: -1px;} .sf-menu li ul li i.active:after  {left: 4px;font-size: 26px;top: -8px;}
    .sf-menu li &gt; ul li i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px; width:20px; height:20px;}
    .sf-menu li &gt; i.active:after{content:&#39;-&#39;;font-size:36px;top:-14px}.sf-menu a.home{position:relative}.sf-menu a.home:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;height:30px;top:0;font-size:27px;left:9px}.sf-menu a.home:before,#view a:before{text-indent:0}html {-webkit-text-size-adjust: 100%;}
    @media only screen and (max-width:320px){#searchnya input{width:67%}}
    @media only screen and (max-width:768px) {
    #navitions{display:block}#nav1{width:100%}#mobilenav{display:block;text-indent:-9999px;width:35px;top:4px;left:10px;position:absolute;height:32px;outline:0;background-color:#2f5bb7;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFF;text-decoration:none}#mobilenav.active{color:#fff}#mobilenav:before{content:&quot;\f0c9&quot;;top:3px;text-indent:0;left:7px;font-size:26px}#menunav{float:none;display:none;position:absolute;top:45px;left:10px;right:10px;z-index:99999999;background-color:#242729;padding:5px 10px}#menunav li{float:none;margin:0}#menunav &gt; li{margin:1px 0}.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D!important;padding:5px 20px;border:0}.sf-menu a:hover{background-color:#2c2c2c!important}.sf-menu ul{position:static;padding-top:0}.sf-menu ul a{padding-left:30px}.sf-menu ul ul li a{padding-left:50px; }.sf-menu ul ul ul li a{padding-left:60px; }.sf-menu a.home,.sf-menu li:hover &gt; a.home,.sf-menu &gt; li &gt; a.current{color:#FFF;background-color:#cd2122}.sf-menu ul a:hover{padding-left:40px}.sf-menu ul ul a:hover{padding-left:60px}.sf-menu a.home:before,.sf-menu li:hover &gt; ul,.sf-menu li.sfHover &gt; ul{display:none}.sf-menu ul li,.sf-menu ul ul li,.sf-menu li:hover &gt; a,.sf-menu li.sfHover{background-color:transparent}.sf-menu a.home:before,#mbt-search-layout button:before,#mobilenav:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit}
    }
    </style>

    <script type='text/javascript'>
    //<![CDATA[
    // Superfish v1.7.2 - jQuery menu widget - Joel Brich
    (function(b){var a=(function(){var p={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},f=/iPhone|iPad|iPod/i.test(navigator.userAgent),k=(function(){var c=document.documentElement.style;return("behavior" in c&&"fill" in c&&/iemobile/i.test(navigator.userAgent))})(),d=(function(){if(f){b(window).load(function(){b("body").children().on("click",b.noop)})}})(),m=function(s,t){var c=p.menuClass;if(t.cssArrows){c+=" "+p.menuArrowClass}s.toggleClass(c)},r=function(c,s){return c.find("li."+s.pathClass).slice(0,s.pathLevels).addClass(s.hoverClass+" "+p.bcClass).filter(function(){return(b(this).children("ul").hide().show().length)}).removeClass(s.pathClass)},n=function(c){c.children("a").toggleClass(p.anchorClass)},g=function(c){var s=c.css("ms-touch-action");s=(s==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",s)},j=function(t,u){var c="li:has(ul)";if(b.fn.hoverIntent&&!u.disableHI){t.hoverIntent(l,h,c)}else{t.on("mouseenter.superfish",c,l).on("mouseleave.superfish",c,h)}var s="MSPointerDown.superfish";if(!f){s+=" touchend.superfish"}if(k){s+=" mousedown.superfish"}t.on("focusin.superfish","li",l).on("focusout.superfish","li",h).on(s,"a",i)},i=function(t){var s=b(this),c=s.siblings("ul");if(c.length>0&&c.is(":hidden")){s.one("click.superfish",false);if(t.type==="MSPointerDown"){s.trigger("focus")}else{b.proxy(l,s.parent("li"))()}}},l=function(){var c=b(this),s=o(c);clearTimeout(s.sfTimer);c.siblings().superfish("hide").end().superfish("show")},h=function(){var c=b(this),s=o(c);if(f){b.proxy(q,c,s)()}else{clearTimeout(s.sfTimer);s.sfTimer=setTimeout(b.proxy(q,c,s),s.delay)}},q=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(e(this));if(c.$path.length){b.proxy(l,c.$path)()}}},e=function(c){return c.closest("."+p.menuClass)},o=function(c){return e(c).data("sf-options")};return{hide:function(s){if(this.length){var v=this,w=o(v);if(!w){return this}var t=(w.retainPath===true)?w.$path:"",c=v.find("li."+w.hoverClass).add(this).not(t).removeClass(w.hoverClass).children("ul"),u=w.speedOut;if(s){c.show();u=0}w.retainPath=false;w.onBeforeHide.call(c);c.stop(true,true).animate(w.animationOut,u,function(){var x=b(this);w.onHide.call(x)})}return this},show:function(){var t=o(this);if(!t){return this}var s=this.addClass(t.hoverClass),c=s.children("ul");t.onBeforeShow.call(c);c.stop(true,true).animate(t.animation,t.speed,function(){t.onShow.call(c)});return this},destroy:function(){return this.each(function(){var s=b(this),t=s.data("sf-options"),c=s.find("li:has(ul)");if(!t){return false}clearTimeout(t.sfTimer);m(s,t);n(c);g(s);s.off(".superfish").off(".hoverIntent");c.children("ul").attr("style",function(u,v){return v.replace(/display[^;]+;?/g,"")});t.$path.removeClass(t.hoverClass+" "+p.bcClass).addClass(t.pathClass);s.find("."+t.hoverClass).removeClass(t.hoverClass);t.onDestroy.call(s);s.removeData("sf-options")})},init:function(c){return this.each(function(){var t=b(this);if(t.data("sf-options")){return false}var u=b.extend({},b.fn.superfish.defaults,c),s=t.find("li:has(ul)");u.$path=r(t,u);t.data("sf-options",u);m(t,u);n(s);g(t);j(t,u);s.not("."+p.bcClass).superfish("hide",true);u.onInit.call(this)})}}})();b.fn.superfish=function(d,c){if(a[d]){return a[d].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof d==="object"||!d){return a.init.apply(this,arguments)}else{return b.error("Method "+d+" does not exist on jQuery.fn.superfish")}}};b.fn.superfish.defaults={hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:true, disableHI:false,onInit:b.noop,onBeforeShow:b.noop, onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop, onDestroy:b.noop};b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show})})(jQuery);
    function menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return false});b(".sf-menu ul").each(function(){var d=b(this).parent("li");d.append("<i></i>")});function a(){var d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");var e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return false});var c=window.location.href;b("#menunav a").each(function(){if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}})};    
    //]]>
    </script>

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

7 Un clic en "Diseño"


8 Un clic en "Añadir un gadget"


9 Busca el widget que dice "HTML/Javascript" ábrelo,

¿Cómo crear un Menú desplegable Responsive en mi blog de Blogger?

10 Ingresa las siguiente lineas de código en su interior


<div id='navitions'>
        <div class='isi'>
          <nav class='navix' id='nav1'>
<div id='searchnya'>
               <form action='/search'>
           <input name='q' onblur='if (&apos;&apos; === this.value) {this.value = &apos;Buscar…&apos;;}' onfocus='if (&apos;Buscar…&apos; === this.value) {this.value = &apos;&apos;;}' type='text' value='Buscar…'/>
                <button title='Buscar' type='submit'>
                  <i class='fa fa-search siy'/>
                </button>
              </form>
            </div>

            <a href='#' id='mobilenav'>
              Seleccione Menú
            </a>
            <ul class='sf-menu' id='menunav'>
              <li>
                <a class='home' expr:href='data:blog.homepageUrl'>
                  Inicio
                </a>
              </li>



    <li><a href="Aquí la dirección URL del post#">Tema 1</a>

    <ul>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 1.1</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 1.2</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 1.3</a></li>
    </ul>

    </li>
 <li><a href="Aquí la dirección URL del post#">Tema 2</a>

    <ul>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 2.1</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 2.2</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 2.3</a></li>
    </ul>

    </li>
 <li><a href="Aquí la dirección URL del post#">Tema 3</a>

    <ul>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 3.1</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 3.2</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 3.3</a></li>
    </ul>

    </li>
 <li><a href="Aquí la dirección URL del post#">Tema 4</a>

    <ul>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 4.1</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 4.2</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 4.3</a></li>
    </ul>

    </li>
 <li><a href="Aquí la dirección URL del post#">Tema 5</a>

    <ul>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 5.1</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 5.2</a></li>
    <li><a href="Aquí la dirección URL del post#">Menú desplegable 5.3</a></li>
    </ul>

    </li>

<li><a href="Aquí la dirección URL del post#">Contactos </a></li>
           
                   </ul>
          
            <script type='text/javascript'>
              //<![CDATA[
              menunav (jQuery);
              //]]>
            </script>
          </nav>
        </div>
      </div>
    

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que deben realizar sus cambios

- Elimina las palabras que están marcadas de color azul Aquí la dirección URL del post# y cámbialas por la dirección URL del post que quieras mostrar en cada lugar

- Cambia todas las palabras que están marcadas de color rojo Tema 1 por el nombre que quieras mostrar

- Y por último elimina las palabras que están marcadas de color verde Menú desplegable 1.1 por el nombre que tú quieras.

11 Eso es todo, un clic en "Guardar"

Nota: para ver este menú desplegable Responsive, debes Minimizar el tamaño de tu Navegador web o a su vez ver cómo funciona desde su teléfono inteligente o Tableta.

- Ahora para que el Menú Responsive desplegable se muestre en un teléfono inteligente, siga las instrucciones del siguiente tutorial, en el cual se explica cómo habilitar los widgets en un teléfono inteligente.


¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

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



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

0 comments:

Publicar un comentario