Nuevo Mega menú V.2 para Blogger

Nuevo Mega menú V.2 para Blogger .

Como siempre El mundo de Kiko te presenta temas interesantes para que lo utilices en tu bloc 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.

A continuación mira la demostración en mi blog de demos

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>
<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/AVvXsEgNRkRt4VJFmBNj8iJqaTodS4TapcD9uflIs2mF21nV4UpIowc-7jn8-FUlcTMXwpHZdOAQswnZNSC0OuPb41p6lW-dYW0TVuihT_bsVuqrm8lY85r0E8XpWui6hBOKfTzMkiIBd-xmM2g/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/AVvXsEh5rG_LRtQE8V6u7mmJihKTVzcc0G_jppPy_tvAwgMoR7gjgrPqseviuryKgiLE2T9F6ZamVKcdCY0nqWxn6UaclXqPr3ZEAP91QujM2oyR-2441xYAjhwNr9JFWr6SJRt_0ZtLIYc-hUo/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/AVvXsEgNRkRt4VJFmBNj8iJqaTodS4TapcD9uflIs2mF21nV4UpIowc-7jn8-FUlcTMXwpHZdOAQswnZNSC0OuPb41p6lW-dYW0TVuihT_bsVuqrm8lY85r0E8XpWui6hBOKfTzMkiIBd-xmM2g/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/AVvXsEh5rG_LRtQE8V6u7mmJihKTVzcc0G_jppPy_tvAwgMoR7gjgrPqseviuryKgiLE2T9F6ZamVKcdCY0nqWxn6UaclXqPr3ZEAP91QujM2oyR-2441xYAjhwNr9JFWr6SJRt_0ZtLIYc-hUo/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/AVvXsEgNRkRt4VJFmBNj8iJqaTodS4TapcD9uflIs2mF21nV4UpIowc-7jn8-FUlcTMXwpHZdOAQswnZNSC0OuPb41p6lW-dYW0TVuihT_bsVuqrm8lY85r0E8XpWui6hBOKfTzMkiIBd-xmM2g/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/AVvXsEh5rG_LRtQE8V6u7mmJihKTVzcc0G_jppPy_tvAwgMoR7gjgrPqseviuryKgiLE2T9F6ZamVKcdCY0nqWxn6UaclXqPr3ZEAP91QujM2oyR-2441xYAjhwNr9JFWr6SJRt_0ZtLIYc-hUo/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/AVvXsEipWZIYYvF2TNoWB7URPL8bdiSrB7r1k8dpIfxykqdmhJKLIIgG_d6mc4qEfoflPpvqkVWMI0lCycK0zmgHi1vgbXu7-vzWlFmJiM5tCSjAYEZ8AfstICxGWaw0vXM1HGmOIrQzOq1h2XV4/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWZIYYvF2TNoWB7URPL8bdiSrB7r1k8dpIfxykqdmhJKLIIgG_d6mc4qEfoflPpvqkVWMI0lCycK0zmgHi1vgbXu7-vzWlFmJiM5tCSjAYEZ8AfstICxGWaw0vXM1HGmOIrQzOq1h2XV4/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.