Como hacer un menú horizontal con submenús y buscador integrado para blogger


En este tutorial para blogger voy a explicar, como realizar un menú horizontal que contiene varios submenús y un buscador integrado en la barra del Menú para uso exclusivo en blogger. Si estabas buscando un tutorial sumamente explicativo para usarlo en tu blog de blogger has llegado al sitio adecuado. Si no tienes un menú en tu blog de blogger hoy te voy a proporcionar un menú realmente estupendo, para que lo utilices en tu blog de blogger.

Como hacer un menú horizontal con submenús y buscador integrado para blogger

A continuación mire su demostración en mi blog de demos.


Bueno ahora vamos a trabajar

En primer lugar si usted esta utilizando un plantilla del diseñador de plantillas de blogger, necesitara seguir los siguientes pasos y si no usa la plantilla del diseñador de plantillas de blogger omita este pasó.

Para configurar el menú en una plantilla del diseñador de plantillas de blogger realice lo siguiente:

1 Abrir “Plantilla” y dele un clic en “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación


En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.


2 Busca este código

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
  
Borre el código que esta marcado de color azul class='tabs' .

4 También deberas buscar este otro código

/* Tabs
----------------------------------------------- */


Y vas a ver que tienes un código extenso tal como se muestra en este ejemplo

/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom);
  padding: 0;
}

.tabs-inner .section {
  margin: 0;
}

.tabs-inner .widget ul {
  padding: 0;

  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
  border: none;
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);

  color: $(tabs.text.color);
  font: $(tabs.font);

  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

  background: $(tab.background);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;

  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);

  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

/* Headings
----------------------------------------------- */



Recuerda borrar todo el código que esta en esta sección hasta el termino de  /* Headings
----------------------------------------------- */

Y remplázalo por el siguiente código

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

Bueno luego de que hayan hecho todo le damos un clic en Guardar plantilla, ahora nos dirigimos a incrustar el código para que funcione el menú en nuestro blog de blogger, recuerda que los pasos anteriores eran para las personas que utilizan las plantillas del diseñador de plantillas de blogger, y si usted no utiliza una de estas plantillas omita los pasos anteriores y diríjase a realizar las siguientes instrucciones para colocar el código en su blog de blogger. Para las personas que utilizan plantillas del diseñador de plantillas de blogger deberán también seguir los siguientes pasos para que funcione el menú.

A continuación realice los siguientes pasos.

1 Abrir “Plantilla” y dele un clic en “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación


En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.


2 Busca este código ]]></b:skin> y encima de el inserta el siguiente código.

/* by www.ayudadeblogger.com by www.grupodelecluse.com
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:# A62222; /* Color de fondo */
border-radius:20px; /* Bordes redondeados */
}
.menu {
width: 100%;
float: left;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url(http://lh4.googleusercontent.com/-iqgCHipLGx4/T5DqLrsVALI/AAAAAAAACaI/bcIY7SV8s5I/s35/separador.gif) bottom right no-repeat;
color:#cccccc; /* Color de la fuente */
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Color de las pestañas al pasar el cursor */
color:#FFFFFF; /* Color del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #fff; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Color de las subpestañas al pasar el cursor */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}


3 Ahora dale un clic en “Guardar plantilla

4 Dirígete a “Diseño” y dale un clic en “Añadir un gadget” y busca el widget que dice “HTML/javascript” e inserta el siguiente código en su interior.

<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL del enlace">Inicio</a></li>
<li><a href="#">Contacto</a>
<ul>
<li><a href="URL del enlace">Mi blog</a></li>
<li><a href="URL del enlace">Facebook</a></li>
<li><a href="URL del enlace">Twitter</a></li>
<li><a href="URL del enlace">Google +</a></li>
</ul>
</li>
<li><a href="#">Informacion</a>
<ul>
<li><a href="URL del enlace">Mi blog</a></li>
<li><a href="URL del enlace">Informacion</a></li>
<li><a href="URL del enlace">Temas</a></li>
<li><a href="URL del enlace">Encuestas</a></li>
</ul>
</li>

<li><a href="#">Mi blog</a>
<ul>
<li><a href="URL del enlace">mi blog</a></li>
<li><a href="URL del enlace">Informacion</a></li>
<li><a href="URL del enlace">Temas</a></li>
<li><a href="URL del enlace">Encuestas</a></li>
</ul>
</li>

</ul>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

</div></div>


5 Luego de insertar el código podrás realizar los siguientes cambios al gusto tuyo

Donde dice URL del enlace inserta el link de tu página, y cambia el nombre por el que tu quieras Mi blog y así haces con los demás.

Ahora dale un clic en “Guardar” y visita tu blog, espero haya sido de mucha ayuda este tutorial para blogger.

¿Necitas ayuda?

Cualquier pregunta no dudes en hacérmelo saber y de inmediato te responderé

Saludos

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

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.

Related post

Comentarios

34 comentarios:

  1. Me funciona estupendamente excepto por un par de detalles.

    Al acceder a un enlace por label en mi blog, el texto "Mostrando entradas con la etiqueta "XXX". Mostrar todas las entradas" se queda sobre el menu, haciendo que todas las opciones del menu a partir de esta sean inaccesibles.

    También veo que el menu queda ligeramente desplazado a la izquierda con respecto a la cabecera del blog, cuando a mi me gustaria que quedase integrado en la misma.

    La verdad es que lo que yo estaba buscando era un menu desplegable pero, en lugar de con filas, con columnas, es decir... algo como esto.

    uno - DOS - tres - cuatro
    dos.uno - dos.dos - dos.tres - dos.cuatro
    dos. cinco - dos.seis - dos.siete - dos.ocho

    Dentro de las limitaciones que tiene el Ascii, creo que se entiende no?

    ResponderEliminar
  2. Hola acabo de ver tu blog y te quedo bien pero tu has realizado una serie de cambios, y siquieres realizar el truco como el codigo ASCII es facil aqui te dejo un enlace en el cual se encuentra un menu desplegable y explico como realizar el truco del aumento de columnas, http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
    Saludos...

    ResponderEliminar
  3. gracias por el post!!!! pero tengo un problema... no me funciona para vista en moviles... por favor ayudame con eso gracias

    ResponderEliminar
  4. Hola Varsana, da un clic en Plantilla y luego da un clic en personalizar plantilla para moviles, se te desplegara una nueva ventana en la cual debes der un clic en predeterminada, y luego se te desprenera un menu en el cual debes dar un clic en "Personalizado", eso es todo y guardar, con eso tendras habilitado el menu en tu movil, saludos.

    ResponderEliminar
  5. Hola Luis, a mi no me funciona, es que no puedo seguir los pasos que dices ya que no tengo el /* Tabs
    ----------------------------------------------- *tabs como lo tienes tu, así lo tengo /* Tabs
    ----------------------------------------------- */
    .tabs-inner .section:first-child {
    border-top: $(header.bottom.border.size) solid $(tabs.border.color);
    }

    .tabs-inner .section:first-child ul {
    margin-top: -$(header.border.size);
    border-top: $(header.border.size) solid $(tabs.border.color);
    border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
    border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
    }

    .tabs-inner .widget ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: $(tabs.border.width) solid $(tabs.border.color);

    margin-top: $(tabs.margin.top);
    margin-left: -$(tabs.margin.side);
    margin-right: -$(tabs.margin.side);
    }

    .tabs-inner .widget li a {
    display: inline-block;

    padding: .6em 1em;

    font: $(tabs.font);
    color: $(tabs.text.color);

    border-$startSide: $(tabs.border.width) solid $(content.background.color);
    border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
    }

    .tabs-inner .widget li:first-child a {
    border-$startSide: none;
    }

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    color: $(tabs.selected.text.color);
    background-color: $(tabs.selected.background.color);
    text-decoration: none;
    al no tenerlo como como esta el tuyo no se hasta donde tengo que borrar. Si podias decirme como proceder

    }

    ResponderEliminar
  6. Hola, debes buscar solo este punto /* Tabs
    ----------------------------------------------- */
    Si aun no sabes como, enviame un mensaje directo y agrame al chat de gmail para poder guiarte paso a paso.
    Saludos.

    ResponderEliminar
  7. Borra todo el codigo que tines, tal y cual me lo enviastes:

    /* Tabs
    ----------------------------------------------- */
    .tabs-inner .section:first-child {
    border-top: $(header.bottom.border.size) solid $(tabs.border.color);
    }

    .tabs-inner .section:first-child ul {
    margin-top: -$(header.border.size);
    border-top: $(header.border.size) solid $(tabs.border.color);
    border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
    border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
    }

    .tabs-inner .widget ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: $(tabs.border.width) solid $(tabs.border.color);

    margin-top: $(tabs.margin.top);
    margin-left: -$(tabs.margin.side);
    margin-right: -$(tabs.margin.side);
    }

    .tabs-inner .widget li a {
    display: inline-block;

    padding: .6em 1em;

    font: $(tabs.font);
    color: $(tabs.text.color);

    border-$startSide: $(tabs.border.width) solid $(content.background.color);
    border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
    }

    .tabs-inner .widget li:first-child a {
    border-$startSide: none;
    }

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    color: $(tabs.selected.text.color);
    background-color: $(tabs.selected.background.color);
    text-decoration: none;
    al no tenerlo como como esta el tuyo no se hasta donde tengo que borrar. Si podias decirme como proceder

    }

    Y remplazalo por el codigo que yo tengo puesto en est post osea este:

    #crosscol ul {z-index: 200; padding:0 !important;}
    #crosscol li:hover {position:relative;}
    #crosscol ul li {padding:0 !important;}
    .tabs-outer {z-index:1;}

    Y luego sigue las demas instrucciones.
    Saludos.

    ResponderEliminar
  8. Tengo un problema. en el móvil sí que se visualiza bien la barra pero en el Ipad sale la barra blanca sin las letras del menu, como si hubiera desaparecido, ¿a qué puede ser debido? Muchísimas gracias, y enhorabuena por tu blog que es de tanta ayuda a muchos. mi blog es www.profedeele.es

    ResponderEliminar
  9. Saludos, excelente artículo me ayudo con mi blog gracias...

    ResponderEliminar
  10. Seguí los pasos y va fenomenal, pero con el Chrome. Cuando abro el Explorer no hay manera. Se desconfiguran los botones. ¿Podría solucionarlo?
    Mi blog es http://almoradi1829.blogspot.com.es/
    Y mi correo: latorrecoves@gmail.com
    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola si tienes ese inconveniente, te recomiendo que borres todo lo refente a este post, y realices el siguiente tutorial sobre un nuevo menu desplegable para blogger el cual no te causara ningun inconveniente en ningun navegador, a continuacion te dejo el enlace: http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html

      Saludos.

      Eliminar
  11. Hola !
    No consigo que el menu salga de forma horizontal, siempre me sale en vertical. Lo puedes ver en http://biziariklik.blogspot.com.es/. Ahora lo he insertado en la parte de abajo del blog, pero aunque lo inserte en la cabecera ocurre lo mismo.
    Muchas gracias
    Un saludo
    Mikel

    ResponderEliminar
    Respuestas
    1. HOLA HE VISTO TU BLOG, ES POR QUE NO LO ESTAS INSERTANDO CORRECTAMENTE, MIRA BORRA LO QUE HICISTES ANTRIORMENTE, Y REALIZA ESTE SIGUIENTE TUTORIAL: http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html

      SALUDOS.

      Eliminar
  12. Hola Luis !

    Muchas gracias. He añadido el nuevo tutorial y varias pestañas más. Pero al cambiar la href por la Url de la etiqueta, al desplegar el menú y clicar por ejemplo en Artiodáctilos no me abre nada. Muy interesante tu blog.
    Un saludo

    Mikel http://biziariklik.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog y el munu, el problema es que no estas insertando bien el nombre de la etiqueta, por ejemplo tu tienes en tu etiqueta asi, Artiodáctilo, y en el menu tu lo has puesto asi: http://biziariklik.blogspot.com.es/search/label/artiodáctilo, que quiere decir esto que has puesto la primera letra en minuscual, lo has puesto asi artiodáctilo, esta etiqueta no te mostrara por que esta en minuscula, recuerda para que se muestre las etiquetas en tu menu, debes copiar tal y como esta en tu etiquetas, si empieza con minusculas, ponlas en minusculas y si empieza con mayusculas ponlas en mayusculas.
      Pa que aparesca bien debrias ponerlo asi: http://biziariklik.blogspot.com.es/search/label/Artiod%C3%A1ctilo
      Saludos.

      Eliminar
    2. Hola !

      Ahora va perfecto !!!!!!!!!!!!!!!!

      Mil gracias. Así da gusto

      Un saludo

      Eliminar
  13. Estimado Luis, solo puedo ir a las dos primeras opciones de los submenus, cuando intento ir a la tercera desaparece el menu desplegable. A qué se debe? espero tu pronta ayuda. Muchas gracias

    ResponderEliminar
  14. Hola:
    No me ha salido el /* Tabs
    ----------------------------------------------- *
    así es que he seguido con el resto del tutorial y he hecho todo hasta el final. No sé seguir...

    ResponderEliminar
    Respuestas
    1. Hola si no lo encuentras pon el codigo arriba de ]]>, eso es todo y pruebalo.
      Saludos.

      Eliminar
  15. luis primero que nada gracias por ayudar tanto a nosotros los novatos XD el codigo me funciono exepto por 2 cositas 1.- los menues se multiplicaron tengo muchos y 2.- se salen de la pagina es decir es mucho mas grande que la pagina podrias ayudarme mi blogg es http://naturalvidaem.blogspot.com/ por ahora no e cambiado ni los nombres ni los colores gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola, si tienes ese problema, borrar todo el codigo que pusistes en tu menu y sigue este nuevo tutorial en el siguiente enlace, mas facil:
      http://www.ayudadeblogger.com/2012/10/como-agregar-un-menu-para-mi-blog-de-blogger-con-un-solo-widget.html
      Saludos.

      Eliminar
  16. Hola hermano, tienes que ayudarme men. Yo sigo todos tus pasos pero en sí me salen puro letras y todo eso encima de mi blog... Por favor explícame todo con detalles por favor, además no encuentro con el buscador los códigos que dices que busque, pero asi recortando lo que voy a buscar si lo encuentro, en fin el segundo código que das para buscar no lo encuentro justo como tu lo das, lo encuentro casi igual.. Por favor ayúdame, mi blog es este http://or92.blogspot.com/ .. necesito ese menu desplegable y el buscador integrado, además que tambien necesitaria editarlo a mi estilo , luego.. Respondeme porfa :D saludos ..

    ResponderEliminar
    Respuestas
    1. Hola, si no lo puedes hacer, pueden enviarme un mensaje directo a mi correo electronico: ayudadeblogger@gmail.com Y describe tu insidencia, con lo cual te ayudare directamente.
      Saludos.

      Eliminar
  17. ok, gracias, lo intentaré denuevo y entonces veré si me sale y sino te hablo al correo :D

    ResponderEliminar
  18. Por qué no me encuentra el código , tengo un diseño de ''viajes'' de las plantillas de blogger, y no hay manera de que aparezca. ¿Cuál puede ser el problema?
    Gracias,
    un saludo.

    ResponderEliminar
    Respuestas
    1. Hola enviame la direccion URL de tu blog para verlo.. y decirte donde puedes unicarlo..
      Saludos.

      Eliminar
  19. Hola Luis, hice tus pasos y no me salio como quería, me puedes orientar?

    ResponderEliminar
    Respuestas
    1. He visto tu blog, algunos blogs como el tuyo, no tienen habilitados varias funciones, lo que te recomendaria es que insertes todo el codigo del menu dentro del Editor HTML, busca el headline que es la cabecera principal y ubicalo despues de la cabecera el nombre del titulo y veras que te funciona perfectamente.
      Saludos.

      Eliminar
  20. Un oscar para El Potro, no sabia adsolutamente nada de blog y gracias a esta pagina logre lo que siempre quise hacer, gracias potro desde Peru

    ResponderEliminar
  21. ¡Hola! Me encantó tus consejos :3 me preguntaba si se podría pegar completamente arriba del blog, que no quede ligeramente desplazado hacia abajo como esto: comunidad-amoeiglu.blogspot.com ¿Me podrías ayudar?

    ¡Gracias!

    ResponderEliminar
  22. Por favor ayudenme :c Necesito poner la barra hacia el centro, y que no se separe de arriba del todo del blog, que quede pegado.

    ¡Gracias!

    ResponderEliminar
  23. Hola Luis. En primer lugar gracias por dedicar tu tiempo a ayudar a gente que no conoces. He colocado el menú y funciona perfectamente, la cuestión es ¿Se pueden añadir subpestañas a las subpestañas? Es decir escalonar más el menú. Si es así, por favor, me podrías decir cómo. Muchas gracias.

    ResponderEliminar
  24. Mira lo único que saque del tutorial que pusiste fue esta parte:

    /* by www.ayudadeblogger.com by www.grupodelecluse.com
    ----------------------------------------------- */
    #menuWrapper {
    width:100%; /* Ancho del menú */
    height:35px;
    padding-left:14px;
    background:# A62222; /* Color de fondo */
    border-radius:20px; /* Bordes redondeados */
    }
    .menu {
    width: 100%;
    float: left;
    font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
    font-size:13px; /* Tamaño de la fuente */
    font-weight:bold;
    }
    .menu ul {
    float:left;
    height:0px;
    list-style:none;
    margin:0;
    padding:0;
    border-radius: 0px 0px 20px 20px; /* Bordes redondeados del submenú */
    }
    .menu li{
    float:left;
    padding:0px;
    }
    .menu li a{
    background:#333333 url(http://lh4.googleusercontent.com/-iqgCHipLGx4/T5DqLrsVALI/AAAAAAAACaI/bcIY7SV8s5I/s35/separador.gif) bottom right no-repeat;
    color:#cccccc; /* Color de la fuente */
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px; /* Espacio entre cada pestaña */
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover, .menu ul li:hover a {
    background: #2580a2; /* Color de las pestañas al pasar el cursor */
    color:#FFFFFF; /* Color del texto al pasar el cursor */
    text-decoration:none;
    }
    .menu li ul {
    background:#333333; /* Color de fondo del submenú */
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    position:absolute;
    width:200px; /* Ancho del submenú */
    z-index:100;
    border-top:1px solid #fff; /* Borde superior del submenú */
    }
    .menu li:hover ul{
    display:block;
    }
    .menu li li {
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:200px;
    }
    .menu li:hover li a {
    background:none;
    border-radius: 0px 0px 20px 20px; /* Borde de las subpestañas */
    }
    .menu li ul a {
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2; /* Color de las subpestañas al pasar el cursor */
    color:#ffffff;
    text-decoration:none;
    }

    Pero lamentablemente el menú no me queda desplegable... Me das una ayuda?
    Aquí mi blog: https://cerotraducciones.blogspot.com.ar
    PD: lo deje como lo tenía antes con otro código que si me lo deja desplegable...

    ResponderEliminar
    Respuestas
    1. Hola David, para hacer las cosas mas sencillas actualizare este tutorial y así no tenga complicaciones a la hora de realizarlo

      Saludos.

      Eliminar