Home Menu desplegable Menú desplegable para blogger

Menú desplegable para blogger

Es hora de compartir con ustedes un nuevo y espectacular menú desplegable para blogger con un estilo único. No necesitaras introducirlo en tu editor HTML de tu plantilla, solo lo vas ha instalar en un solo widget, Que te parece esta idea única ¡ Blogger es realmente magnifico es el único sitio web que puede darte este maravilloso y único menú desplegable para blogger con un estilo totalmente diferente a los demás. En este nuevo menú desplegable para blogger no vamos a utilizar ningún javascript, solo un simple código CSS que hace que este menú sea único en su categoría. Ayuda de blogger te lo presenta así de fácil, solo tienes que seguir las instrucciones de configuración y lo podrás obtener y publicarlo en tu blog de blogger completamente gratis. El buscador de Google le encanta dar a conocer paginas web desde sus paginas web como Blogger, utilizar la tecnología de blogger es muy fácil. Blogger es la mejor plataforma web creada para la realización de páginas web gratis en todo el mundo. Anteriormente publique algunos menús desplegables de los cuales les dejo los enlaces aquí:

Menú desplegable para blogger con imágenes
Menú desplegable para blogger con un solo widget

Menú desplegable para blogger

Bueno a continuación mire su demostración en mi blog de demos


Te gusto verdad!

Vamos a instalarlo en nuestro blog de blogger

1 Ir a blogger

2 Da un clic en “Diseño”

Menú desplegable para blogger

3 Busca un gadget “Añadir un gadget” y ábrelo

Menú desplegable para blogger

4 Se te desprenderá una nueva ventana en la cual tendrás que buscar el widget que dice “HTML/Javascript” ábrelo e inserta las siguientes líneas de código en su interior

Menú desplegable para blogger

<div id="menu">
<li><a href="http://ayudadeblogger.com/" class="drop">Inicio</a><!-- Empezar Inicio Item -->
<div class="dropdown_2columns"><!-- Begin  columns container by ayudadeblogger.com-->
<div class="col_2">
<h2>Bienvenidos a Ayudadeblogger.com!</h2>
</div>
<div class="col_2">
<p>Hola y bienvenidos! Esta es una muestra de las posibilidades de este impresionante menú desplegable para Blogger.</p>            
<p>Este artículo viene con una amplia gama de estilos de tipografía preparados, como encabezados, listas, etc</p>            
</div>
<div class="col_2">
<h2>SOPORTE</h2>
</div>
<div class="col_1">
<img src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png" width="125" height="48" alt="" />
</div>
<div class="col_1">
<p>Este menú ha sido probado en todos los principales navegadores.</p>
</div>
</div><!-- End 2 columnas container ayudadeblogger.com-->
</li><!-- End Home Item -->
<li><a href="#TU LINK AQUI" class="drop">Blogger</a><!-- Empezar 4 columns Item star ayudadeblogger.com-->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End primeras 4 columnas container by ayudadeblogger.com-->
</li><!-- End 4 columns Item -->
<li><a href="#TU LINK AQUI" class="drop">Diseño Web</a><!-- Empezar 4 columnas Item soport ayudadeblogger.com-->
<div class="dropdown_4columns"><!-- Empezar 4 columnas container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI ">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container soport ayudadeblogger.com-->
</li><!-- End 4 columnas Item soport grupodelecluse.com-->
<li><a href="#TU LINK AQUI" class="drop">SEO Online</a><!-- Empezar 4 columnas Item -->
<div class="dropdown_4columns"><!-- Empezar 4 columns container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container -->
</li><!-- End 4 columnas Item soport ayudadeblogger.com-->
<li><a href="#TU LINK AQUI" class="drop">Widgets para Blogger</a><!-- Empezar 4 columnas Item -->
<div class="dropdown_4columns"><!-- Empezar 4 columnas container -->
<div class="col_4">
<h2>Aqui el titulo del Menu Ayudadeblogger.com</h2>
</div>
<div class="col_1">
<h3>Diseño</h3>
<ul>
<li><a href="#TU LINK AQUI">Temas</a></li>
<li><a href="#TU LINK AQUI">Slideshow</a></li>
<li><a href="#TU LINK AQUI">Herramientas</a></li>
<li><a href="#TU LINK AQUI">Widgets</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>SEO y Marketing</h3>
<ul>
<li><a href="#TU LINK AQUI">Estructura SEO</a></li>
<li><a href="#TU LINK AQUI">Diseño web</a></li>
<li><a href="#TU LINK AQUI">Conectividad</a></li>
<li><a href="#TU LINK AQUI">Posicionamiento</a></li>
<li><a href="#TU LINK AQUI">Navegación</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Plantillas</h3>
<ul>
<li><a href="#TU LINK AQUI">Sistema</a></li>
<li><a href="#TU LINK AQUI">Platon</a></li>
<li><a href="#TU LINK AQUI">Pietro</a></li>
<li><a href="#TU LINK AQUI">Buenas Noticias</a></li>
<li><a href="#TU LINK AQUI">Noticias</a></li>
</ul>  
</div>
<div class="col_1">
<h3>Redes Sociales</h3>
<ul>
<li><a href="#TU LINK AQUI">Twitter</a></li>
<li><a href="#TU LINK AQUI">Facebook</a></li>
<li><a href="#TU LINK AQUI">Google +</a></li>
<li><a href="#TU LINK AQUI">Pinterest</a></li>
<li><a href="#TU LINK AQUI">StumbleUpon</a></li>
</ul>  
</div>
</div><!-- End 4 columnas container -->
</li><!-- End 4 columnas Item sopor by ayudadeblogger.com-->

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

/* Navigation Bar star ayudadeblogger.com */

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

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders star by www.grupodelecluse.com*/

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

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

Realiza estos cambios:

Recuerda solo debes editar los pasos que te voy a indicar a continuación y no borres ni trates de cambiar nada ya que por un punto o coma o un código borrado no se mostrara el menú.

He marcado con cuatro diferentes colores en los cuales deberán remplazarlos tal como lo voy a explicar a continuación

El primer link que deberás borrar es http://ayudadeblogger.com/ y pon la dirección de tu blog en vez de mi dirección.

Cambia todas las palabras que están marcadas de color purpura Bienvenidos a Ayudadeblogger.com!, por una frase de bienvenida o lo que tu quieras

En las partes que están marcadas de color azul #TU LINK AQUI, deberás borrarlo y poner el link de la pagina que quieras mostrar.

Además, deberás borrar las palabras que están marcadas de color verde Aqui el titulo del Menu Ayudadeblogger.com y poner el titulo que tú quieras.

Por ultimo todas las palabras que están marcadas de color rojo Blogger, bórralas y pon el texto que tu quieras.

Eso es todo, luego das un clic en “Guardar” y ubica tu widget debajo de la cabecera principal.

Felicidades ahora tienes un menú impresionante en blogger.

Espero haber sido lo mas explicativo posible.

¿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

TAGS:


Share:

Related post

Comentarios

28 comentarios: