Tutorial como insertar un menú desplegable para blogger

El tutorial del día de hoy trata de como insertar un menú desplegable para blogger en un widget, la inserción del código es muy fácil de realizarlo solo tendrán que seguir las instrucciones de este tutorial y lo obtendrán así de fácil. Este nuevo menú desplegable para blogger funciona perfectamente en todos los navegadores web como Firefox, Google Chrome, Internet Explorer etc. Además, no le causara ningún error en la estructura de su plantilla.

Si necesitan más trucos para blogger de como insertar un menú desplegable para blogger, les dejo algunos post que publique anteriormente

1. Como agregar un menú para mi blog de blogger con un solo widget
2. Como hacer un Menú vertical desplegable para mi blog de blogger
3. Como hacer un menú horizontal con submenús y buscador integrado para blogger
4. Como insertar un Menú desplegable y un Slideshow para blogger
5. Como insertar un menú desplegable con buscador incluido y redes sociales
6. Crear un Menú de colores para blogger
7. Crear un menú desplegable en Blogger
8. Menu Jquery para blogger
9. Menú desplegable para blogger
10. Menú desplegable para blogger Mega menú V2
11. Menú desplegable para blogger con imágenes
12. Menú desplegable para blogger nuevo estilo
13. Menú desplegable para blogger nuevo estilo CSS3

A continuación mire su demostración en mi blog de demos, el menú desplegable está ubicado en un widget y tiene como nombre “TUTORIAL NUEVO MENU DESPLEGABLE PARA BLOGGER”

Les gusto verdad!

Vamos a trabajar

1 Ir a blogger

2 Un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript”

5 Ábrelo e ingresa las siguientes líneas de código en su interior

<style> /* -------- start menu By Ayudadeblogger -------- */ .menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0} .menus ul{position:absolute;top:-999em;width:100%} .menus ul li{width:100%} .menus li:hover{visibility:inherit} .menus li{float:left;position:relative} .menus a{display:block;position:relative} .menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99} .menus li:hover li ul,.menus li.sfHover li ul{top:-999em} .menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0} .menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em} .menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0} .sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px} .menus .sf-shadow ul.sf-shadow-off{background:transparent} .menu-secondary-container { background: none repeat scroll 0 0 #E30000; border-color: #FFFFFF; height: 34px; position: relative; z-index: 300; } .menu-secondary{} .menu-secondary ul{min-width:160px} .menu-secondary li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXFQm-Z9LOKmaCJYwwQfBAbUIv1-1Ugbc39Agn_oAswxCbEgmnO73ADoRn9qQIBcHm2EUBhGV25WPSxM4i5NsKGN8IzCLbhlbkHHN0ZVsVFPWyTsVUolgXlv425lnQRQYzAkY14x8fYk8/s1600/menu-secondary-separator.png) left top no-repeat} .menu-secondary li:first-child{background:none} .menu-secondary li a { color: #FFFFFF; font: bold 12px Arial,Helvetica,Sans-serif; margin: 0 0 0 2px; padding: 11px 15px 8px; text-decoration: none; text-transform: uppercase; } .menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{    background: none repeat scroll 0 0 #F40404; color: #000000; outline: 0 none; } .menu-secondary li li{background:none;margin:0} .menu-secondary li li a{color:#df0000;text-shadow:0 1px 0 #fff;background:#FFF;padding:10px 15px;text-transform:none;margin:0;font-weight:normal} .menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;text-shadow:0 1px 0 #000;background:#df0000;outline:0} .menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px} .menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:9px 13px 0 0} .menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0} #footer-bg { text-align:center; Background-color: #333333; color : #ffffff; } </style> <div class='span-24'> <div class='menu-secondary-container'> <ul class='menus menu-secondary'> <li><a href='/'>Inicio</a></li> <li><a href='#'>Tendencias</a> <ul class='children'> <li><a href='#'>Negocios</a></li> <li><a href='#'>Interes</a></li> <li><a href='#'>Economía</a></li> </ul> </li> <li><a href='#'>Farandula</a> <ul class='children'> <li><a href='#'>Internacional</a></li> <li><a href='#'>Películas</a></li> <li><a href='#'>Tendencia</a> <ul class='children'> <li><a href='#'>Noticias</a> </li> </ul> </li> </ul> </li> <li><a href='#'>Noticias</a> <ul class='children'> <li><a href='#'>Categoría 1</a> <ul class='children'> <li><a href='#'>Sub Categoría 1</a></li> <li><a href='#'>Sub Categoría 2</a></li> <li><a href='#'>Sub Categoría 3</a></li> </ul> </li> <li><a href='#'>Categoría 2</a></li> <li><a href='#'>Categoría 3</a></li> <li><a href='#'>Categoría 4</a></li> </ul> </li> <li><a href='#'>Películas</a></li> <li><a href='#'>Deportes</a> <ul class='children'> <li><a href='#'>Categoría 1</a></li> <li><a href='#'>Categoría 2</a></li> </ul> </li> <li><a href='#'>Contactos</a></li> </ul> </div> </div>

Realiza estos cambios:

He marcado de tres diferentes colores en los lugares que tendrán que realizar sus diferentes cambios

El texto que está marcado de color rojo, pertenece al título principal de las pestañas del menú, cámbialos por los nombres de las categorías que quieras mostrar

Borra los símbolos numerales que están marcados de color azul #, por la dirección URL de los post que quieras dar a conocer en cada pestaña del menú

Además, también tendrás que cambiar el texto que está marcado de color verde por el nombre que tú quieras

Eso es todo, ahora dale un clic en “Guardar” y ubica tu nuevo widget de menu desplegable para blogger debajo de la cabecera principal de tu blog

Fácil verdad!

Recuerda suscribirte a mis nuevas actualizaciones

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Menu desplegableWidgets para Blogger

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.