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.

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

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

<li><a href="/" class="drop">Inicio</a>

<h2>Bienvenidos !</h2>

</div>

<p>Impresionante Mega menú V.2 para blogger desplegable.</p>

</div>

</div>

</li>

<li><a href="#" class="drop">Blogger</a>

<h2>Aqui el titulo</h2>

</div>

<p class="black_box">Inserta aqui tu texto. Escribe el texto que desees que aparezca en este punto</p>

</div>

<p>Compartir en tu blog diferentes widgets de las mejores redes sociales es muy facial de realizarlo.</p>

</div>

<p class="italic">El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization).</p>

</div>

<p>Ganar dinero en internet es muy fácil de realizarlo, encuentra lo que necesitas.</p>

</div>

<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>

<h2>Aqui el titulo</h2>

</div>

<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>

<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>

<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>

<h2>Aqui el titulo</h2>

</div>

<p class="black_box">Inserta aqui tu texto. Escribe el texto que desees que aparezca en este punto</p>

</div>

<p>Compartir en tu blog diferentes widgets de las mejores redes sociales es muy facial de realizarlo.</p>

</div>

<p class="italic">El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization).</p>

</div>

<p>Ganar dinero en internet es muy fácil de realizarlo, encuentra lo que necesitas.</p>

</div>

<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>

<h2>Aqui el titulo</h2>

</div>

</div>

</div>

</div>

</li>

<h2>Aqui el titulo</h2>

</div>

<p class="black_box">Inserta aqui tu texto. Escribe el texto que desees que aparezca en este punto</p>

</div>

<p>Compartir en tu blog diferentes widgets de las mejores redes sociales es muy facial de realizarlo.</p>

</div>

<p class="italic">El propietario de cada sitio web o blog debe saber sobre SEO (Search Engine Optimization).</p>

</div>

<h2>Aqui el titulo</h2>

</div>

</div>

</div>

</li>

<li class="menu_right"><a href="#" class="drop">Contactos</a>

<li><a href="#">Twitter</a></li>

<li><a href="#">Facebook</a></li>

<li><a href="#">Google +</a></li>

</ul>

</div>

</li>

<li class="menu_right"><a href="#" class="drop">Widgets</a>

<li><a href="#">Blogger</a></li>

<li><a href="#">Entradas</a></li>

<li><a href="#">Suscripciones</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>

</li>

<li class="menu_right"><a href="#" class="drop">Diseño</a>

<li><a href="#">Blogger</a></li>

<li><a href="#">Entradas</a></li>

<li><a href="#">Suscripciones</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>

</li>

<li class="menu_right"><a href="#" class="drop">Noticias Negocios</a>

<li><a href="#">Blogger</a></li>

<li><a href="#">Entradas</a></li>

<li><a href="#">Suscripciones</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>

</li>

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 {

}

/* 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>

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?

TAGS: Menu desplegable

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.

Menú desplegable para blogger Mega menú V2

Recuerda suscribirte:

Luis Chávez

Related post

Comentarios

1 comentario:

Autor

Labels

Popular post

Youtube.com/ayudadeblogger

Formulario de contactos

Diseño

Inspiración

Tecnología

AMP Carrusel video

Suscríbete completamente gratis a nuestro boletín diario

Cookies

Menú desplegable para blogger Mega menú V2

Recuerda suscribirte:

Luis Chávez

Related post

Comentarios

1 comentario:

Autor

Labels

Popular post

Youtube.com/ayudadeblogger

Formulario de contactos

Diseño

Inspiración

Tecnología

AMP Carrusel video

AMP ADRASTEA

AMP DESIGN DEMO

AMP INSPIRITING

AMP DESTACADO

AMP KITCHEN

AMP FENIX

AMP MODERN

AMP ANDROMEDAD

AMP ALEX DESIGN

AMP BREAKING NEWS

AMP PRO DEMO

AMP BLOG BUILD

AMP TOUCH

AMP OCEAN FREE

AMP KILO

AMP DOMPI

AMP LANDING PAGE ONE

Suscríbete completamente gratis a nuestro boletín diario

Cookies