MENÚ DESPLEGABLE PARA BLOGGER MEGA MENÚ V2

By Blogs Famag - domingo, agosto 18, 2019

MENÚ DESPLEGABLE PARA BLOGGER MEGA MENÚ V2 .

Como siempre "La Pagina de los Widgets" te presenta temas interesantes para que lo utilices en tu blog de blogger completamente gratis.

Si queréis verlo en acción podéis ir mi probador de códigos copiar el código
y pegadlo en el probador y lo veréis tal como es:

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.

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

Da un clic en “Diseño”

Abre un gadget “Añadir un gadget”

Busca el widget que dice “HTML/Javascript”,

Coloca el siguiente codigo en el interior

<div id="menu">
<li><a href="/" class="drop">Inicio</a>
<div class="dropdown_2columns">
<div class="col_2">
<h2>Bienvenidos !</h2>
</div>
<div class="col_2">
<p>Impresionante Mega menú V.2 para blogger desplegable.</p>
</div>
</div>
</li>
<li><a href="#" class="drop">Blogger</a>
<div class="dropdown_5columns">
<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/AVvXsEiE6sOxRuvSpoyUjbTq8z_b5onCvMNgr5z3VF-OQjxJ5JLVs5ujIWzyz9-_H3H5TRfSiEkOJGcY4roZc_-BL0bFcopnTsk3lnP1WNJ3sVXTUjXuJeXSGnxmnrl2UdFwnMf64tCg4oBe4h0/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/AVvXsEhmcJ8cA2tvOH4xFalGNHIgMnNMcc9-FNvGrGjLzGo7GVXpb1eU8JLBWB0gw9tWyrbG39l_wGfSO5VaEVU3Akog58kUXQ_GU7E8O9-9PVirazQ1K9ztRup6fX3sDpHQ8URDKRQ5Hup0HhA/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>
</li>
<li><a href="#" class="drop">Ganar Dinero</a>
<div class="dropdown_5columns">
<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/AVvXsEiE6sOxRuvSpoyUjbTq8z_b5onCvMNgr5z3VF-OQjxJ5JLVs5ujIWzyz9-_H3H5TRfSiEkOJGcY4roZc_-BL0bFcopnTsk3lnP1WNJ3sVXTUjXuJeXSGnxmnrl2UdFwnMf64tCg4oBe4h0/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/AVvXsEhmcJ8cA2tvOH4xFalGNHIgMnNMcc9-FNvGrGjLzGo7GVXpb1eU8JLBWB0gw9tWyrbG39l_wGfSO5VaEVU3Akog58kUXQ_GU7E8O9-9PVirazQ1K9ztRup6fX3sDpHQ8URDKRQ5Hup0HhA/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>
</li>
<li><a href="#" class="drop">SEO</a>
<div class="dropdown_5columns">
<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/AVvXsEiE6sOxRuvSpoyUjbTq8z_b5onCvMNgr5z3VF-OQjxJ5JLVs5ujIWzyz9-_H3H5TRfSiEkOJGcY4roZc_-BL0bFcopnTsk3lnP1WNJ3sVXTUjXuJeXSGnxmnrl2UdFwnMf64tCg4oBe4h0/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/AVvXsEhmcJ8cA2tvOH4xFalGNHIgMnNMcc9-FNvGrGjLzGo7GVXpb1eU8JLBWB0gw9tWyrbG39l_wGfSO5VaEVU3Akog58kUXQ_GU7E8O9-9PVirazQ1K9ztRup6fX3sDpHQ8URDKRQ5Hup0HhA/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>
</li>
<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/AVvXsEgWwptq4USNUluZPl2w9TVkk9YdUVtBDDngpnbz_aO4PwK8cQ7ypbVAMygATremeZpN0sJZDiw7okY1faTMSK7hb8COTk5t1zDuPekxwRdiKxLa8AEkgaFJoiRl5aSGHtU8EjuWX4ZTGEm6/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWwptq4USNUluZPl2w9TVkk9YdUVtBDDngpnbz_aO4PwK8cQ7ypbVAMygATremeZpN0sJZDiw7okY1faTMSK7hb8COTk5t1zDuPekxwRdiKxLa8AEkgaFJoiRl5aSGHtU8EjuWX4ZTGEm6/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>

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