add

Menú Responsive desplegable para Blogger


¿Cómo insertar de forma fácil y segura un Menú desplegable Responsive, que cuando se habrá mi blog en una computadora de escritorio funcione el menú desplegable y que luego cuando se habrá mi blog desde un teléfono inteligente Smartphone se visualice un Menú Responsive “Sensible”? Esta pregunta está bien planteada por parte de los usuarios que solicitan a diario, en ¿cómo agregar correctamente un Menú totalmente Responsive “Sensible” en su blog de Blogger? que funcione en un computador de escritorio y en un teléfono. Para hacerles las cosas más sencillas he creado este grandioso tutorial con el cual se van a guiar para implementar este Menú Responsive en su blog de Blogger.

Menú Responsive desplegable para Blogger

Para ver su demostración en mi blog de demos siga las siguientes instrucciones:

Primero: Para visualizar el Menú desplegable desde un computador de escritorio ingrese a la siguiente dirección


Segundo: Para poder visualizar el Menú desplegable Responsive “Sensible” desde un teléfono, puede reducir la pantalla de su navegador para ver su funcionamiento o puede también ingresar la dirección URL del demo para verlo desde su teléfono inteligente


¡Te 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 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.


4 Busca este código

<head>

Menú Responsive desplegable para Blogger

Ingrese las siguientes líneas de código justo abajo del código que encontró

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>   
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

5 Busca este código

</b:skin>

Menú Responsive desplegable para Blogger

Ingrese los siguientes estilos justo abajo del código que encontró

<style>
nav {
  display: block;
  background: #E95546;
}

.menu { display: block; }

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li:first-child { margin-left: 0; }

.menu li a {
  font-weight: 600;
  text-decoration: none;
  padding: 20px 15px;
  display: block;
  color: #fff;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,
.menu li:hover&gt;a {
  color: #fff;
  background: #FC6D58;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 170px;
  position: absolute;
  left: 0px;
  background: #fff;
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
}

.menu ul:after {
  bottom: 100%;
  left: 20%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 6px;
  margin-left: -6px;
}

.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
}

.menu ul li a {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #797979;
  background: #fff;
}

.menu ul li a:hover,
.menu ul li:hover&gt;a {
  background: #FC6D58;
  color: #fff;
}

.menu li:hover&gt;ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.menu li&gt;ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.responsive-menu {
  display: none;
  width: 100%;
  padding: 20px 15px;
  background: #E95546;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.responsive-menu:hover {
  background: #E95546;
  color: #fff;
  text-decoration: none;
}

a.homer { background: #FC6D58; }

@media (min-width: 768px) and (max-width: 979px) {

.mainWrap { width: 768px; }

.menu ul { top: 37px; }

.menu li a { font-size: 12px; }

a.homer { background: #E95546; }

}

@media (max-width: 767px) {

.mainWrap {
  width: auto;
  padding: 50px 20px;
}

.menu { display: none; }

.responsive-menu { display: block; }

nav {
  margin: 0;
  background: none;
}

.menu li {
  display: block;
  margin: 0;
}

.menu li a {
  background: #fff;
  color: #797979;
}

.menu li a:hover,
.menu li:hover&gt;a {
  background: #FC6D58;
  color: #fff;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transform: initial;
}

.menu li:hover&gt;ul {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: initial;
}

.menu ul ul {
  left: 0;
  transform: initial;
}

.menu li&gt;ul ul:hover { transform: initial; }

}

</style>

6 Busca este código

</head>

Menú Responsive desplegable para Blogger

Ingrese el siguiente script justo arriba del código que encontraste

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Nota importante: Si ya utilizas un script - jquery.min.js en tu blog de Blogger ya no es necesario insertar las anteriores líneas de código, pero si no utilizas ningún script - jquery.min.js en tu blog de Blogger proceda a insertar el código indicado

7 Busca este código

<body>

Nota: Si no encuentras dicho código puedes buscar el siguiente código, ya que en las nuevas plantillas puede venir un código similar al siguiente:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Menú Responsive desplegable para Blogger

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

<nav>
  <a class='responsive-menu' href='#' id='resp-menu'>
   <i class='fa fa-reorder'/> Menu</a>
   <ul class='menu'>
     <li><a class='homer' href='/'><i class='fa fa-home'/> Inicio</a>
    </li>
    <li><a href='#'><i class='fa fa-tags'/> Noticias</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>
    <li><a href='#'><i class='fa fa-tags'/> Entretenimiento</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>
 <li><a href='#'><i class='fa fa-tags'/> Videos</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>
 <li><a href='#'><i class='fa fa-tags'/> Tecnología</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>
<li><a href='#'><i class='fa fa-envelope'/> Contactos</a></li>
  
</ul>
</nav>

Realiza estos cambios:

Cambia todos 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 remplaza cada uno de ellos por las direcciones URLs de los post que quieras dar a conocer en tu menú desplegable

Si necesitas aumentar otras categorías, puedes copiar el siguiente código justo arriba del código que está marcado de color Verde </ul>

<li><a href='#'><i class='fa fa-tags'/> Nueva categoría</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sub-Menu 1</a></li>
        <li><a href='#'>Sub-Menu 2</a></li>
        <li><a href='#'>Sub-Menu 3</a></li>
        <li><a href='#'>Sub-Menu 4</a></li>
        <li><a href='#'>Sub-Menu 5</a></li>
      </ul>
    </li>

8 Busca este código

</body>

Menú Responsive desplegable para Blogger

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

<script>
$(document).ready(function(){
  var touch   = $(&#39;#resp-menu&#39;);
  var menu  = $(&#39;.menu&#39;);

  $(touch).on(&#39;click&#39;, function(e) {
    e.preventDefault();
    menu.slideToggle();
  });
 
  $(window).resize(function(){
    var w = $(window).width();

    // breakpoint
    if(w &gt; 767 &amp;&amp; menu.is(&#39;:hidden&#39;)) {
      menu.removeAttr(&#39;style&#39;);
    }
  });
 
});
  </script>

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

Menú Responsive desplegable para Blogger

Visite su blog de Blogger y mire cómo funciona este fascinante Menú desplegable en su computador de escritorio y cómo funciona el Menú desplegable si lo abrimos desde un teléfono inteligente.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

31 comentarios:

  1. muy buen tutorial mi pregunta es la siguiente como hago para que solo se visualice en la version movil y no se muestre este menu en la version web

    ResponderEliminar
    Respuestas
    1. Hola, para realizar este truco puede realizar los siguiente: No ingrese el código del paso 7 en su plantilla, ingrese dicho código en Diseño, abra añadir un gadget y busque el widget HTML/Javascript he ingrese todo el código del paso 7.

      Luego siga las instrucciones del siguiente tutorial para que el widget se muestre solo en teléfonos móviles y no en paginas de escritorio:

      http://www.ayudadeblogger.com/2015/10/como-activar-o-desactivar-los-widgets-de-blogger-para-que-aparezcan-en-moviles.html

      Saludos

      Eliminar
  2. Hola Luis,
    gracias por el post, pero yo creo que he puesto los cuatro pasos bien y no me funcional
    Tengo un java-script que ahora tampoco se ve en el móvil.
    Cómo tengo que configurar la opción de blogger para móvil? yo ahí he puesto predeterminada y nada!!!
    Si me pudieras mandar un comentario?!!

    ResponderEliminar
    Respuestas
    1. Hola Natalia, el truco es muy simple de realizarlo, recuerde debe seguir todas las instrucciones tal como lo muestro en este tutorial, a continuación le dejo un tutorial donde indica como habilitar la plantilla móvil de su blog de Blogger: http://www.ayudadeblogger.com/2015/09/como-habilitar-la-plantilla-movil-de-mi-blog-de-blogger.html

      Ademas, si aun así no le funciona, por favor déjeme la direccion URL de su blog de Blogger y así podre observar que puede estar haciendo mal.

      Saludos.

      Eliminar
  3. Hola, tengo una pregunta, yo quiero mejorar la apariencia de los gadtes, junto con la del menú que ya tengo, sé que hay opciones css para hacer esto, sin embargo no sé cómo hacerlo, me podrías ayudar?

    ResponderEliminar
    Respuestas
    1. Hola, para cambiar el estilo de los gadgets a un color diferente puede seguir el siguiente tutorial:

      http://www.ayudadeblogger.com/2016/01/como-cambiar-de-color-la-barra-de-titulos-de-cualquier-widget-de-blogger.html

      Saludos

      Eliminar
  4. Hola, ¿Cómo hago para que la barra se que fija arriba del todo sin dejar ningún espacio? Gracias.

    ResponderEliminar
  5. Hola, muchas gracias por el tutorial; es muy bueno.

    Yo estoy modificando el css de este menu pero cuando quito los background colors y borro la linea entera de codigo para que quede transparente, queda una barra blanca de fondo, Cómo puedo eliminarla? Gracias de antemano

    ResponderEliminar
  6. mi plantilla no tiene código "body" cómo soluciono esta última parte? mi web es http://www.ivonneandrietti.com

    ResponderEliminar
    Respuestas
    1. Hola, he actualizado este tutorial, por favor mire la nueva información que ingrese en el paso 7

      Saludos

      Eliminar
    2. Gracias, sabes, seguí todos los pasos pero en el celular no me abre el menú, que será que está mal?

      Eliminar
    3. Ya logré instalarlo bien, muchas gracias por este tutorial, fue muy útil, bendiciones :)

      Eliminar
  7. Hola Luis, primero que todo quiero agradecer por este tutorial, he buscado durante un muy largo tiempo cómo lograr un menú de la manera en la cual lo explica.

    Igualmente tengo unas cuantas inquietudes:

    1. Respecto a Style del menú:
    en la versión móvil me sale la barra del color rojo y la palabra "menú" de un tono rojo solo un poco más oscuro, la verdad se ve un tanto mal estéticamente y a la vista un tanto difícil de leer ¿cuál parte del código debería editar para cambiar ya sea el color del texto o el del botón?

    2. Los íconos miniatura que acompañan las palabras:
    Me gustaría poder cambiar los iconos que trae el menú; por esto me refiero a ej: el sobre que acompaña la palabra "contactos"

    3. Poner un "background" al menú:
    Tal como está el color sólido de color rojo en la palabra inicio, me gustaría ya sea una imágen de fondo para todo el menú o poner ese mismo tono rojo al resto del menú [de la versión web]

    Agradezco nuevamente por todo su trabajo, de verdad es de MUCHA utilidad

    ResponderEliminar
  8. Hola Astaroth, con respecto a su pregunta

    1.- Si no le sale el color al igual de este tutorial, es por que su plantilla tiene un color diferente y se mezclan,

    2.- Para poder cambiar los iconos deb ingresar donde dice http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

    Pero luego se debe guardar el script en un hosting y despues volverlo a insertar eliminando el script y poniendo uno nuevo

    3.- Como le dije anterior mente el codigo CSS se encuentra en el script http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

    Se debe modificar en el mismo y luego guardarlo en nuevo hosting,

    Saludos.

    ResponderEliminar
  9. Buenas noches. Está muy bueno el menu. Como se podría modificar para que solo este presente en la página principal y no en la cabecera de todas las entradas? desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Matias, con respecto a su pregunta puede seguir las instrucciones que se encuentran en el siguiente tutorial:

      http://www.ayudadeblogger.com/2013/09/como-ocultar-widgets-en-pagina-principal-entradas-de-blogger.html

      Saludos.

      Eliminar
    2. Muchas gracias!! es de mucha ayuda. Ya lo pude realizar :D

      Eliminar
  10. Hola, mil gracias por el menú, es muy lindo :D Una pregunta, ¿dónde tendría que poner el código para que el menú quede debajo de la cabecera? y si es posible ¿cómo hacer que el mismo menú siga bajando al ir avanzando en la página? De antemano gracias ^^

    ResponderEliminar
    Respuestas
    1. Hola Daerbak, con respecto a su pregunta, si necesita ingresar el menú después de la cabecera principal, puede realizarlo de la siguiente manera:

      No ingrese el código después del < body > ,

      Busque que es la parte de la cabecera de su blog, trate de ir probando justo al final del código de la cabecera principal ingrese e código que debía ingresar después del < body >

      Ademas, sobre su otra pregunta, "¿cómo hacer que el mismo menú siga bajando al ir avanzando en la página?" En estos días publicare un tutorial, explicando como realizar este grandioso truco creado exclusivamente para Bloggers.

      Le recomiendo suscribirse, y así resabiara mis actualizaciones

      Saludos.

      Eliminar
  11. hola bro, proqeu no puedo agregar ninguna pagina o entrada no se ve nada se eso en cuando le doy visualizar??

    ResponderEliminar
    Respuestas
    1. Hola Yusith, su pregunta es sobre el menú despegable, si así, comente un poco mas sobre lo que esta realizando, ademas de dejarme la dirección URL de su blog para poder ver lo que sucede

      Saludos.

      Eliminar
  12. Hola Luis, gracias por el tuto. ¿Cómo puedo hacer para que el menú esté alineado al centro o alineado justo en el mismo lugar que la cabecera? Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, con respecto a su pregunta, se tendría que ingresar el código de diferente manera y reestructurar el CSS para que se quede alineado justo a lado derecho de la cabecera principal si es lo que usted necesita. Ahora para ello, tendrá que esperar un nuevo tutorial que muy pronto se publicara.

      Saludos.

      Eliminar
  13. Hola Luís. estoy siguiendo los pasos pero llego al paso 6 y no hay coincidencia
    luego inenté con paso 7 y tampoco hay coincidencia. ¿qué hago? Gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, gracias por escribir, sobre su pregunta, por favor cual es la dirección URL de su blog y así le podre ayudar directamente

      Saludos.

      Eliminar
  14. Hola Luís. Mi URL: http://dioshombremundo.blogspot.com.co
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Juan, le deje las instrucciones en el siguiente enlace, no dude en escribir, dejeme saber si pudo realizar lo indicado:

      http://www.ayudadeblogger.com/p/debate-via-facebook.html

      Saludos

      Eliminar
  15. OK gracias. Le estaré contando como me fue...

    ResponderEliminar
  16. Hola Luís. Creo haber solucionado mi problema. Mil gracias... http://dioshombremundo.blogspot.com.co

    ResponderEliminar
    Respuestas
    1. Hola Juan, es bueno saber que ha dado solución,

      Saludos.

      Eliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios