Menú desplegable para blogger


Es hora de compartir con ustedes un nuevo y espectacular menú desplegable para blogger con un estilo único. No necesitaras introducirlo en tu editor HTML de tu plantilla, solo lo vas ha instalar en un solo widget, Que te parece esta idea única ¡ Blogger es realmente magnifico es el único sitio web que puede darte este maravilloso y único menú desplegable para blogger con un estilo totalmente diferente a los demás. En este nuevo menú desplegable para blogger no vamos a utilizar ningún javascript, solo un simple código CSS que hace que este menú sea único en su categoría. Ayuda de blogger te lo presenta así de fácil, solo tienes que seguir las instrucciones de configuración y lo podrás obtener y publicarlo en tu blog de blogger completamente gratis. El buscador de Google le encanta dar a conocer paginas web desde sus paginas web como Blogger, utilizar la tecnología de blogger es muy fácil. Blogger es la mejor plataforma web creada para la realización de páginas web gratis en todo el mundo. Anteriormente publique algunos menús desplegables de los cuales les dejo los enlaces aquí:


Menú desplegable para blogger

Bueno a continuación mire su demostración en mi blog de demos


Te gusto verdad!

Vamos a instalarlo en nuestro blog de blogger

1 Ir a blogger

2 Da un clic en “Diseño

Menú desplegable para blogger

3 Busca un gadget “Añadir un gadget” y ábrelo

Menú desplegable para blogger

4 Se te desprenderá una nueva ventana en la cual tendrás que buscar el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior

Menú desplegable para blogger

<div id="menu">
<li><a href="http://ayudadeblogger.com/" class="drop">Inicio</a><!-- Empezar Inicio Item -->
<div class="dropdown_2columns"><!-- Begin  columns container by ayudadeblogger.com-->
<div class="col_2">
<h2>Bienvenidos a Ayudadeblogger.com!</h2>
</div>
<div class="col_2">
<p>Hola y bienvenidos! Esta es una muestra de las posibilidades de este impresionante menú desplegable para Blogger.</p>            
<p>Este artículo viene con una amplia gama de estilos de tipografía preparados, como encabezados, listas, etc</p>            
</div>
<div class="col_2">
<h2>SOPORTE</h2>
</div>
<div class="col_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtn9j5uRX4t3sRaCp6HhEHHF6OEEvTxiIF44UNYrGZ5mxHGOMvVDH8kDLC__TxFAOPZrtSKy4SGlk3Q0FA1W5KuAH-VCjQ-u-OP6L3qBTCX302o7Wje5zAEJFt8Ba2sBzSTIvX21oVCzS/s1600/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Este menú ha sido probado en todos los principales navegadores.</p>
</div>
</div><!-- End 2 columnas container ayudadeblogger.com-->
</li><!-- End Home Item -->
<li><a href="#TU LINK AQUI" class="drop">Blogger</a><!-- Empezar 4 columns Item star ayudadeblogger.com-->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End primeras 4 columnas container by ayudadeblogger.com-->
</li><!-- End 4 columns Item -->
<li><a href="#TU LINK AQUI" class="drop">Diseño Web</a><!-- Empezar 4 columnas Item soport ayudadeblogger.com-->
<div class="dropdown_4columns"><!-- Empezar 4 columnas container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI ">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container soport ayudadeblogger.com-->
</li><!-- End 4 columnas Item soport grupodelecluse.com-->
<li><a href="#TU LINK AQUI" class="drop">SEO Online</a><!-- Empezar 4 columnas Item -->
<div class="dropdown_4columns"><!-- Empezar 4 columns container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container -->
</li><!-- End 4 columnas Item soport ayudadeblogger.com-->
<li><a href="#TU LINK AQUI" class="drop">Widgets para Blogger</a><!-- Empezar 4 columnas Item -->
<div class="dropdown_4columns"><!-- Empezar 4 columnas container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container -->
</li><!-- End 4 columnas Item sopor by ayudadeblogger.com-->

<style type="text/css">
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar star ayudadeblogger.com */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color and gradients */

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders star by www.grupodelecluse.com*/

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2m5sESjuMAdfRZnzPpREhaBSyJPi6d3IMrNvYAdqsU1iwwVWXT4n6Mn9IysTqJ-dZdgtjJjIU9yHmLsYjjvWeP6rURBmyGtFEjEkh7Ye-1BRBgtknyzC8Jh5XXYT69WIN6dIaEUoNe-l/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2m5sESjuMAdfRZnzPpREhaBSyJPi6d3IMrNvYAdqsU1iwwVWXT4n6Mn9IysTqJ-dZdgtjJjIU9yHmLsYjjvWeP6rURBmyGtFEjEkh7Ye-1BRBgtknyzC8Jh5XXYT69WIN6dIaEUoNe-l/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}


</style>
<a href="http://www.ayudadeblogger.com" title="Ayuda de Blogger" ><img src="http://img1.blogblog.com/img/blank.gif" /></a></div>

Realiza estos cambios:

Recuerda solo debes editar los pasos que te voy a indicar a continuación y no borres ni trates de cambiar nada ya que por un punto o coma o un código borrado no se mostrara el menú.

He marcado con cuatro diferentes colores en los cuales deberán remplazarlos tal como lo voy a explicar a continuación

El primer link que deberás borrar es http://ayudadeblogger.com/ y pon la dirección de tu blog en vez de mi dirección.

Cambia todas las palabras que están marcadas de color purpura Bienvenidos a Ayudadeblogger.com!, por una frase de bienvenida o lo que tu quieras

En las partes que están marcadas de color azul #TU LINK AQUI, deberás borrarlo y poner el link de la pagina que quieras mostrar.

Además, deberás borrar las palabras que están marcadas de color verde Aqui el titulo del Menu Ayudadeblogger.com y poner el titulo que tú quieras.

Por ultimo todas las palabras que están marcadas de color rojo Blogger, bórralas y pon el texto que tu quieras.

Eso es todo, luego das un clic en “Guardar” y ubica tu widget debajo de la cabecera principal.

Felicidades ahora tienes un menú impresionante en blogger.

Espero haber sido lo mas explicativo posible.

¿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

28 comentarios:

  1. Hola, me gustaria recibir el codigo
    kaly.man.tropia@gmail.com

    ResponderEliminar
  2. Hola el codigo esta insertado en este post. En el paso 4
    Saludos.

    ResponderEliminar
  3. Amigo, una vez que hago click en una opcion de la barra observo que despliega pero no se ve, queda el despliegue como detras del body, sabes como lo soluciono. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, este codigo funciona correctamente, tal vez algo borraste, lo puedes ver en mi blog de demos.. Y debes insertarlo en un widget HTML/Javascript
      Saludos.

      Eliminar
    2. Hola, magnífico recurso.

      Me gustaría saber cómo es posible ajustar la barra al ancho del blog, es decir acortar y centrar.

      Gracias y saludos

      Eliminar
    3. No estoy seguro, pero intenta con esto: En la seccion "/* Navigation Bar star ayudadeblogger.com */" hay una linea que dice "width:940px;" --Le quitas el valor ("940px") y lo reemplazas por "100%" (sin las comillas, claro). Supongo que debe ser asi. Que lo confirme Luis, para estar seguro.

      Eliminar
    4. Tienes toda la razón Bruno, yo lo he modificado desde ese apartado, sólo que en lugar de un widget yo lo tengo directamente sobre la estructura de la página, la cual he modificado según mis necesidades para un trabajo que estoy realizando.

      Aunque aún no está acabado podéis echar un vistazo pinchando en el enlace:

      http://cincotapas.blogspot.com.es/

      Aprovecho para mandar un cordial saludo a Luis, de quien me considero un admirador.

      Eliminar
  4. My hermano me esta pasando lo mismo que JOSE ALARCON
    cuando intento darle clic a una opcion se despliega abajo de la plantilla
    he copiado el codigo varias veces y me sale lo mismi
    ayudame plisss
    Te lo agradeceria en el alma.
    Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola, enviame tu insidencia directamente a esta direccion: ayudadeblogger@gmail.com y te podre ayudar directamente.
      Saludos.

      Eliminar
  5. hola, excelente aportación, es lo que estaba buscando, pero tengo un problema, no puedo hacer que las columnas siempre estén cargadas a la izquierda, de antemano muchas gracias, excelente

    ResponderEliminar
    Respuestas
    1. Hola, no entiendo muy bien a tu pregunta que te refieres con "no puedo hacer que las columnas siempre estén cargadas a la izquierda"

      Saludos,.

      Eliminar
  6. Es uno de los mejores que he visto jamas.

    Y me refiero tanto al menu, como al tutorial y a la simpleza de instalacion.

    Es buenisimo, hasta excelente, y es un hecho que lo pondre en mi blog personal y en otro mas, que comennzare el año siguiente.

    Y mejora mas, puesto que no hay que editar el HTML de la plantilla como en otros casos (Eso si que es una vasta chorrera... cabiendo destacar que alguna vez me puse a editarla manualmente para agregar un widget que termine quitando unos dias despues y ni uso le di; en fin.. esa es otra historia).

    Al ver esto por primera vez, me resulto fantastico, hasta que llegue a la seccion de insertar el codigo.

    Nunca antes vi un codigo para gadget mas largo y me fastidio tanto tanta chorrera de codigo HTML/JavaScript que...

    Bueno, pero acabo de darme cuenta que solo debo editar lo de la parte superior y eso lo hace menos tedioso.

    Tambien pienso agregar otras cosillas que encontre por aqui...

    Muchas gracias por este genial aporte, Luis, es fenomenal; tanto como agradezco los demas tutoriales que das.

    Saludos desde Cordoba capital (Argentina)

    ResponderEliminar
    Respuestas
    1. Hola, me alegra mucho que te haya gustado este menu desplegable para blogger Megamenu.
      Saludos.

      Eliminar
  7. Una duda.. ¿es posible editar el codigo para cambiar los colores (de fondo, de letra..) y la fuente para los titulos/subtitulos? ¿o ya viene asi por defecto?

    ResponderEliminar
    Respuestas
    1. Hola si es psoble realizar todo eso a partir desde este codigo, radient(top, #0272a7, #013953); anda probando cada uno de los colores que quieras dar a conocer en tu menu.
      Saludos.

      Eliminar
    2. OK, muchas gracias, Luis..
      Ahora estoy viendo como agregarle mis enlaces al menu y quitarle/agregarle/cambiarle secciones al mismo.
      A lo primero lo intente, pero el menu salia cualquier cosa; pero ahora supongo que lo estoy haciendo bien, con ayuda de una pagina de Zona de prebas para HTML..
      Al menos, por ahora no sale ningun error.
      Saludos, amigo.

      Eliminar
  8. Hola, el menú me ha encantado pero al insertar el código parece que no sale completo, tan solo las pestañas principales, el resto queda oculto, como puedo solucionar este problema, este es el blogs donde he insertado el código: http://pruebastulilule.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, es normal que te salga este problema en tu plantilla ya que estas utilizando una plantilla de blogger. Copia todo el codigo que copiaste en tu widget. Abre Plantilla, un clic en editar html y busca este codigo < body > justo abajo del codigo que encontraste inserta todo el codigo que tenias puesto en tu widget y luego le das un clic en guardar plantilla, y veras que te funiona correctamente.
      Saludos

      Eliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Hola amigo Luis Chávez.
    Primero ante todo, lo felicito por la gran ayuda que nos presta a todos los integrantes de este hermoso Blog.
    Tengo un pequeño problemita que espero me pueda ayudar, una vez que coloco el código en la parte superior de la página, no despliega el menú, no se si me expliqué bien, aquí le dejo el link de mi blog para que sepa a que me refiero, gracias de antemano querido amigo
    http://insectosdeamazonas.blogspot.com/

    ResponderEliminar
  11. hola me llamo marlon. muchas gracias por tu menú. esta muy bonito. solo que lo he intentado poner en el editor el editor de html, pero no me queda, no he podido, es que en algunas paginas donde lo he querido poner, los gadget, no los puedo poner abajo de la cabecera. y halli es donde me gustaría colocarlo. si me puedes ayudar te lo agradecería muchisimo, porfa, esque lo necesito bastante...

    ResponderEliminar
  12. Hola, muy bueno el código, solo que tengo problema en el submenu, solo se me despliegan dos líneas..
    Ejemplo:
    Temas
    Slideshow
    Herramientas
    Widgets
    Noticias


    De este codigo, solo se me despliega: TEMAS Y SLIDESHOW...

    Espero me puedas auxiliar... Gracias

    ResponderEliminar
  13. Hola, muchas gracias por el aporte. Quería consultarte si en alguna pestaña del menú no quiero desplegable, ¿qué cambios debería hacer en el código? Gracias

    ResponderEliminar
  14. Hola de nuevo Luis, Como te va? Estuve algo liado con el menú de mi blog, y pensé en tu blog, cuando vi sas nuevo diseño y gran menú que encontré, gracias por el aporte, pero tengo un problema con el menú, al pasar el mouse por encima de la ultima pestaña del lado derecho del menú esta se sale del blog, tanto que no se ven todas las opciones, que tendría que hacer para que esa pestaña no salga fuera del blog? Gracias de nuevo Luis sigue así no te detengas, Los cambios son buenos, Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Ganancias, gracias por su comentario, sobre su pregunta, el menú no es responsive, ademas, necesito que remita la dirección URL de su blog para poder ver lo que usted indica.

      Saludos.

      Eliminar
  15. Hola Luis, aqui esta la direcion del blog http://menuparainstalar.blogspot.com/
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Ganancias, he visitado su blog, la única solución para ese inconveniente es eliminar los dos últimos puestos en el cual dice "Plantillas" "Redes sociales" elimine todo el código que se encuentra donde le especifique y así pueda mostrar solo la parte que dice "Diseño"

      Saludos.

      Eliminar