add

Menú desplegable Responsive para Blogger Video Tutorial


Video tutorial ¿Cómo insertar de forma fácil y sencilla un menú desplegable Responsive en mi blog de Blogger y que funcione correctamente en un computador de escritorio y que cuando se habrá mi blog de Blogger desde un teléfono inteligente automáticamente se haga totalmente Responsive?

Menú desplegable Responsive para Blogger Video Tutorial

Menú desplegable Responsive para Blogger Video Tutorial

Para responder a esta pregunta sigan las siguientes instrucciones:

Primero:

Habilite la plantilla móvil de su blog de Blogger


Segundo:

Tenga en cuenta el siguiente tutorial para que tenga una idea de cómo identificar un widget de su blog de Blogger


Además, tenga en cuenta el siguiente tutorial


Para ver cómo funciona este espectacular Menú Responsive en su blog de Blogger, deberá primero abrir su blog en un computador de escritorio, luego para ver el funcionamiento en un teléfono puede disminuir la pantalla de su navegador web y vera como se convierte automáticamente en un Menú Responsive o a su vez abrirlo desde un teléfono inteligente

Mire su demostración


Video Tutorial


1 Ir a Blogger

2 Un clic en “Plantilla

Menú desplegable Responsive para Blogger Video Tutorial

3 Un clic en “Editar HTML

Menú desplegable Responsive para Blogger Video Tutorial

Ahora se le abrirá el Editor HTML de su plantilla

Menú desplegable Responsive para Blogger Video Tutorial

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.

Menú desplegable Responsive para Blogger Video Tutorial

4 Busca este código

<head>

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'/>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

5 Busca este código

]]></b:skin>

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

<style>
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a { text-decoration: none; }

#main {
  width: 100%;
  display: block;
  float: left;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.navigation {
  display: block;
  margin: 20px 0;
  background: #009788;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 3px;
}

.navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

.navigation li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 17px;
  color: #def1f0;
}

.navigation li a {
  padding: 10px 15px;
  font-size: 17px;
  color: #def1f0;
  display: inline-block;
  outline: 0;
  font-weight: 400;
}

.navigation li:hover ul.dropdown { display: block; }

.navigation li ul.dropdown {
  position: absolute;
  display: none;
  width: 200px;
  background: #00695b;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  padding-top: 0;
}

.navigation li ul.dropdown li {
  display: block;
  list-style-type: none;
}

.navigation li ul.dropdown li a {
  padding: 10px;
  font-size: 15px;
  color: #fff;
  display: block;
  border-bottom: 1px solid #005c4d;
  font-weight: 400;
}

.navigation li ul.dropdown li:last-child a { border-bottom: none; }

.navigation li:hover a {
  background: #00695b;
  color: #fff !important;
}

.navigation li:first-child:hover a { border-radius: 3px 0 0 3px; }

.navigation li ul.dropdown li:hover a { background: #56b5ae; }

.navigation li ul.dropdown li:first-child:hover a { border-radius: 0; }

.navigation li:hover .arrow-down { border-top: 5px solid #fff; }

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -5px;
  content: &#39;&#39;;
}
 @media only screen and (max-width:767px) {

.navigation {
  background: #fff;
  width: 200px;
  height: 100%;
  display: block;
  position: fixed;
  left: -200px;
  top: 0px;
  transition: left 0.3s linear;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.navigation.visible {
  left: 0px;
  transition: left 0.3s linear;
}

.nav_bg {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 50px;
  margin: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #009788;
  padding: 12px 0 0 10px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.nav_bar {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  cursor: pointer;
  margin: 0;
}

.nav_bar span {
  height: 2px;
  background: #fff;
  margin: 5px;
  display: block;
  width: 20px;
}

.nav_bar span:nth-child(2) { width: 20px; }

.nav_bar span:nth-child(3) { width: 20px; }

.navigation ul { padding-top: 50px; }

.navigation li { display: block; }

.navigation li a {
  display: block;
  color: #505050;
  font-weight: 500;
}

.navigation li:first-child:hover a { border-radius: 0; }

.navigation li ul.dropdown { position: relative; }

.navigation li ul.dropdown li a {
  background: #00695b !important;
  border-bottom: none;
  color: #fff !important;
}

.navigation li:hover a {
  background: #009788;
  color: #fff !important;
}

.navigation li ul.dropdown li:hover a {
  background: #56b5ae !important;
  color: #fff !important;
}

.navigation li ul.dropdown li a { padding: 10px 10px 10px 30px; }

.navigation li:hover .arrow-down { border-top: 5px solid #fff; }

.arrow-down {
  border-top: 5px solid #505050;
  position: absolute;
  top: 20px;
  right: 10px;
}

.opacity {
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
}
 @media only screen and (max-width:1199px) {

.container { width: 96%; }
}
</style>

6 Busca este código

</head>

Ingrese el siguiente Script justo arriba del código que encontró

<script src='http://code.jquery.com/jquery-2.1.4.min.js'/>
<script>
$(document).ready(function(){
                               $(&#39;.nav_bar&#39;).click(function(){
                                               $(&#39;.navigation&#39;).toggleClass(&#39;visible&#39;);
                                               $(&#39;body&#39;).toggleClass(&#39;opacity&#39;);
                               });
                });
</script>

7 Ahora de un clic en “Guardar plantilla

Menú desplegable Responsive para Blogger Video Tutorial

8 Diríjase a Diseño de su blog

Menú desplegable Responsive para Blogger Video Tutorial

9 Un clic en “Añadir un gadget

Menú desplegable Responsive para Blogger Video Tutorial

10 Busca el widget que dice "HTML/Javascript" ábrelo

Menú desplegable Responsive para Blogger Video Tutorial

11 Ingrese las siguientes líneas de código en su interior

<div style="text-align: left;">
<div id="main">
  <div class="container">
    <nav>
      <div class="navigation">
        <ul>
          <li><a href="/">Inicio</a></li>
          <li><a href="#">Noticias</a></li>
          <li><a href="#">Farándula</a></li>
          <li><a href="#" tabindex="1">Servicios<span class="arrow-down"></span></a>
            <ul class="dropdown">
              <li><a href="#">SubCategoría 1</a></li>
              <li><a href="#">SubCategoría 2</a></li>
              <li><a href="#">SubCategoría 3</a></li>
              <li><a href="#">SubCategoría 4</a></li>
              <li><a href="#">SubCategoría 5</a></li>
            </ul>
          </li>
          <li><a href="#" tabindex="1">Negocios<span class="arrow-down"></span></a>
            <ul class="dropdown">
              <li><a href="#">SubCategoría 1</a></li>
              <li><a href="#">SubCategoría 2</a></li>
              <li><a href="#">SubCategoría 3</a></li>
              <li><a href="#">SubCategoría 4</a></li>
              <li><a href="#">SubCategoría 5</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="nav_bg">
        <div class="nav_bar"> <span></span> <span></span> <span></span> </div>
      </div>
    </nav></div></div></div>

Realice los siguientes cambios:

Elimine los símbolos numerales # que están marcados de color azul por la dirección URL de una de sus entradas

Cambie los nombres que están marcados de color rojo, por el que usted desee

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

13 Ubique su nuevo Widget Menú desplegable Responsive justo arriba de la cabecera principal de su blog y luego de un clic en “Guardar disposición

Menú desplegable Responsive para Blogger Video Tutorial

Nota: una vez hecho todos estos pasos, recuerde que debe habilitar el widget para que se muestre en un teléfono inteligente, siga las instrucciones del siguiente tutorial


¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

emailEnviar por correo

8 comentarios:

  1. Como puedo hacer que cuando yo le de click a esa categoria se valla a ello
    en el menu deplegable

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta siga las instrucciones donde dice: Elimine los símbolos numerales # que están marcados de color azul y remplacelos por la dirección URL de una de sus entradas,

      Debe ingresar una dirección URL en cada #

      Por ejemplo esta es una dirección URL:

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

      Saludos.

      Eliminar
  2. No logro que se despliegue el menú y ya revisé todos los pasos hasta 3 veces y no encuentro el error.

    ResponderEliminar
    Respuestas
    1. Hola Meow y Woof, con respecto a su pregunta, por favor remita la dirección URL de su blog de Blogger, para poder ver que es lo que sucede y así poderle guiar

      Saludos

      Eliminar
  3. hola amigo mi submenu se muestra detrás de otras cosas que no entiendo?
    http://movilelectronicss.blogspot.com/#

    ResponderEliminar
    Respuestas
    1. Hola, he visitado su blog de Blogger, y no veo que haya ingresado el código

      Saludos.

      Eliminar
  4. Por que despues de haber aplicado estas instrucciones mi blog dejo de verse en un ordenador pero en el celular si se puede ver?

    ResponderEliminar
    Respuestas
    1. Hola Orlando, gracias por escribir, sobre su pregunta, esto no debe suceder, tal vez usted realizo algún cambio en la plantilla, le sugiero me deje la dirección URL de su blog para poder ver lo que sucede

      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 (33) 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 (11) 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