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.

Tutorial como insertar un menú desplegable para blogger

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(http://1.bp.blogspot.com/-Lf_sMjivwMM/Tu3vbg_ZM3I/AAAAAAAABgQ/p9-1zP1Qfw0/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



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.

Related post

Comentarios

17 comentarios:

  1. Muchos saludos amigo Luis... espero me puedas ayudar con este pequeño incoveniente.
    No puedo activar mi barra de menu principal y insertar cualquier tipo de menu. Espero me puedas apoyar. http://peruanosaldias.blogspot.com/ haber si me escribes a al correo actperuana@yahoo.com.pe

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, y no tienes disponible ningun menu, te aconsejo que sigas este tutorial en el cual podras realizarlo desde el editor HTML de tu plantilla. http://www.ayudadeblogger.com/2013/10/como-insertar-un-menu-desplegable-con-buscador-incluido-y-redes-sociales.html

      Saludos.

      Eliminar
    2. Amigo Luis... muchas gracias por el apoyo, pero no me funciono como se desea ya q el menú se muestra en la parte izquierda y no como muestra el ejemplo, esto me viene pasando cada vez q se instala cualquier tipo de menú. Te agradeceré me puedas apoyar.

      Eliminar
    3. Hola, te he enviado la solucion a tu problema directamente en tu correo electronico: actperuana@yahoo.com.pe
      Saludos.

      Eliminar
  2. hola luis por que el menu nose mira en la parte de arriba? y me sale en la parte derecha pegados en una parte me ayudarias con eso? porfavor saludos

    ResponderEliminar
    Respuestas
    1. Hola, dejame la direccion Url de tu blog para poder verlo, ya que el truco es muy facil de realizarlo.
      Saludos

      Eliminar
    2. hola Luis excelente trabajo igual quiero que aparesca el menu en la parte de arriba ayuda porfavor

      Eliminar
    3. ohhh gracias ya lo arregle solo hay que meniar el gadget y ya gracias buen aporte

      Eliminar
    4. pero lo malo que en el mio no desplega

      Eliminar
  3. hola, es genial el tutorial!!!
    TENGO UN PROBLEMA!
    No desplega el menu :() QUe puedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola, enviame la direccion de tu blog para poder ver donde puedes ubicar tu menu desplegable
      Saludos

      Eliminar
  4. no me quedo bien hermano no hay submenu http://defensoresdelamerluza.blogspot.com.ar/#

    ResponderEliminar
  5. Excelente,te felicito Luis tu web es de mucha ayuda para mi blog.Gracias

    ResponderEliminar
  6. Hola, lo puse pero no se despega, todos los menus despegables que he intentado no se despegan, puedes ayudarme ?? este es mi blog : booksparadises.blogspot.com

    ResponderEliminar
    Respuestas
    1. Este truco de blogger funciona perfectamente en mis blogs de demos. He visto tu blog lo que tocaria hacer es insertar todo el codigo dentro del editor HTML de tu plantilla. Saludos

      Eliminar