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?
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”
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>
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: '';
}
@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(){
$('.nav_bar').click(function(){
$('.navigation').toggleClass('visible');
$('body').toggleClass('opacity');
});
});
</script>
|
7 Ahora de un clic en “Guardar plantilla”
8 Diríjase a Diseño de su blog
9 Un clic en “Añadir un gadget”
10 Busca el widget que dice "HTML/Javascript" ábrelo
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”
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
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Como puedo hacer que cuando yo le de click a esa categoria se valla a ello
ResponderEliminaren el menu deplegable
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,
EliminarDebe 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.
No logro que se despliegue el menú y ya revisé todos los pasos hasta 3 veces y no encuentro el error.
ResponderEliminarHola 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
EliminarSaludos
hola amigo mi submenu se muestra detrás de otras cosas que no entiendo?
ResponderEliminarhttp://movilelectronicss.blogspot.com/#
Hola, he visitado su blog de Blogger, y no veo que haya ingresado el código
EliminarSaludos.
Por que despues de haber aplicado estas instrucciones mi blog dejo de verse en un ordenador pero en el celular si se puede ver?
ResponderEliminarHola 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
EliminarSaludos
saludos, no se desplegan los submenú, favor necesito su ayuda gracias
ResponderEliminarhttp://rdconecta2.blogspot.com/
Hola Angelo, gracias por escribir, he visitado su blog en el cual pude observar que tiene ingresado algunos css de otro menú el cual esta ocasionando que no se muestre correctamente el menú
EliminarSaludos.
Hola el boton se despliega detras de otras cosas que puedo hacer?
ResponderEliminarHola
ResponderEliminarsale el menu atras
No me sale bien http://www.edwinespana.tk/
Hola Edwin, con respecto a su pregunta no veo el menú instalado en su blog
EliminarSaludos.
YA reviselo y ahi esta! :D
EliminarHola lo instale y me aparece detrás de las demás cosas...
ResponderEliminarHola Edwin, revise su blog y si esta instalado el menú, ahora el motivo por el cual no se le muestra correctamente es por que la plantilla que esta utilizando ya dispone de unos estilos de menú, es por ello que esta interfiriendo con los nuevos estilos de este tutorial
EliminarSaludos.
Buenas tardes,
ResponderEliminarHe estado intentndo seguir los pasos que indecas, para poner el menú desplegable, pero cuando busco el código ]]>, no me aparece, porque puede ser?
hola otra vez, he conseguido encontrar el código y he seguido todos los pasos para poner el menu desplegable.
ResponderEliminarAparece todo correctamente, pero no se me despliegan los menus.
Hola Isma, con respecto a su pregunta, por favor hágame saber la dirección URL de su blog.
EliminarSaludos
el menú me queda perfecto, pero la barra lateral, donde está el perfil, se corre hacia la parte de abajo del blog y cuando lo abro desde un celular, el nombre del blog no aparece completo
ResponderEliminarHola Daniel, gracias por escribir, cual es la URL de su blog de Blogger donde se encuentra el menu. Saludos
Eliminarwww.guiaparaforex.com, pero ya hice otro menú responsive, de este mismo blog y ese si me funciona a la perfección
Eliminar