Menú desplegable para blogger Mega menú V2


Como siempre Ayudadeblogger.com te presenta temas interesantes para que lo utilices en tu blog de blogger completamente gratis. Compartiré un widget de menú desplegable para blogger, a este nuevo menú desplegable para blogger se lo conoce como Mega menú V2. Es un simple código CSS que vamos a insertar en un solo widget, lo que hará nuestro menú desplegable para blogger es mostrar texto e imágenes con relación a nuestras mejores categorías de temas que queramos mostrar en nuestro menú. Todo este proceso se lo realiza de forma manual, así que tendrán que seguir las instrucciones tal como lo muestro en este post. El Mega menú V2 funciona en todos los navegadores web como, Firefox, Internet Explorer, Google Chrome etc.

Menú desplegable para blogger Mega menú V2

Además, no se olviden de visitar algunos artículos que publique sobre varios menús desplegables para blogger.

  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. Crear un menú desplegable en Blogger
  5. Menu Jquery para blogger
  6. Menú desplegable para blogger
  7. Menú desplegable para blogger con imágenes
  8. Menú desplegable para blogger nuevo estilo CSS3
A continuación mire su demostración en mi blog de demos


Les gusto verdad!

Vamos a insertar este nuevo Mega menú V.2 en nuestro blog de blogger

1 Ir a blogger

2 Da un clic en “Diseño


3 Abre un gadget “Añadir un gadget


4 Busca el widget que dice “HTML/Javascript”, ábrelo e inserta las siguientes líneas de código en su interior


<div id="menu">
<li><a href="/" class="drop">Inicio</a><!-- Empezar -->
<div class="dropdown_2columns"><!-- Start Ayudadeblogger.com columnas container -->
<div class="col_2">
<h2>Bienvenidos !</h2>
</div>
<div class="col_2">
<p>Impresionante Mega menú V.2 para blogger desplegable.</p>                      
</div>
</div><!-- End 2 columns container -->
</li><!-- End Inicio Item -->
<li><a href="#" class="drop">Blogger</a><!-- Empezar 5 columnas Item -->
<div class="dropdown_5columns"><!-- Empezar 5 columnas container -->
<div class="col_5">
<h2>Aqui el titulo</h2>
</div>
<div class="col_1">
<p class="black_box">Inserta aqui tu texto. Escribe el texto que desees que aparezca en este punto</p>
</div>
<div class="col_1">
<p>Compartir en tu blog diferentes widgets de las mejores redes sociales es muy facial de realizarlo.</p>
</div>
<div class="col_1">
<p class="italic">El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization).</p>
</div>
<div class="col_1">
<p>Ganar dinero en internet es muy fácil de realizarlo, encuentra lo que necesitas.</p>
</div>
<div class="col_1">
<p class="strong">Plantillas únicas para blogger, lo mejor para sus blogs de blogger, solicita una ya y haz de tu blog un diseño web profesional.</p>
</div>
<div class="col_5">
<h2>Aqui el titulo</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMHnVydlzeVXDoQZcaPG8SL6Z6IYE3U8L7_XceJAmlS7R3oGFLuEW4sHBE0hd5VDFqJJffbqLP67GydV96wJAvt1urFmoa_x2QzrcL-IDAQFUXMAg8w65LfVlSaQ1GoYgHUzzJVV4bk4/s400/Los+t%25C3%25ADtulos+y+las+descripciones+Meta.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization. ¿Por qué? Debido a la Optimización para motores de búsqueda  se forma la columna.<a href="http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html">Leer más...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTFgtMtHJG-_E6S6S2AEfG5kBvr9UG1WRyq61DsZOHjw_bLuVxjmv6EkrLPWWAUAz11DyTBEP6uJWcbUBF1ANrF5ITkDTasc1Y7oaDfZ4Hu6iGmQyHqTvDN6bhPtLuCZhR5-8r9Hb878/s1600/widgets+para+blogger.JPG" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Compartir en tu blog o web diferentes widgets de las mejores redes sociales es muy facial hacerlo con nosotros. En la cual nosotros solo usaremos scripts CSS con el fin que se mueva.<a href="http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html">Leer más...</a></p>
</div>
<div class="col_2">
<p class="black_box">El título es el rey de su contenido. Es la primera cosa que el internauta mira. Debe ser conciso e informativo, ya que los ojos de las personas estamos aptas para ver lo que mejor nos convenga. Google sólo muestra hasta 66 caracteres de un título. Por lo tanto, es una buena idea mantener a sus títulos con caracteres cortos. Sin embargo, no se limite a 66 caracteres solamente. Y solo incluya la información necesaria de sus títulos.</p>
</div>
</div><!-- Final 1er menu desplegable -->
</li><!-- Final 1er menu desplegable Item -->
<li><a href="#" class="drop">Ganar Dinero</a><!-- Empezar 5 columnas Item -->
<div class="dropdown_5columns"><!-- Empezar 5 columnas container -->
<div class="col_5">
<h2>Aqui el titulo</h2>
</div>
<div class="col_1">
<p class="black_box">Inserta aqui tu texto. Escribe el texto que desees que aparezca en este punto</p>
</div>
<div class="col_1">
<p>Compartir en tu blog diferentes widgets de las mejores redes sociales es muy facial de realizarlo.</p>
</div>
<div class="col_1">
<p class="italic">El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization).</p>
</div>
<div class="col_1">
<p>Ganar dinero en internet es muy fácil de realizarlo, encuentra lo que necesitas.</p>
</div>
<div class="col_1">
<p class="strong">Plantillas únicas para blogger, lo mejor para sus blogs de blogger, solicita una ya y haz de tu blog un diseño web profesional.</p>
</div>
<div class="col_5">
<h2>Aqui el titulo</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMHnVydlzeVXDoQZcaPG8SL6Z6IYE3U8L7_XceJAmlS7R3oGFLuEW4sHBE0hd5VDFqJJffbqLP67GydV96wJAvt1urFmoa_x2QzrcL-IDAQFUXMAg8w65LfVlSaQ1GoYgHUzzJVV4bk4/s400/Los+t%25C3%25ADtulos+y+las+descripciones+Meta.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization. ¿Por qué? Debido a la Optimización para motores de búsqueda  se forma la columna.<a href="http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html">Leer más...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTFgtMtHJG-_E6S6S2AEfG5kBvr9UG1WRyq61DsZOHjw_bLuVxjmv6EkrLPWWAUAz11DyTBEP6uJWcbUBF1ANrF5ITkDTasc1Y7oaDfZ4Hu6iGmQyHqTvDN6bhPtLuCZhR5-8r9Hb878/s1600/widgets+para+blogger.JPG" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Compartir en tu blog o web diferentes widgets de las mejores redes sociales es muy facial hacerlo con nosotros. En la cual nosotros solo usaremos scripts CSS con el fin que se mueva.<a href="http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html">Leer más...</a></p>
</div>
<div class="col_2">
<p class="black_box">El título es el rey de su contenido. Es la primera cosa que el internauta mira. Debe ser conciso e informativo, ya que los ojos de las personas estamos aptas para ver lo que mejor nos convenga. Google sólo muestra hasta 66 caracteres de un título. Por lo tanto, es una buena idea mantener a sus títulos con caracteres cortos. Sin embargo, no se limite a 66 caracteres solamente. Y solo incluya la información necesaria de sus títulos.</p>
</div>
</div><!-- Final 2do menu desplegable -->
</li><!-- Final 2do menu desplegable -->
<li><a href="#" class="drop">SEO</a><!-- Empezar 5 columnas Item -->
<div class="dropdown_5columns"><!-- Empezar 5 columnas container -->
<div class="col_5">
<h2>Aqui el titulo</h2>
</div>
<div class="col_1">
<p class="black_box">Inserta aqui tu texto. Escribe el texto que desees que aparezca en este punto</p>
</div>
<div class="col_1">
<p>Compartir en tu blog diferentes widgets de las mejores redes sociales es muy facial de realizarlo.</p>
</div>
<div class="col_1">
<p class="italic">El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization).</p>
</div>
<div class="col_5">
<h2>Aqui el titulo</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMHnVydlzeVXDoQZcaPG8SL6Z6IYE3U8L7_XceJAmlS7R3oGFLuEW4sHBE0hd5VDFqJJffbqLP67GydV96wJAvt1urFmoa_x2QzrcL-IDAQFUXMAg8w65LfVlSaQ1GoYgHUzzJVV4bk4/s400/Los+t%25C3%25ADtulos+y+las+descripciones+Meta.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
<p>El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization. ¿Por qué? Debido a la Optimización para motores de búsqueda  se forma la columna.<a href="http://www.ayudadeblogger.com/2012/06/las-20-mejores-tacticas-de-seo-que-cada.html">Leer más...</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTFgtMtHJG-_E6S6S2AEfG5kBvr9UG1WRyq61DsZOHjw_bLuVxjmv6EkrLPWWAUAz11DyTBEP6uJWcbUBF1ANrF5ITkDTasc1Y7oaDfZ4Hu6iGmQyHqTvDN6bhPtLuCZhR5-8r9Hb878/s1600/widgets+para+blogger.JPG" width="70" height="70" class="img_left imgshadow" alt="" />
<p>Compartir en tu blog o web diferentes widgets de las mejores redes sociales es muy facial hacerlo con nosotros. En la cual nosotros solo usaremos scripts CSS con el fin que se mueva.<a href="http://www.ayudadeblogger.com/2012/06/como-compartir-todo-tipo-de-widget-de.html">Leer más...</a></p>
</div>
</div><!-- Final 3er menu desplegable -->
</li><!-- Final 3er menu desplegable Item -->
<li class="menu_right"><a href="#" class="drop">Contactos</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google +</a></li>
</ul>  
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">Widgets</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">Blogger</a></li>
<li><a href="#">Entradas</a></li>
<li><a href="#">Suscripciones</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Diseño</a></li>
<li><a href="#">Estructura</a></li>
<li><a href="#">Texto</a></li>
</ul>  
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">Diseño</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">Blogger</a></li>
<li><a href="#">Entradas</a></li>
<li><a href="#">Suscripciones</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Diseño</a></li>
<li><a href="#">Estructura</a></li>
<li><a href="#">Texto</a></li>
</ul>  
</div>
</div>
</li>
<li class="menu_right"><a href="#" class="drop">Noticias Negocios</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="#">Blogger</a></li>
<li><a href="#">Entradas</a></li>
<li><a href="#">Suscripciones</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Diseño</a></li>
<li><a href="#">Estructura</a></li>
<li><a href="#">Texto</a></li>
</ul>  
</div>
</div>
</li>

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

/* Navigation Bar */

#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 by ayudadeblogger.com*/

 background: #01080B;
 background: -moz-linear-gradient(top, #01080B, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01080B), to(#01080B));

 /* Borders */

 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 by juegosenlineajuegosgratis.com*/
 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 by Grupodelecluse.com*/

#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="Stylify Blogger" ><img src="http://img1.blogblog.com/img/blank.gif" /></a></div>

Realiza estos cambios:

He marcado de 5 diferentes colores en las partes que tendrás que realizar sus respecticos cambios. Cambia cada uno de ellos con los respectivos temas de tu blog.

Las URLs que están marcadas de color azul, tienes que borrarlos y poner ahí la URL correspondiente de tus post.

Existe texto que esta marcado de color rojo, el cual tendrás que borrarlo todo y poner ahí el texto que tú quieras

También hay unas URLs que están marcadas de color purpura, ahí es donde tienen que borrarlos y poner las URLs correspondientes de tus imágenes.

Además, el texto que esta marcado de color naranja, corresponde al titulo principal de cada pestaña de tu menú, bórralos y pon los nombres que quieras.

Y por ultimo, borra los numerales que están marcados de color azul # y pon ahí las URLs correspondientes de los post que quieras dar a conocer en el menú.

Eso es todo, ahora dale un clic en “Guardar” y ubícalo debajo de la cabecera principal de tu blog.

Felicidades ahora tienes un Mega menú V.2 para blogger

Fácil verdad!

¿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

1 comentario:

  1. Es impresionante. gracias.
    pero tengo problmas al modificarlo. Se me corta cuando llega al primer post, como si se metiera por debajo ¿?

    ResponderEliminar