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.
- Como agregar un menú para mi blog de blogger con un solo widget
- Como hacer un Menú vertical desplegable para mi blog de blogger
- Como hacer un menú horizontal con submenús y buscador integrado para blogger
- Crear un menú desplegable en Blogger
- Menu Jquery para blogger
- Menú desplegable para blogger
- Menú desplegable para blogger con imágenes
- 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="http://3.bp.blogspot.com/-wjAZmwj7vXA/T-aPvbMFd_I/AAAAAAAAAQE/eL2laP0W6RU/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="http://3.bp.blogspot.com/-Nswa8QB-UP8/UQ0i2J9NrdI/AAAAAAAACCo/zEBearifmaY/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="http://3.bp.blogspot.com/-wjAZmwj7vXA/T-aPvbMFd_I/AAAAAAAAAQE/eL2laP0W6RU/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="http://3.bp.blogspot.com/-Nswa8QB-UP8/UQ0i2J9NrdI/AAAAAAAACCo/zEBearifmaY/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="http://3.bp.blogspot.com/-wjAZmwj7vXA/T-aPvbMFd_I/AAAAAAAAAQE/eL2laP0W6RU/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="http://3.bp.blogspot.com/-Nswa8QB-UP8/UQ0i2J9NrdI/AAAAAAAACCo/zEBearifmaY/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("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png")
no-repeat right 8px;
}
#menu li:hover .drop {
background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/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
Es impresionante. gracias.
ResponderEliminarpero tengo problmas al modificarlo. Se me corta cuando llega al primer post, como si se metiera por debajo ¿?