Menú horizontal con buscador expandible

30 de julio de 2014 206 comentarios ,

El menú horizontal con buscador integrado parece ser uno de los favoritos por muchos blogueros. Esta es una variante, se trata de un menú horizontal con subpestañas y que incluye un buscador que se expande al pasar el cursor sobre él cubriendo casi todo el ancho del menú. Puedes verlo funcionando en este blog de pruebas.

Este menú está hecho únicamente con CSS por lo que no tendrás que preocuparte por la compatibilidad con librerías de scripts, ni con navegadores pues funciona bien con todos los navegadores en sus últimas versiones.

El efecto expandible lo conseguimos también con CSS, y es simple, sólo establecemos que el ancho del buscador sea de 0px en su estado normal, y luego aumentamos el ancho al pasar el cursor sobre él. Juego de niños, ¿no? ;)

ATENCIÓN: Si usas una plantilla original de Blogger primero necesitas seguir los pasos de esta entrada, de lo contrario el menú podría no verse o funcionar correctamente.

Para poner este menú en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos CSS:
#menuBuscador {
position: relative;
width: 95%; /* Ancho del menú */
height: 40px;
padding-left: 14px;
background: #CC2A41; /* Color de fondo */
}
.menusearch {
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:5;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
}
.menusearch li:hover li a {
background:none;
}
.menusearch li.top {display:block; float:left;}
.menusearch li a.top_link {
display:block;
float:left;
height:40px;
line-height:40px;
color:#fff; /* Color de los títulos */
text-decoration:none;
font-size:14px; /* Tamaño de la fuente */
padding:0 0 0 12px;
cursor:pointer;
}
.menusearch li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;}
.menusearch li:hover {position:relative; z-index:2;}
.menusearch ul,
.menusearch li:hover ul ul,
.menusearch li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menusearch li:hover ul.sub {
left:0;
top:40px;
background:#351330; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menusearch li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menusearch li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#fff;
font-size:14px;
text-decoration:none;
}
.menusearch li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#351330 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat;}
.menusearch li:hover ul.sub li a:hover {
background:#CC2A41; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#CC2A41 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menusearch li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul,
.menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #351330; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search input[type="text"] {
background: #fff url(//lh4.googleusercontent.com/-1jhhmuhclMc/U8_hntfKzCI/AAAAAAAAFi8/hqlTRAByrVM/s32/buscar.png) no-repeat center left;
position: absolute;
right:3px; /* Distancia del buscador desde la derecha */
outline:none;
font-size: 13px; /* Tamaño de la fuente del buscador */
color: #ccc;
width: 0;
margin: 0;
padding: 12px 0 12px 35px;
z-index: 1000;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */

Luego en Diseño crea un gadget HTML/Javascript y ahí pega lo siguiente:
<div id='menuBuscador'>
<ul class='menusearch'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>
</ul>

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


Ya sólo deberás guardar los cambios. El primer código son los estilos, ahí verás en color verde dónde cambiar los colores, fuentes, etc., o sea, el aspecto del menú. En color rojo van las URLs y los nombres de tus pestañas y subpestañas.

Antes de <!-- Buscador --> puedes agregar más pestañas. Por ejemplo: si quisieras añadir otra pestaña simple, agrega una línea como esta:
<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:
<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:
<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Eso es todo, menos complicado de lo que parece. Sin duda es un menú que hay que considerar, no sólo por lo atractivo del buscador, sino por la posibilidad de agregar subpestañas y sin necesidad de usar ningún script. Además que podemos personalizarlo tanto como queramos.


206 comentarios en:

" Menú horizontal con buscador expandible "

  1. Está muy bien, pero tiene un pequeño fallo: el buscador también debería permanecer expandido mientras se está escribiendo, y no solo mientras se mantiene el cursor sobre él.
    Para conseguirlo, hay que cambiar la última línea del primer código por esta:
    #search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */
    Así, el buscador estará expandido al escribir.

    ResponderEliminar
    Respuestas
    1. Eso sólo pasa si al escribir quitas el cursor sobre el buscador, situación que rara vez sucede pues todos dejamos el cursor donde apuntamos para escribir, pero sigue siendo una buena observación, entre menos errores pueda haber mejor. Actualizado ;)

      Eliminar
  2. Hola! Muy bueno, me encanto el efecto que hace cuando pones el buscador...voy a hacer un par de pruebas en mi blog, consulta, para poner menos pestañas solo elimino las lineas de las url que estan en rojo verdad? ( las que no vaya a usar )

    Saludos y gracias como siempre...

    ResponderEliminar
    Respuestas
    1. Hola BaTo LoCo, las pestañas que no utilices elimínalas. Debes eliminar desde la apertura de la pestaña, es decir, desde <li> hasta el cierre </li>

      Eliminar
  3. Hola wey, como estas?

    Bueno muy bueno este buscador, em gusto muchisimo, es practico para las personas que estan diseñando un blog nuevo, y estos aportes quedarias perfectos jejeje :)
    Pero bueno amigo, mi pregunta es otra, como siempre disculpame ke me salga un poco de este tema pero sera algo rapidito, me gustaria que un anuncio de adsense no estuviera tan abajo como lo esta actualmente, sino un poco mas arriba, asi kmo te lo muestro en la imagen ESTA. Como sale en la linea roja es lo que mas o menos quiero que aparezca. He intentado moviendo códigos pero nada de nada. Porfa si me podes ayudar seria de gran ayuda.
    Mi blog: ChikoAkiba

    PS: el anuncio solo se muestra en la portada nada mas xDD :)

    Saludos y gracias como siempre, por estos aportes siempre te he considerado "El Mejor Bloguero del Mundo" :)

    ResponderEliminar
    Respuestas
    1. Gracias KaRpOl Uzumaki. Puedes aprovechar que tu anuncio está dentro de un div que tiene la clase .iosSlider { y cambiar ese margin: auto 0 0px; por margin: -20px 0 0px;
      De esa manera el contenedor se subirá.

      Eliminar
    2. No no no no y no wey!!! ASOMBROSO!!! SI me funciono wey!!! Bro sinceramente eres un Monster en todo esto, por esto siempre recurre hacia a ti, ya que eres el unico que me puede ayudar!!! Wey muchisimas gracias por todo amigo!!

      Como siempre mil gracias y mucho mas, tu ayuda siempre te la agradezco muchisimo :) aun estoy impactado xDD Gracias gracias y mas gracias!

      Saluditos y espero con ansias tu proxima entrada a ver de que tratara xDD

      Eliminar
    3. Es un gusto poder ayudarte ;)

      Eliminar
  4. Muchas gracias! Me gusta mucho! :D Voy a probarlo

    ResponderEliminar
  5. Por cierto, si no es molestia la pregunta, ¿hay alguna forma de hacer que mientras se trabaje en el arreglo del blog aparezca una imagen de "blog en construcción" o algo parecido?

    Quiero cambiar la plantilla de mi blog y hacer algunos arreglos pero me gustaría que no se viera la página mientras hago las pruebas

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Ancel. Existe este método, hace mucho que no lo pruebo, pero aun debe funcionar:
      http://ciudadblogger.com/2011/11/poner-en-el-blog-aviso-en-construccion.html

      Eliminar
  6. Hola, una consulta, es posible que mi plantilla no tenga esto "]]>" ? Aunque usé el buscador no lo encuentra :/

    ResponderEliminar
  7. Perdón, error mío XD ya lo encontré

    ResponderEliminar
  8. hola como puedo poner una pagina de seguridad preguntando si dese entrar al blog

    ResponderEliminar
    Respuestas
    1. Hola, si es para una advertencia de un blog con material para adultos es necesario usar el que provee Blogger, de lo contrario pueden eliminar el blog.

      Eliminar
  9. Hola Potro, queria comentarte un problema que tengo con mi blog desde hace ya algún tiempo, me están apareciendo mensajes anonimos que me llegan al correo (cada comentario se me notifica al correo) esos mensajes tienen spam a otras webs, pero si voy a mi blog no los veo, osea solo los puedo ver en mi correo, son molestos por que hay dias en los que me aparecen 2 o 3.
    Mi pregunta es la siguiente: ¿Se pueden eliminar la posibilidad de que comenten los usuarios anonimos pero dejando en Configuración>comentarios>cualquiera?
    ya que me gusta que la gente que no tiene cuenta pueda poner un nick, lo unico que me molesta es que puedan comentar anonimos. Se pueden bloquear?
    gracias

    ResponderEliminar
    Respuestas
    1. Hola Vhila, Blogger no tiene la opción de descartar sólo los usuarios anónimos pues la opción "cualquiera" los incluye a ellos. Si esos comentarios no los ves en tu blog es porque Blogger ha hecho buen trabajo y los ha detectado como spam y no los ha publicado, si vas dentro de Comentarios > Spam, seguro ahí los verás.
      Retomando tu pregunta, no, no se puede eliminar la opción de anónimos si eliges "cualquiera". De hecho no creo que sirva de mucho ya que la mayoría de los spammers tienen cuentas de Google así que aun quitándoles la opción de anónimo dejarían su spam desde una cuenta de Google, te lo digo porque aquí también me lo hacen.

      Eliminar
    2. Ok, muchas gracias
      167 comentarios de Spam desde enero de 2014, que gente...
      Gracias, lo seguiré dejando así ya que la verificacion por captcha no me gusta nada.
      Un saludo

      Eliminar
    3. Vaya pues sí es bastante, yo sólo tengo 169 desde el 2011

      Eliminar
  10. buenas el potro, tengo una duda, a ver cada semana me toca actualizar unas tablas de futbol y me gustaria que salieran en la pestaña que cree con ese nombre
    como hago ?
    saludos

    ResponderEliminar
    Respuestas
    1. Hola, crea una página y ahí pon la/s tabla/s que estás haciendo, de esa manera cuando el usuario abra esa página ahí se mostrará dicha tabla.

      Eliminar
  11. Genial Potro, MIra Como Me Quedo :D, Solo puse el code del buscador y se lo inclui al Menu Horizontal Que PUblicaste Anteriormente :D Salu2

    ResponderEliminar
  12. Funciona de maravilla. Muchas gracias, Potro. :)

    ResponderEliminar
  13. Hola Potro, como siempre yo sacándote canas verdes, he visto varios blogs que al deslizar la página hacia abajo (navegar pues) las páginas se quedan en la parte superior del navegador ¿Crees que sea posible que puedas hacer un tutorial con estas características? Muchisimas gracias por tus tutoriales ;D te dejo un ejemplo de las páginas en la parte superior aruba-nights-template.blogspot saludos ;D

    ResponderEliminar
    Respuestas
    1. Hola Derek, mira esta entrada, seguro podrá servirte:
      http://ciudadblogger.com/2014/03/hacer-el-gadget-de-paginas-flotante-y-se-detenga-al-bajar-el-scroll.html

      Eliminar
    2. Muchas gracias potro, lo he implementado en mi blog, sin embargo la lista de páginas no se queda en la parte superior del blog, sino que deja un espacio vacío, ¿Crees que me puedas ayudar en ese punto? malefashiontrends.com muchísimas gracias ;D

      Eliminar
    3. Prueba cambiar el 'top' : '0px' por otro valor, por ejemplo 'top' : '-30px'
      Cualquier otra duda sobre ello lo vemos en esa entrada para no desviarnos del tema central de este post.

      Eliminar
    4. Muchas gracias por tu ayuda y perdona por desviarme tanto del tema, por fin lo he logrado, sin tu ayuda mi blog no sería lo mismo, ¡Gracias!

      Eliminar
  14. Me puedes ayudar con una duda, no tiene nada que ver con este tema, pero te lo agradecería mucho.
    Descargue una platilla en mi blog Geek People y está en otro idioma y quiero ponerla en español. En la parte de seguir por e-mail se ve el idioma en el que está. En los ajustes de blogger esa en español :(

    Llegué aquí por la entrada de como poner la caja de comentarios en Facebook. Me fue de mucha utilidad, gracias por todo lo que compartes.

    ResponderEliminar
    Respuestas
    1. Hola Javier, sólo localiza ese gadget en la edición HTML de tu plantilla y cambia las partes que estén en otro idioma, todo eso se hace manualmente. Saludos.

      Eliminar
  15. Hola Potro no ha salido mi mensaje, tengo un blog donde implemente el Slider pero quiero condicionarlo para que solo se vea en la portada y no cuando acceda a otras paginas. Gracias. mi blog es www.planetabvb.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola, usa condicionales para mostrarlo u ocultarlo donde desees:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
  16. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola, ya tienes el estilo que especifica el color, sólo agrega la parte en negrita que "obligue" a que se use ese color en esa área:

      .how-dowload ul li {
      list-style-type: square;
      text-align: justify;
      color: #37b8eb !important ;
      }

      Elimino el comentario por las razones que ya conoces. Saludos.

      Eliminar
    2. ooo Potro, esa Era La Pieza Que me Faltaba :D Gracias Amigo, Eres El Mejor Salu2,

      Eliminar
  17. hola potro, oye, ¿cómo le hago para centrar el texto de los submenús?

    ResponderEliminar
    Respuestas
    1. Hola, debajo de .menusearch li:hover ul.sub li { agrega:
      text-align: center;

      Eliminar
    2. si quedó!!! muchisimas gracias
      saludos n.n/

      Eliminar
  18. Hola Potro.
    Estoy valorando sustituir mi actual menú (el horizontal deslizante que utilizabas hace tiempo) por el de esta entrada. ¿Crees que vale la pena? Este que propones en esta entrada me gusta, pero tengo varias preguntas:
    -¿puede hacerse un submenú como el que tenía el otro? era uno de los detalles que más utilidad tenía para mi.
    -he intentado poner este menú en un blog de pruebas, pero al haber cambiado el aspecto de las plantillas de blogger desde que puse el otro, voy perdido. Para empezar, no encuentro ]]> para pegar los estilos.
    Agradeceré cualquier indicación que puedas darme.
    Gracias por tu atención y saludos.

    ResponderEliminar
    Respuestas
    1. Hola jorge, no he comprendido tu primera pregunta, ya que en ambos se pueden crear submenús tal como se aprecia en el blog de prueba.
      En el "nuevo" editor de HTML debes dar click a la flechita que está junto a <b:skin>...</b:skin> ahí verás esa etiqueta.

      Saludos.

      Eliminar
    2. Hola Potro. A ver si se explicarme mejor. En este blog de pruebas (http://jorgepruebasmenu.blogspot.com.es/) he colocado el menú de esta entrada con el formato y pestañas generales que a mi me interesan.
      Lo que me gustaría saber es si en la pestaña que he llamado "menú" puedo desarrollar un submenú que se despliegue de forma parecida al que tengo actualmente (el horizontal deslizante) ya que permite colocar casi 20 enlaces en una disposición horizontal que para mí es muy práctica.
      De lo contrario tendría que colocar esos 20 enlaces en vertical ya que no se relacionan unos con otros y sería un desplegable demasiado largo.
      Espero haberme explicado mejor.
      Un abrazo y gracias por tu tiempo.

      Eliminar
    3. Hola de nuevo Jorge, no había comprendido porque cuando decías "deslizante" creí que te referías a este menú que justamente tiene un efecto deslizante en sus subpestañas.
      Honestamente no he intentado combinar ambos así que no sabría decirte los pasos para conseguirlo, pero si te interesa más tener las subpestañas de esa manera creo que será más conveniente que te quedes con el actual.
      Otro abrazo para ti y disculpa la demora en responder.

      Eliminar
  19. Hola, Potro. Tantas veces visité tu blog para crear el mío y encontré material excelente, y tips geniales, pero jamás comenté para agradecerte.
    Y ahora en vez de eso, escribo porque estoy desesperada: no se cuándo ni cómo exactamente eliminé el espacio para comentarios debajo de cada entrada (locura!) Los comentarios sí están (se ven en configuración del escritorio), pero no hay nada visible en las entradas.
    No sabía en qué sección hacer esta pregunta, mil disculpas y perdón por haber sido tan desagradecida (todo por apurada). Tu blog es práctico, súper útil y el mejor. Un abrazo y muchas gracias...

    ResponderEliminar
  20. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  21. Soy una opa total!! Entré en cada publicación y algunas tenían inhabilitados los comentarios, no tengo idea por qué... PERDÓN, Potro, ignorá (y eliminá) mis comentarios de pánico, soy muy, muy "naba"ta... Gracias por todo lo genial que regalás desde acá. Un abrazo!

    ResponderEliminar
    Respuestas
    1. Jeje, descuida, a todos los bloggeros nos llegan esos momentos de pánico al menos una vez en la vida ;)
      Me alegra que no haya sido nada de cuidado y que hayas podido resolverlo sin mayor problema.
      Un abrazo y gracias por tu comentario.

      Eliminar
  22. Hola!
    Muchas gracias por todos tus tutoriales. Son geniales :) Llevaba tiempo queriendo poner un menú desplegable en mi blog, pero nunca me había atrevido. Ahora he visto que no es tan complicado como creía y estoy haciendo pruebas para añadir este que propones.
    Mi duda es: ¿qué hago para centrar el menú?
    ¡Gracias! :) Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Inma, me da gusto saber que te estás atreviendo a experimentar y no quedarte con las ganas.
      Mas que centrar, puedes aplicar un margen izquierdo para que el menú se mueva a la derecha y dar esa apariencia de que está centrado. Para conseguirlo agrega estos estilos en tu plantilla:

      ul.menusearch {
      margin-left: 60px;
      }

      Ese valor lo puedes cambiar hasta que quede a la distancia deseada.
      Saludos.

      Eliminar
  23. Me encantó! Pero me interesaría muchísimo combinar el buscador para mis cinco blogs, porque están linkeados entre sí. Es posible? Gracias!!

    ResponderEliminar
    Respuestas
    1. Hasta donde sé no es posible Ana, los buscadores de este tipo sólo pueden buscar en una dirección.

      Eliminar
    2. Qué pena...! bueno, si encuentro alguno que pueda unificarlos, tal vez quite el del menú y lo ponga aparte, qué opinas?

      Eliminar
    3. Puedes intentarlo, pero no podrá ser expandible como el de este menú.

      Eliminar
  24. Me surge otro problema, que hoy no había notado: si pongo ese script en una entrada del blog funciona perfectamente (lo hice para probar y personalizarlas) pero cuando lo pongo en un gadget html las subpestañas no aparecen. Qué hago?

    ResponderEliminar
    Respuestas
    1. Hola Ana, si lo estás poniendo en una plantilla original de Blogger recuerda que primero hay que seguir unos pasos (están en el recuadro de la advertencia), sin esos pasos las subpestañas no se mostrarán, y el diseño del buscador podría no resultar bien.

      Eliminar
    2. Gracias, Potro,por estar siempre al pie del cañón!! Luego de pensarlo durante horas y horas, creo que no le voy a poner las subpestañas, por el trabajo que implica seguir actualizándolas, con cada nueva entrada que publique... Me supera!

      Eliminar
  25. Hola Potro!! Le pido el favor me ayude con lo siguiente: tengo un blog en blogger y me he dado cuenta que ellos han añadido la opción de tener páginas en el mismo. Mi pregunta es: las entradas que ya tengo publicadas en mi blog, cómo puedo hacer para pasarlas a las páginas nuevas que pueda crear en el blog?? Gracias espero su respuesta!!

    ResponderEliminar
    Respuestas
    1. Hola Rafael. Las páginas tienen una función distinta a las páginas. Las páginas son para que agregues información que no es parte de las actualizaciones de tu blog, por ejemplo para poner un formulario de contacto, para poner información sobre el blog/autor, poner un sitemap, etc.
      Tal vez sea un poco confuso porque parecen tener el mismo formato pero su función es completamente distinta al de las entradas.

      Eliminar
  26. Hola potro mira no se si me puedes resolver esta duda y no se si se pueda....
    y antes de pasar a el punto te doy las gracias como siempre ayudando a nosotros los que empezamos con los blogs mil gracias..

    mi duda es la siguiente si se puede dividir cada una de las paginas, es decir que donde dice PESTAÑA 1 PESTAÑA 2 en medio haya una division para que no se vean tan revueltas y que al pasar el cursor cada una de estas cambie a algun color alternativo que le pongamos. desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Emanuel, con estos estilos podrían tener un color de fondo distinto al pasar el cursor:

      .menusearch li a:hover {
      background:#64908A;
      }

      Puedes ponerles un separador si lo deseas, sólo añade debajo de .menusearch li a.top_link { esto:

      border-right: 1px solid #fff;

      Eliminar
  27. Hola Potro.
    Al final me he atrevido a cambiar mi antiguo menú horizontal deslizante por el de esta entrada. Creo que ha quedado bien (efcondearanda.blogspot...), pero tengo dos cuestiones:
    -¿puedo bajar o acercar la barra del menú a la zona de las entradas?
    -cuando generas una búsqueda, el cartel que aparece en la zona de las entradas indicando los resultados de la búsqueda impide desplegar todos los submenús. Tienes que volver a inicio para acceder a los submenús que se "tocan" con ese aviso. ¿Podría resolverse?
    Gracias como siempre por anticipado por tu tiempo.
    Saludos
    Jorge

    ResponderEliminar
    Respuestas
    1. Hola Jorge, con estos estilos puedes subir el contenedor de abajo para acercarlo al buscador:

      .main-outer {
      margin-top: -40px;
      }

      Para resolver lo otro, agrega esto:

      .status-msg-body {
      z-index: 0 !important;
      }

      Eliminar
    2. Hola Potro! Como siempre, genial. Las 2 cuestiones resueltas. Mil gracias una vez más por tu tiempo.
      Saludos
      Jorge

      Eliminar
  28. Buenas tardes Potro, hoy te vengo con una duda un tanto curiosa, he aplicado este menú a un blog y funciona perfectamente, pero el problema es que sólo utiliza el desplegable si lo tengo col·locado en la parte inferior del blog, en cuanto lo situo sobre las entradas, lo detecta como si fueran páginas y no se despliega ¿alguna idea de por que sucede esto?

    Mil gracias, gran aporte.-

    PD: este es el blog : http://jornadasdemangayanimedeblanes.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola, recuerda que si usas una plantilla original de Blogger primero debes seguir los pasos que se mencionan en el enlace donde está el aviso (donde dice ATENCIÓN).

      Eliminar
  29. Potro, otra pregunta, ciudadblogger.com tiene su cabecera con el menú "a todo lo ancho de toda la pantalla", lo mismo sucede con su pié de página que va "a todo lo ancho de toda la pantalla", esto es por una plantilla o se puede hacer através de códigos html.

    ResponderEliminar
    Respuestas
    1. En el caso de la cabecera es un engaño visual, en realidad esa barra gris que ves no es el fondo del menú sino del blog, al ser el fondo del blog da la apariencia de que el menú se expande a todo lo ancho de la ventana del navegador. Así es como comúnmente se logran este tipo de menús ;)

      Eliminar
  30. hola, tengo una pregunta, si me podrias ayudar, quiero que al pasar el cursor sobre un menu no me muestre 10 subpestañas verticalmente por ejemplo, si no que me muestre 5 y las otras 5 al costado, como en otra columna.. no se si me supe explicar bien

    ResponderEliminar
    Respuestas
    1. Prueba con este menú:
      http://ciudadblogger.com/2012/07/menu-horizontal-con-submenus-en-dos-columnas.html

      Eliminar
    2. comparto la solucion para que se puedan tener dos columnas con este menu, es aumentar el tamaño 200px a 400px en las siguientes lineas

      .menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;width:400px;}

      y en

      .menusearch li:hover ul.sub {
      border-radius:3px;
      left:0;
      top:40px;
      background:#351330; /* Color de fondo del submenú */
      padding:3px;
      white-space:nowrap;
      width:400px; /* aca antes era 200px */
      height:auto;
      z-index:3;
      }

      Eliminar
  31. hola potro, oye, y como le hago para que las opciones del menú estén más juntas? es decir que no haya tanto espacio entre pestaña 1, pestaña 2 y así, no sé si me explico

    ResponderEliminar
    Respuestas
    1. En el código de los estilos hay tres padding que debes modificar:

      padding:0 0 0 12px;

      padding:0 24px 0 12px;

      padding:0 24px 0 12px;

      Reduce esos valores para que haya menos separación en los textos de las pestañas.

      Eliminar
    2. me funcionó ^_^
      muchas gracias por tu ayuda
      saludos n.n/

      Eliminar
  32. Hola Potro, me sirvió para una pagina en HTML que estoy haciendo desde cero, la pregunta es: ¿Se puede poner un borde o separación a cada Pestaña 1, Pestaña 2, etc? http://2.bp.blogspot.com/--rmeevOjqAY/Ukxg55brdMI/AAAAAAAAL8Y/7mY3npqyYlI/s1600/menu-deslizante-hover.gif

    ResponderEliminar
  33. Hola!! Gracias por tus artículos. Me he animado a cambiar el aspecto de mi blog un poco leyéndolos, he fusionado un par de cosillas de aquí. Ahora esta intentando poner el buscador pero no consigo que me salga ne la misma barra que el menú, me sale justo debajo de este. te dejo la dirección para que le eches un ojo http://40kpm.blogspot.com.es/

    Gracias por adelantado

    ResponderEliminar
    Respuestas
    1. Lo más práctico es que uses este menú y cambies el diseño para que se parezca al tuyo. Si insistes en usar el que actualmente tienes entonces la estructura deberá ser igual a la de este, por ejemplo, poner todo (menú y buscador) dentro de un DIV y aplicar los estilos necesarios para que el buscador se mantenga dentro de ese DIV.

      Eliminar
  34. Buen dia, Quisiera saber como hago que todas las opciones del menu que estan de forma horizontal tambien salgan de forma vertical? en mi blog, agradeceria su respuesta.

    ResponderEliminar
    Respuestas
    1. Hola ingry, este menú sólo está disponible en la versión horizontal, no he intentado hacerlo vertical.

      Eliminar
  35. Potro, una consulta... hice todo tal cual esta y solo le cambie los nombres a las pestañas y le adheri el URL donde me lo pedia pero no se me expande el menu de la etiqueta "Conocimientos del Mundo" ("Pestaña 3") en la cual le puse para que cuando esta se expanda se vea "Ciencias Naturales" y "Ciencias Sociales" (En lugar de "Pestaña 3.1" y "Pestaña 3.2"

    Mi blog es este http://2dguadalupe.blogspot.com.ar/

    Desde ya muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Noemi, entré y parece que ya lo has resuelto. Saludos.

      Eliminar
  36. Hola potro

    Mi pregunta no tiene mucho que ver con esta entrada pero nose donde ponerla.

    Me gustaria saber si es posible, que las imagenes aparecieran una detras de otra en horizontal. Tal que asi http://kodiak-theme.pixelunion.net/

    muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola Hedonism Atlantic, ¿te refieres a crear una plantilla de ese estilo? si es así mira desde el comentario #21.1 de esta entrada:
      http://ciudadblogger.com/2014/04/reproductor-de-multiples-canciones-playlist-en-html5.html?showComment=1398475487187#c1585440590142425922

      Eliminar
  37. Hola!! me ha encantado el tutorial y ya he puesto el menú en el blog, pero te quería preguntar cómo podía hacer para que se quedase fijo y que al ir bajando la página el menú junto con el buscador fuesen bajando también con la página, no sé si me explico.

    un saludo y gracias

    ResponderEliminar
    Respuestas
    1. Hola lola, esta entrada puede servirte para lo que deseas:
      http://ciudadblogger.com/2014/03/hacer-el-gadget-de-paginas-flotante-y-se-detenga-al-bajar-el-scroll.html

      Sólo deberás cambiar el ID del gadget de páginas por el ID de este menú.

      Eliminar
    2. ¡Muchísimas gracias El Potro! Me ha quedado justo cómo quería!! Ahora solo me queda una duda más ¿sabrías cómo podría añadir el logo de mi blog a la parte izquierda de este menú, es decir a la izquierda de la primera pestaña?

      Un saludo y de nuevo muchísimas gracias por tu ayuda :D

      Eliminar
    3. Sustituye el nombre de la primer pestaña por el código de la imagen que desees. Saludos lola.

      Eliminar
  38. Si a eso me refiero

    He intentado hacer los pasos que viene en el enlace, pero mis conocimientos de html son nulos, y no puedo ni encontratrar el sidebar, ni aumentar el ancho del body.

    -Eliminar la sidebar, o al menos ocultarla de la portada, o bien, pasarla del lado izquierdo.
    -Establecer un ancho (grande) para el body, por ejemplo: body {2000px; overflow:auto;}

    Si pudiera concretrar un poco mas se lo agradeceria

    Gracias por su atencion

    ResponderEliminar
    Respuestas
    1. Si de momento no estás muy familiarizado con el HTML y CSS será un poco complicado, quizá quieras buscar alguna plantilla similar, no sé si haya alguna para Blogger, será cuestión de buscar.
      Si aun quieres intentar adaptar la tuya considera que los pasos ahí descritos son para plantillas originales de Blogger.
      Saludos.

      Eliminar
  39. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  40. Hola Potro! Antes que nada, gracias por todos los aportes.
    Consulta: Agregué el menú, pero me queda muy mal. No encaja. El buscador queda debajo. ¿Podrías ayudarme? Este es el blog: http://www.pensamientosliterarios.com/
    Gracias!!!!

    ResponderEliminar
    Respuestas
    1. Hola F. D.P., arriba, muy cerca del gadget donde has puesto el menú, hay otro class='tabs' que debes eliminar.

      Eliminar
    2. ¡¡¡Gracias Potro!!! Funcionó bárbaro. ¡Saludos!

      Eliminar
  41. Hola, tengo un blog al que me gustaría poner pestañas deslizantes, pero en el lenguaje HTML no me aparecen las siglas que hay que eliminar, sólo aparecen class='tabs'.
    Tampoco aparecen las siglas ]]> .

    Soy profesora, en estos momentos organizo los post a través de las etiquetas, pero con las pestañas se quedaría de lujo.
    te estaría muy agradecida si pudieras ayudarme. Te facilito el nombre de mi blog por si puedes echarle un vistazo : CAJÓN DE PRIMARIA. en él aparecen mis datos
    Gracias por interesarte por los neófitos como yo

    ResponderEliminar
    Respuestas
    1. Hola, si en la primer búsqueda no encuentras la etiqueta ]]></b:skin> entonces da click en la flechita que está junto a:
      &lt;b:skin&gt;...&lt;/b:skin&gt;

      Ahí lo encontrarás. Saludos.

      Eliminar
  42. Hola Potro!! Ante todo muchas gracias por tu ayuda para animarnos a los nuevos bloggeros a personalizar nuestro espacio.
    Te cuento que armé un menú en base a este que explicaste, y me encanta! Lo que quisiera saber es cómo hacer que los nombres de las subpestañas se vean más pequeños (o iguales) al nombre de la pestaña, porque me han quedado en otra tipografía y más grandes. Podés verlo en: www.elviajesinfronteras.com
    Desde ya muchas gracias!!!

    ResponderEliminar
    Respuestas
    1. Hola, el que tú tienes es otro menú distinto a este. Te lo menciono porque son estilos distintos al de esta entrada. Para el menú que tienes, debajo de:
      .menu ul, .menu li:hover ul ul, .menu li:hover ul li:hover ul ul, .menu li:hover ul li:hover ul li:hover ul ul, .menu li:hover ul li:hover ul li:hover ul li:hover ul ul {

      Deberás poner:
      font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
      font-size:13px;
      font-weight:bold;

      Saludos.

      Eliminar
  43. ¡Hola Potro! Consulta: ¿Cómo hago para que el texto del menú quede en el medio de la altura de la barra. Te dejo la dirección de mi sitio así puedes ver a qué me refiero. Muchas gracias :)
    http://www.pensamientosliterarios.com/

    ResponderEliminar
    Respuestas
    1. Hola, debajo de .menusearch li.top { agrega esto:

      padding: 0px;
      margin-top: -4px;

      ¡Saludos!

      Eliminar
  44. Muchísimas gracias, lo he conseguido.

    ResponderEliminar
  45. Potro, no puedo darte unas gracias tan simples cuando me has ayudado tanto, pero este es el cuarto mensaje que intento mandarte y no sé por qué no se publican, algo habré hecho mal.
    Quería decirte que el post que me ha dado la clave ha sido uno que has publicado sobre el nuevo lenguaje HTML de Blogger, pues, efectivamente, todo estaba oculto tras las flechitas.
    No se pueden ver todavía los resultados en el blog porque lo estoy haciendo primero en un blog de pruebas.
    Te reitero mi agradecimiento. Sólo añado que en el día de ayer yo parecía una loca saltando por toda la casa, así estaba de emocionada.

    ResponderEliminar
    Respuestas
    1. Hola 6areina, de hecho sí está publicado (y respondido) tu comentario desde el día 10 de octubre, en el comentario #45.1 lo verás, ignoro porqué no has podido verlo.
      El código junto a la flechita al que me refiero es:
      <b:skin>...</b:skin>

      ¡Saludos!

      Eliminar
  46. Hola, una consulta, podrías decirme como agregar los textos a las pestañas y subpestañas. No se si debo crear primero las entradas o páginas y de allí direccionar las pestañas a la URL de las entradas o páginas. Por tu ayuda muy agradecido.

    ResponderEliminar
    Respuestas
    1. Hola André, en donde dice "Pestaña X" va el nombre de la pestaña, y en donde dice "URL del enlace" va el link de la página que quieras enlazar.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Gracias por tu respuesta. Otra pregunta. Para vincular información a la pestaña es mejor usar entradas o páginas. Me podrías indicar cual es la diferencia entre una y otra.

      Eliminar
    4. Las páginas no se muestran en la portada, sólo a través de un enlace y se usan como para "Contacto", "Mapa del sitio", etc. Quizá te sirva esta entrada para que sepas cómo enlazar grupos de entradas:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
    5. Excelente muchas gracias. Tu soporte es de gran ayuda. Una última cosa, estoy tratando de cambiar el color de la pestaña cuando pasa el cursor, pero no lo logro, leí el comentario No. 30 y tus respuestas pero no ubico la escritura HTML que indicas, que es la siguiente:

      .menusearch li a:hover {
      background:#64908A;
      }

      Solo logre poner la barra el final de cada menú, si me puedes orientar te lo agradesco.

      Éxitos

      Eliminar
    6. Busca donde dice /* Color de fondo al pasar el cursor */ (aparece dos veces) ahí es donde debes cambiar el código del color por el que prefieras.

      Eliminar
    7. Hola El Potro. Te comento que he logrado cambiar el color al pasar el cursor, mas sin embargo solo se puede hacer cuando se pasar por los submenus. ¿Cómo hago para que cambie el color al pasar por los menus principales. Pasa por mi blog que todavía esta en construcción y veras lo que te comento. encuentroempresarial.blogspot.com GRACIAS

      Eliminar
    8. A este te ha faltado el signo de número # antes del código del color:
      background:64908A;

      Eliminar
  47. Como hago para las opciones del menu se superpongan a a la plantilla de mi blog(las entradas tapan las opciones de cada menu).

    ResponderEliminar
    Respuestas
    1. Es necesario que sigas los pasos del enlace que está en el aviso.

      Eliminar
  48. Hola potro, disculpa ¿Cómo puedo cambiar el tamaño del menú, para que ocupe todo el ancho de la pantalla, sea cual sea el tamaño de la pantalla?

    ResponderEliminar
    Respuestas
    1. Hola Anny, el menú ocupa el 95% del ancho del contenedor donde esté, la única manera de que ocupe todo el ancho del blog es que esté fuera de cualquier contenedor, es decir, ponerlo directamente en la plantilla justo después de la etiqueta BODY pero eso hará que esté siempre arriba de la cabecera.

      Eliminar
  49. He creado y me sale perfectamente lo de los menús desplegables, pero ahora no se como escribir dentro de ellos, o como poder acceder a ellos para poner lo que quiero dentro. no se si me he explicado bien. muchas gracias. y muyyy buen trabajo.

    ResponderEliminar
    Respuestas
    1. Hola, mira esta entrada, ahí verás cómo enlazar tus etiquetas a tu menú:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  50. Hola,
    He puesto el código y me funciona a la perfección. Sólo una cosa. Quiero que cuando pase por encima de los nombres del menú, el texto cambie de color o se oscurezca. Como me sucede aquí: http://leyendoentresuenos.blogspot.com.es/
    Al poner el menú desplegable se me quita eso y me gustaría que estuviera igual.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Ya lo solucioné, combiné este código con el otro del menú desplegable que tenéis y voilá!

      Gracias por estos magnificos tutoriales.

      Eliminar
  51. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  52. Hola Potro, llevo usando este menú mucho tiempo desde que lo publicaste, pero recientemente quiero agilizar el tiempo de carga y he notado que me hace algo raro el menú cuando carga a cuenta de la fuente que le he puesto... ¿Hay algún modo de solucionarlo?
    Otra cosa, el tabview ya verás que tarda mucho en cargarme, a qué se debe?
    A ver si tuvieras tiempo de mirarlo, gracias
    http://tsukistyle.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Selene, las fuentes personalizadas siempre son algo lentas en cargar, por desgracia esa velocidad no depende de nosotros sino de Google que es quien las aloja.
      Lo del tabview es de lo más normal, ese tipo de gadgets suelen demorar más que los otros porque tiene que cargar tres o más gadgets a la vez.
      Saludos.

      Eliminar
  53. Potro, MUY BUENO !!!
    Agradecido por tus aportaciones y aclaraciones a los que por aquí pasamos.
    Yo, principiante y jugando con html, css y lo que haga falta, me pasé por aquí interesado por un menú para mi sitio que estoy realizando, como práctica voy aplicando según voy aprendiendo.
    Me copié a mano linea a linea el css para este menú y viendo las reacciones en el navegador con cada linea introducida, aprendiendo poco a poco (por mi cuenta y riesgo).
    Como soy un profano iniciándome en este mundo he visto que quizás exista código redundante en este css, por ejemplo la regla ".menusearch li a.top_link span" ¿no afecta a los mismos elementos que las regla ".menusearch li a.top_link span.down"?. He eliminado esta última, y no he visto nada que cambiase, quizás haya también algún estilo aplicado en otras reglas redundante, pero testearlas me cuesta y probablemente no lo hiciese bién.
    Bueno, un saludo de CARLOS desde A Coruña.
    PD. Un nuevo admirador. GRACIAS.

    ResponderEliminar
    Respuestas
    1. Hola Carlos, pasa que cuando uno hace sus pruebas de repente se nos van estilos de más (o de menos) y luego ya nunca corregimos :$
      Gracias por la observación :)
      Un abrazo!

      Eliminar
  54. Haaaaa !!!!!
    Otra cosa. ¿?
    El buscador me ha impresionado, muy bueno, pero ¿como se usa?. Lo he probado y al ponerle algo que buscar intenta abrir una pagina que no encuentra.

    ResponderEliminar
    Respuestas
    1. No debería suceder eso salvo que hayas modificado el HTML del buscador. Revisa nuevamente tu código (del buscador) y mira que se encuentre tal como en esta entrada.

      Eliminar
  55. Hola , he intentado poner este menu pero al poner mas de 2 pestañas me salen fuera de la franja , no se por que , por favor ayudame.. Este es mi blog http://librosgratiscomo.blogspot.com/

    ResponderEliminar
  56. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  57. ¡Hola!

    Potro, molestándote... ¿hay alguna forma de poner el buscador expandible sin las pestañas del menú? Intenté quitar todo lo que dice "pestañas", pero parece que lo estoy haciendo mal porque no me queda.

    ¡Gracias de antemano!

    Saludos. :-)

    ResponderEliminar
    Respuestas
    1. Hola Karina, sólo usa esta parte de los estilos:
      #search input[type="text"] {
      background: #fff url(//lh4.googleusercontent.com/-1jhhmuhclMc/U8_hntfKzCI/AAAAAAAAFi8/hqlTRAByrVM/s32/buscar.png) no-repeat center left;
      position: absolute;
      right:3px; /* Distancia del buscador desde la derecha */
      outline:none;
      font-size: 13px; /* Tamaño de la fuente del buscador */
      color: #ccc;
      width: 0;
      margin: 0;
      padding: 12px 0 12px 35px;
      z-index: 1000;
      border: 1px solid #fff;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      }
      #search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */

      Y esta parte de la estructura:
      <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>

      Eliminar
  58. ¡Muchas gracias! Ya me funcionó, qué amable, Potro. =)

    ResponderEliminar
  59. hola , he realizado el primer paso pero algo debo de estar haciendo mal porque cuando guardo cambios todo se lo que pego ,"todos los datos"se ven en el blog tambien y no cambia nada. porfavor si me puedes decir que es lo que hago mal . gracias!! un saludo

    ResponderEliminar
    Respuestas
    1. No estás poniendo los códigos en el lugar correcto. En el caso del primer código hay dos etiquetas que son muy parecidas pero no son las mismas. Si la pegas en la errónea sucederá lo que comentas.

      Eliminar
  60. Hola Potro, me gustaría añadir únicamente el menú de pestañas SIN el buscador (puesto que mi plantilla ya contiene uno y al combinar ambos se ve duplicado)

    ¿cómo le puedo hacer?

    ResponderEliminar
    Respuestas
    1. Elimina el código del buscador, lo verás desde <form hasta </form

      Eliminar
  61. Hola! Realmente me sirvio mucho tu menu, pero tengo un problema. Me gustaria cambiar la font del menu y no puedo hacerlo :( Me podrias ayudar??

    ResponderEliminar
    Respuestas
    1. Hola, en donde dice font-family puedes hacerlo.

      Eliminar
    2. Muchas gracias ya pude hacerlo ;)

      Eliminar
  62. Hola, me gustó mucho el menú e intenté ponerlo en mi blog pero aparece en la columna derecha donde no es muy práctico aunque he movido el gadget en diseño para que aparezca arriba de las entradas del blog sigue apareciendo allí. ¿Cómo puedo solucionarlo? Gracias :)

    ResponderEliminar
    Respuestas
    1. Hola DianiCS, después de mover el gadget asegúrate de guardar los cambios para que ese cambio se posición surja efecto.

      Eliminar
  63. Buenas. Tengo una pregunta. ¿Cómo hago para que las entradas aparezcan en diferentes secciones del menu? Es decir, no se si me doy a explicar muy bien. En el menú tengo varias pestañas y cada una tiene un submenú. Quiero que al dar clic en una categoría de ese submenú se muestren entradas de tema X, al dar clic en otra, de tema Y, en otra de tema Z, y así. ¿Cómo enlazo eso?

    ResponderEliminar
    Respuestas
    1. Hola, te dejo una entrada que explica lo que deseas:
      http://ciudadblogger.com/2010/06/menu-de-categorias.html

      Eliminar
  64. Muy buen material pero como cambio la fuente?? la que tiene no me gusta :|

    ResponderEliminar
  65. Hola Potro. Gusto en saludarte. ¿Cómo puedo lograr que al pasar el cursor sobre la pestaña principal cambie de color? Leí el comentario 30 y logre hacerlo solo para las subpestañas pero no así para la pestaña. Mira mi blog encontrarse-ce.blogspot.com; mi otra duda como puedo cambiar el color de la barra de las pestañas y el color del fondo del buscador. Por tus respuestas muy agradecido.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola André. En el comentario #50 y subsecuentes te he respondido a ello ;)
      Saludos.

      Eliminar
    2. Que tal El Potro. Te comento que ya seguí las instrucciones del comentario #50 y subsecuentes, pero no logre realizar el cambio. Te mando la programación para que me hagas el favor de indicarme donde esta el erro o lo que falta para poder cambiar el color a las pestañas principales. Gracias.

      .menusearch li:hover ul.sub li a:hover {
      background:#538cd6; /* Color de fondo al pasar el cursor */
      color:#fff;
      }
      .menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly {
      /* Color de fondo al pasar el cursor */
      background:#538cd6

      Otra pregunta aprovechando. También como cambio el color del buscador cuando se expande. Actualmente es blanco pero el color de fondo de mi página es blanco por lo cual no se mira el buscador.

      Muchas gracias por tu apoyo. Éxitos.

      Eliminar
    3. En ninguna de esas, es aquí donde se cambia:

      #menuBuscador {
      position: relative;
      width: 95%; /* Ancho del menú */
      height: 40px;
      padding-left: 14px;
      background: #CC2A41; /* Color de fondo */
      }

      Lo otro, puedes añadir un background aquí:

      #search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */

      Eliminar
    4. Hola Potro. Ya encontré la parte que me indicas #menuBuscador. Pero sigo sin lograr que cuando pase el cursor sobre las pestañas principales cambie el color. ¿Cómo hago la programación?

      Eliminar
    5. .menusearch li:hover {
      background: #FFAAAA;
      }

      Eliminar
    6. MUCHAS GRACIAS El Potro. Me funciono muy bien. Eres lo máximo.

      Eliminar
  66. Hola, felicidades por tus consejos, pero tengo un problema:
    he añadido el código de la plantilla y el diseño, y no he añadido en los submenús ningún enlace, de momento lo he dejado tal cual; pero en tú demo, cuando pasas el cursor sobre algunas pestañas sale un submenú pero en mi menú no sale nada.
    ¿podríais ayudarme?
    mi blog es: http://elblogdemarchoso.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Benito, recuerda lo que dice en el Aviso, quienes usan plantillas originales de Blogger primero deben seguir ciertos pasos.

      Eliminar
  67. Muchas gracias. Me ha salido perfecto el Menu con subpestañas.
    Solo una cosita...sabes como quitar las lineas discontinuas que salen en las subpestañas?
    Cual es la linea de html que hay que eliminar?
    Muchisimas gracias

    ResponderEliminar
    Respuestas
    1. Hola Lidia, el menú por defecto no incluye las líneas que mencionas, quizá sea tu plantilla. Para solucionarlo agrega debajo de #crosscol ul li esto:
      border-top: none;

      Saludos.

      Eliminar
  68. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  69. Muchas gracias ante todo por el maravillo menu que me ha salido perfectamente pero tengo algunas dudas:¿Como hago para que el menu no este pegado a mi portada ? quiero que haya un espacio, ¿Como hago para que se cambie de color la pestaña que estoy usando y cuando baje a las subpestañas se quede asi de ese color? y ¿y como hago para que la barra del menu quede más pecado a la izquierda?

    ResponderEliminar
    Respuestas
    1. Hola, juega con los márgenes del menú para que midas la distancia que quieres desde arriba y desde la izquierda.
      Lo otro que quieres, mira el comentario #69.5

      Eliminar
  70. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  71. Por favor... que alguien me diga como instalar este menú... esta hermoso!! :) saludos... pd: me encanta esta pagina!!

    ResponderEliminar
    Respuestas
    1. Siento no poder ayudarte Joaquín pero en temas de otros blogs no puedo meterme. Saludos.

      Eliminar
  72. Hola nuevamente potro jeje tengo un problema descargue una plantillla y la edite en muchas cosas pero cuando trato de cambiarle el color a la barra menu no puedo sea con el codigo del color o url. me desaparece el color y queda el color de fondo y eso no es lo que quiero podrias ayudarme a dar con el problema? pienso q aca es donde se cambia el color de la barra de menu
    .menu-secondary-container{position:relative;height:36px;z-index:300;padding-left:12px;background:url(http://1.bp.blogspot.com/-aYyg4um7Jnc/TqLa0MxGmEI/AAAAAAAAAXg/dF06PwrR8yA/s000/menu-secondary-bg.png) left top repeat-x;-moz-border-radius:15px;-khtml-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;border:1px solid #2092C0}


    mi blog es carteraextra.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola, no he podido ver el blog porque dice que no se ha encontrado, pero según veo por los estilos que pones el fondo es una imagen de manera que debes editar la imagen con los colores que desees.

      Eliminar
    2. oh disculpa es tucarteraextra. y pues si como te comente eso trate de hacer tanto con un url d un color ocmo el codigo y nada. lo maximo fue con el url q logre el cambio pero extrañamente al refrescar por segunda vez el menu se volvio transparente, solo se veian las letras y el cambio de color cuando pasas el cursor encima de las letras.... noc q hacer :(

      Eliminar
    3. Por cierto si vez el blog puedes observar que tengo problemas con mi cabecera ya que no se ve completa. justo al lado de la cabecera habia un buscar pero lo quise quitar para q se viera completo pero no hey podido hacer que la cabecera se vea completo

      Eliminar
  73. Necesitaría ver que apliques los cambios a tu menú. Ahora mismo veo la imagen original, no veo que hayas puesto la imagen personalizada que deseas.
    Lo de la cabecera es porque está dividida. Pon en 100% el width que está dentro de #header { y aumenta el width (por ejemplo a 950px) que está dentro de #header-wrapper {

    ResponderEliminar
    Respuestas
    1. Listo la cabecera! eres mi idolo! jeje.
      y ya cambie el color por ahora permanece ahí pero me paso en dos ocasiones que desapareció y quedo el color del fondo del blog.

      Eliminar
    2. Me alegro que ya esté resuelto :)

      Eliminar
  74. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  75. Hola!

    Me gustaria saber como hacer para que el menu quede en el mismo margen que mi portada y que no haya ese pequeño espacio

    ResponderEliminar
  76. Que tal Potro. Bendiciones en esta semana santa. Una consulta, como puedo hacer para que cuando se abran las subpestañas del menú se desplieguen tanto para la derecha como para la izquierda dependiendo del tamaña de la pantalla de la computadora. Por tu respuesta muchas gracias.

    ResponderEliminar
    Respuestas
    1. Lo desconozco André, no sé si para ello se tenga que utilizar un script o algo más de CSS, a decir verdad nunca lo he hecho ni intentado.
      Bendiciones para ti también.

      Eliminar
  77. POTRO MI BUSCADOR ESTA MUY CHAFA XQ A LA HORA DE QUE EL CLIENTE ESCRIBE Y PONE BUSCAR NO SE LE DESPLIEGAN OPCIONES ENTONCES PUEDE PERDER MUCHO EL TIEMPO HAY MANERA EN LA QUE PUEDA SALIR OPCIONES Y DESPUES PIQUE BUSCAR?

    ResponderEliminar
    Respuestas
    1. No paulina, hasta donde sé en Blogger no hay manera de usar un buscador avanzado con filtros y opciones.

      Eliminar
  78. http://www.alexandervega.net/2015/04/menu-horizontal-con-buscador-expandible.html

    Te lo han robado, Potro. Tal cual.

    ResponderEliminar
    Respuestas
    1. Gracias Andrea, ya cuando tenga un poco más de tiempo solicitaré la eliminación de esa entrada ;)
      Gracias por el aviso.

      Eliminar
  79. Buenas tardes Potro!
    Consulta: puede ser que alguna vez hayas hecho una entrada explicando cómo quitar de los links la fecha de los post? Quiero quitar de lo siguiente la sección fecha: http://www.pensamientosliterarios.com/2015/05/anatole-france-frases-leyes.html
    Es beneficioso para un mejor posicionamiento en los búscadores?
    Desde ya, muchas gracias!!!


    ResponderEliminar
    Respuestas
    1. Hola F.D.P., de cuáles links quieres quitar la fecha?

      Eliminar
  80. hola potro, no se si esta area sea la conveniente para hacer mi pedido, pero la verdad no se a q mas recurrir, use uno de tus menus hace tiempo el de ete link.

    http://www.ciudadblogger.com/2012/07/menu-horizontal-con-submenus-en-dos-columnas.html

    y quiero adaptarlo a la versión movil, pero no aparece. es posible que pueda facilitarme algun codigo para que este menú pueda aparecer normal en la versión movil de mi Blog. la verdad te estaría muy agradecido y gracias por tus tutoriales aprendí mucho. salu2

    ResponderEliminar
  81. hola potro con el nuevo formato de HTML de blogger en que sección agrego el codigo del menù??

    ResponderEliminar
  82. ¿Como podría hacer para que las pestañas que contenga subpestañas estén indicadas con un "flechita abajo"? Gracias.

    ResponderEliminar
  83. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  84. Hola Potro. Hoy en el 2015 aún tus tutoriales son de mucha ayuda...

    Pero tengo una pregunta:

    Como pongo este menú para que se adapte a todo el ancho de la pestaña o de la pantalla de cualquier pc

    He tratado de ponerle el 100% del ancho pero solo me aplica para el 100% de la parte escrita del Blog (Donde está el "main" y la colmna que tengo en mi blog) y esa parte del blog mide solo 1000px.

    Como logro ponerlo en todo el ancho de la página. Porfavor ayúdame. Gracias por el menú. De verdad lo necesitaba.

    ResponderEliminar
  85. Hola el potro
    Después de tanto buscar un menú elegante y dinámico como el que nos regalas, creo que este sera el que usare en mi primer y único blog hasta ahora y que día a día sigo mejorando.

    ¿En este menú puedo cambiar el icono de la lupa por uno personal, cual seria el tamaño ideal, y como lo hago?

    ¿Cuando instale este, como hago para des-instalar el anterior que vino predeterminado en la plantilla? (mi plantilla se llama Central y creo no es de blogger original)

    ¿Tienes algún gadget llamativo y novedoso para archivos del blog y así reemplazar el que viene de blogger?

    Aprovecho tu valioso tiempo y conocimiento para una consulta diferente:

    En mi blog de bloger (ganaconwally) quise colocar una imagen en la cabecera en reemplazo del titulo y el blog, esta imagen contiene el titulo del blog y su descripción, la cree en photoshop con el ancho de la cabecera total del blog que es 960px x 174px, pero al ir a editar cabecera reemplazar imagen en vez del titulo, esta imagen se redimensionaba a la caja de la cabecera del titulo que es 567px x 60px, Me toco anular la cabecera del titulo y colocar un gadget con la imagen que diseñe para así poder ocupar todo el ancho y el alto de la cabecera con la imagen, pero ahora no me sale la imagen para la versión móvil del blog jejejeje, hechale un vistazo al blog y cuéntame que puedo hacer.

    Gracias, bendiciones y sigue avanzando.

    ResponderEliminar
  86. Hola el potro, el resultado en mi blog no es el mejor, antes del search expandible se ve un search estático cuadrado. Lastima no poder enviarte imagen por aqui. Lo instale y los desinstale al ver el resultado que te comente.

    ResponderEliminar
  87. ¡Hola! Me ha gustado mucho este menú horizontal con buscador, más que los otros dos anteriores, pero tengo un problema...
    He seguido tus indicaciones y la lupa del buscador me aparece justo debajo de la barra del menú http://puu.sh/kIXch/7d9ef635a9.png haciendo que el buscador aparezca debajo y no donde debería... ¿Cómo puedo solucionarlo?

    Gracias de antemano

    ResponderEliminar
  88. Muuuchas gracias :) Explicas muy bienn <3

    ResponderEliminar
  89. Hola, llevo ya 2 días intentando aplicar el menú a mi plantilla y, la verdad, ni siquiera se despliegan los submenús ¿hay que utilizarla con alguna plantilla en especial? Estoy usando la "Fantastico S.A" Aunque anteriomenre probé con las dinámicas y con ninguna sutió efecto. Gracias

    ResponderEliminar
  90. Hola Potro! Cómo estás? Cómo puedo aumentar el ancho de la pestaña donde está el buscador, la lupita? Me gustaría ampliarlo hasta que se lea Buscar... Gracias!!!

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger