ESCAPARATE DIGITAL 2019: MENÚ RESPONSIVE DESPLEGABLE PARA BLOGGER

MENÚ RESPONSIVE DESPLEGABLE PARA BLOGGER.

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.

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

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

Demo :

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, "Escaparate digital 2019" 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

Políticas de uso:

Empezamos

Realiza una copia de seguridad de tu blog o creas un nuevo blog de ejemplos para ejecutar el código de forma segura

Dependiendo de la plantilla que estés utilizando se puede ejecutar el código en un widget HTML/Javascript, si en caso que no se despliegue el menú correctamente,

deberás ingresarlo en el HTML de tu plantilla, para ello os 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

Un clic en “Plantilla”

Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

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 el siguiente Código

<head>

Justo abajo del código que encontraste, ingresa los siguientes estilos:

Un clic en Guardar plantilla

Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Un clic en “Diseño”

Clic en “Añadir un gadget”

Busca el widget que dice “HTML-Javascript” y ábrelo

Coloca el siguiente código en el 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>

Después de haber insertado el código, un clic en "Guardar"

Realiza los siguientes cambios:

Cambia las palabras que están marcadas de color rojo por las que vosotros necesitéis mostrar

Cambia el símbolo numeral # que está marcado de negrita, por las direcciones URLs de las entradas que necesitéis mostrar

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

Nota:

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

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

Video Tutorial

Primer paso

Un clic en “Plantilla”

Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

3 Busca el siguiente código

<head>

Ingresa el siguiente código justo abajo del código que encontraste.

Busca el siguiente código

<body>

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

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

Un clic en “Plantilla”

Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

Coloca este código en el buscador y dale un "Enter"

<body>

Ingresa el siguiente código justo abajo del código que encontraste.

<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>

Realiza estos cambios:

Cambia las palabras que están marcadas de color rojo por las que vosotros necesitéis mostrar

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

Eso es todo, un clic en Guardar plantilla

Data de la Publicación; 01-09-2019

Fuente; ayudadeblogger

Publicado por;

Paginas

Menú

Mis Blogs

PÁGINA DE BIENVENIDA

MENÚ RESPONSIVE DESPLEGABLE PARA BLOGGER

0 comentarios:

Paginacion

Buscar este blog

Archivo del blog

Denunciar abuso

Páginas

Datos personales

Bienvenida

Calendario

Acortador de URL

Etiquetas