add

Menú responsive desplegable para Blogger - Video Tutorial


Disponer de nuevos widgets para Blogger y agregarlos a los blogs de forma fácil y segura es lo que aprenderán a realizarlo en este tutorial creado para usuarios de Blogger

Si estaba buscando un tutorial que le ayude a generar un menú desplegable responsive en su blog de Blogger ha llegado al sitio adecuado. Aprenderá a insertar un Menú Responsive desplegable en su blog de Blogger.

Menú responsive desplegable para Blogger - Video Tutorial

¿El Menú desplegable es responsive?

El menú desplegable que se está presentando en este tutorial es totalmente responsive, se lo podrá visualizar con facilidad en computadoras de escritorio, smartphone, tabletas, etc. El menú se acopla perfectamente en todo tipo de pantallas disponibles

Menú responsive desplegable para Blogger - Video Tutorial

Información:

El menú es gratuito, basado en la interfaz de hojas de estilo Bootstrap, inspirado en el diseño Material Design de Google, el cual dispone de unas hojas de estilo CSS realmente sorprendentes.

A continuación puede ver su demostración en el siguiente blog


Nota importante:

Se recomienda antes de realizar cualquier cambio en su plantilla, efectuar una copia de seguridad de su blog o a su vez crear un nuevo blog para realizar el tutorial, Ayudadeblogger.com no se hace responsable si no ejecuto claramente el código tal como se lo indica en este tutorial.

Para más detalles puede visitar el siguiente enlace


Empezamos

1 Realice una copia de seguridad de su blog o cree un nuevo blog de ejemplos para ejecutar el código de forma segura

2 Dependiendo de la plantilla que esté utilizando se puede ejecutar el código en un widget HTML/Javascript, si en caso que no se despliegue el menú correctamente, deberá ingresarlo en el HTML de su plantilla, para ello les voy a mostrar dos formas seguras de ejecutar el código.

Pasos para ejecutar el menú desde un widget HTML/javascript

Video Tutorial


Primer paso

1 Ir a Blogger

2 Un clic en “Plantilla

Menú responsive desplegable para Blogger - Video Tutorial

3 Un clic en “Editar HTML

Menú responsive desplegable para Blogger - Video Tutorial

Ahora se le abrirá el Editor HTML de su plantilla

Menú responsive desplegable 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ú responsive desplegable para Blogger - Video Tutorial

4 Busque el siguiente Código

<head>

Justo abajo del código que encontró, ingrese los siguientes estilos

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet'/>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'/>
<link href='https://dl.dropboxusercontent.com/s/fkzeoqrbe6quyeo/navbar.css ' rel='stylesheet'/>


5 Un clic en Guardar plantilla

Menú responsive desplegable para Blogger - Video Tutorial

6 Diríjase a diseño

Menú responsive desplegable para Blogger - Video Tutorial

7 Un clic en Añadir un gadget


8 Busque el widget HTML/Javascript, ábralo

Menú responsive desplegable para Blogger - Video Tutorial

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

<nav class='navbar navbar-success navbar-fixed-top' role='navigation'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand'>Ayudadeblogger</a>
</div>

<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='/'>Inicio</a></li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 2<b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 3 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 4 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 5<b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li><a href='#'>Contactos</a></li>
                               </ul>
                </div>
                </div>
</nav>

Realice los siguientes cambios:

Cambie las palabras que están marcadas de color rojo por las que usted necesite mostrar

Cambie el símbolo numeral # que está marcado de color azul, por las direcciones URLs de las entradas que necesite mostrar

Eso es todo, un clic en Guardar, ubique su nuevo widget Menu Responsive desplegable para Blogger justo debajo de la entrada principal

Nota: 

-Si ve que no se abren los desplegables en su plantilla puede seguir las siguientes instrucciones:

Pasos para ejecutar el Menú desde el HTML de la plantilla

Video Tutorial


Primer paso

1 Un clic en “Plantilla

Menú responsive desplegable para Blogger - Video Tutorial

2 Un clic en “Editar HTML

Menú responsive desplegable para Blogger - Video Tutorial

Ahora se le abrirá el Editor HTML de su plantilla

Menú responsive desplegable 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ú responsive desplegable para Blogger - Video Tutorial

3 Busque el siguiente código

<head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet'/>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'/>
<link href='https://dl.dropboxusercontent.com/s/fkzeoqrbe6quyeo/navbar.css ' rel='stylesheet'/>


4 Busque el siguiente código

<body>

Si no existe dicho código, tal vez lo tenga de la siguiente manera

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

- Si aún no encuentra el código, puede dejarme un comentario, indicando la dirección URL de su blog de Blogger y con mucho gusto le ayudare a encontrar el código

5 Ingrese el siguiente código justo abajo del código que encontró

<nav class='navbar navbar-success navbar-fixed-top' role='navigation'>
<div class='container-fluid'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand'>Ayudadeblogger</a>
</div>

<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='/'>Inicio</a></li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 2 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 3 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 4 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Dropdown 5 <b class='caret'/></a>
<ul class='dropdown-menu'>
<li><a href='#'>Farándula</a></li>
<li class='divider'/>
<li><a href='#'>Noticias</a></li>
<li class='divider'/>
<li><a href='#'>Espectáculos</a></li>
<li class='divider'/>
<li><a href='#'>Videos</a></li>
<li class='divider'/>
<li><a href='#'>Chats</a></li>
                                               </ul>
                               </li>

<li><a href='#'>Contactos</a></li>
                               </ul>
                </div>
                </div>
</nav>

Realice estos cambios:

Cambie las palabras que están marcadas de color rojo por las que usted necesite mostrar

Cambie el símbolo numeral # que está marcado de color azul, por las direcciones URLs de las entradas que necesite mostrar

Eso es todo, un clic en Guardar plantilla

Menú responsive desplegable para Blogger - Video Tutorial

Disfrute de este nuevo Menú Responsive desplegable para Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

4 comentarios:

  1. Buenas tardes! y cómo se puede centrar este menú?

    ResponderEliminar
    Respuestas
    1. Hola Balvaneda, gracias por escribir, sobre su pregunta, no es necesario centrar el menú..

      Saludos.

      Eliminar
  2. Hola. Buenas Tardes. Como puedo cambiar el color y fuente de las letras??

    ResponderEliminar
    Respuestas
    1. Hola Oswaldo, le he dejado la información necesaria para que usted pueda realizar los cambios pertinentes sobre lo solicitado, diríjase al siguiente enlace:

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

      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