Este menú es verdaderamente cómodo y su instalación no es muy complicada.
Se trata de una barra de navegación con un buscador incluido que permanece fija en la parte inferior del blog.
>DEMO
Diseño>edición HTML>expandimos artilugios
Busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS que darán estilo al menú:
/*-- Comienzo menu flotante --*/
#menuflotante {
float:left;
width: 1256px;
padding: 3px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5om29SJHzCO-zCXfsTFVGzaj5V8QrSk0kD3Ui9ni8Gv21Ie71BC8y5j6gdlHJNjXk6865CjKAv9kf8Fata_W4oO2R_QRrpfCNEcUdTWOQNN2uMQ_fhs_7Wq6KvpIQjDqU8swDpFm8Q-U/s1600-r/0.jpg) repeat-x scroll left top;
position:fixed;bottom:0px;
height:23px;
}
#menuflotante li {
float:left;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-x2AAdtoDp4XcXFLIiE7DwFXWYYgTsv59YEf4UK5_0XzjZ43j0JEPbGOr9hiuZT5JIRqG6QFB5NkQsi7Oo5GXTL4-AQjgJRXpf08CgiGrvQUC-KRxYG-_wBISAviE4gKzkZQAumOe9DA/s1600-r/3.jpg) no-repeat right 8px;
padding:2px 20px 0;
}
#menuflotante ul {
margin:0;
padding:0;
line-height:normal;
list-style:none;
}
#menuflotante a:hover {
padding-top: 2px;
color: #009999;
}
#menuflotante a {
display:block;
float:left;
text-decoration:none;
font:12px Arial;
color:#FFFFFF;
}
#menuflotante .current_page_item {
margin:0;
color:#FFFFFF;
}
#search-box {
height: 17px;
width: 214px;
background:transparent;
color: #009999;
border: 2px groove #cccccc;
}
#search-btn{
background: transparent;
border: 1px groove #cccccc;
color: #ffffff;
}
#search-btn:hover{
background: #009999;
}
#search-btn:active{
background: #006b6b;
}
/*-- Fin menu flotante --*/
Ahora localiza la etiqueta <body> y justo encima pega estas líneas:
<!-- Comienzo menu flotante -->
<div id='menuflotante'>
<ul><li class='current'><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
</ul>
<div class='buscadormenu'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' title='Escribe aquí tu consulta' type='text'/>
<input id='search-btn' type='submit' value='Buscar'/></form></div>
</div>
<!-- Fin menu flotante -->
Reemplaza en cada caso:
URL DE TU PAGINA por la dirección de tu web o blog y TITULO por el título de tu web o blog.
En caso de querer mostrar el menú flotante en la parte superior del blog y no en la inferior, cambia el atributo bottom por top en la línea position:fixed;bottom:0px; del primer bloque de código.
Haz vista previa para comprobar que todo va bien y guarda cambios para terminar.
*Si necesitas ayuda o quieres editar cualquier cosa del menú puedes consúltame a través de un comentario.
¿Problemas al comentar? Utiliza 
Hola Jaime!
Excelente explicación. Sobretodo veo que es super sencillo la instalación y lo elegante que se ve. Vemos si lo ponemos a prueba.
Saludos.
Hola Deybi!
Me alegra que te haya gustado. Así es, simplemente debemos aplicar unos cuantos bloques de CSS y los enlaces. Además resulta cómodo disponer de un buscador y unos enlaces en todo momento (por muy larga que sea la entrada).
¡Saludos!
Que bien!! Es un menu muy chulo, a lo mejor lo personalizo y cambio esas 2 imagenes de fondo y lo pongo verde :D . Ya lo he puesto en mi blog de pruebas (latrucoteca-pruebas.blogspot.com), he cambiado algunas cosillas del CSS y ha quedado fenomenal! Muchas gracias Jaime!
Por cierto, otras 3 cositas: Me dejarías ponerlo en mi blog este truco (por supuesto pongo la fuente) ???. También te quería consultar como has habilitado los emoticonos, lo he visto en Vagabundia y no me parece muy sencillo :S . Y otra; ya te he puesto en los enlaces de Blogs de ayuda de la Trucoteca, no se si podría salir en tus Sitios Amigos si no es molestia... :P
Bueno, por aquí vendré más días, tu blog es realmente genial. Muchos Saludos Jaime!!!
La Trucoteca de Blogs, en el blog de pruebas lo sigo viendo negro. Si necesitas ayuda para cambiar el fondo dímelo.
1) Con nombrar la procedencia, ¡todo tuyo!
2) En cuanto a los emoticones... Yo lo hice especialmente con el truco que ofrece JMiur en Vagabundia. Creo que lo explica todo muy bien (simplemente debes alojar y agregar un script e incluir un poco de CSS) y paso a paso... :S.
3) Te incluiré un poco más adelante. Muchos bloggeros me ofrecen un intercambio de links y al cabo de un tiempo abandonan o cierran sus blogs.
¡¡Saludos a tí también!! ;)
Ahhh hola Jaime y gracias por tu pronta respuesta y premitirme poner la entrada :D
Bueno, sigue saliendo azul, aun no he cambiado nada, jeje.!!!
Y Veré a ver si cuando tenga una tarde librecita pongo los emoticonos.
Y tranquilo, espero no cerrar el blog :D, de todas formas viene de un traslado, ya lleva unos cuantos mesecitos, y ser enlazado por tí sería un placer!!
Por aquí vendré todos los días que pueda (no slo a ver tus trucos :) )
Un fuerte abrazo (y a ver si te pasas por el Chat de Dejotas Radio, por ejemplo, y charlamos un rato :D ) !!!!
Javier, intentaré pasarme por el chat en cuanto disponga de un poquito de tiempo, estaría genial ;).
Seguro que tu blog "vivirá" mucho más tiempo, pero, como dije previamente, esperaré un tiempo y después te enlazo :D.
Hola Jaime me llamo Bea, este truco no me sale, no se que hago mal, pero la barra no de sale donde quiero, me sale encima de la cabecera del blog y en vertical :S una cosa muy rara... no se porque. ¿Podrias ayudarme? porfavor, este es mi blog:
www.grupoelcamino.blogspot.com
El Camino, no veo el menú en tu blog, es difícil saber lo que sucede si no está instalado :S
Hola Jaime:
Primer lugar felicitarte y agradecer estas ayuda..
Este menú se ve bastante bien.
Una consulta.
Yo tengo un reproductor en mi blog que transmite una radio.
Como puedo agregar ese reproductor a este menú flotante? para que asi la transmision no se corte cuando la gente pasé de una seccion a otra?
Muchas gracias Boomper. Verás, hasta ahora no conozco ninguna forma de hacer que un reproductor (o vídeo) no se pause al navegar por el blog :S Supongo que se podría agregar al menú pero se pausaría al cambiar de sección.
Si descubro la forma de hacerlo no dudaré en publicar una entrada al respecto.
Hola Me Gustaria Su Ayuda Tengo Problemas Con El Meno akI les Dejo Mi Msn BaniActivo@hotmail.com
Claro que te ayudaré, Divanny. ¿De que se trata?
Hola Jaime:
Feliz año 2010 :)
Sobre la pregunta del menu flotante con reproductor para el Blog.
Te doy un ejemplo para que veas que es de lo que hablo.
http://www.portalfoxmix.net
Es una radio online creada en un Blogger.com
Ellos tienen el reproductor en el menu flotante que hablo.
Como se puede hacer? no importa si queda arriba o abajo.
(Es mejor abajo) :)
Gracias y ojala respondas
Hola, muy buenas!!
Me gusta un monton tu blog,el otro dia lo encontré antes de ir a dormir...y que decirte,que me quedé hasta las tantas!
Yo tengo un problema,a ver si tiene solucion,y es que al pasar el menu flotante sobre un flash que tengo,pasa por debajo.
Tambien ocurre con la publicidad ,si está en flash(creo) y sobre un script,lo mismo.
Imagino que esos también tienen la "orden" de estar sobre todo..
Ahora estoy aprendiendo en el tema de diseño,html y demás.
Gracias de verdad por compartir todo esto!!!!
Ups!! sorry, mi bloghttp://configurarpokertracker.blogspot.com/
Admin, ¿Cual es el código del reproductor que deseas instalar en el blog?
Prueba a pegar su código justo al final de esta línea:
<input id='search-btn' type='submit' value='Buscar'/></form>
Majonyjony, me temo que aún no he podido descubrir la forma de evitar lo que dices.
Normalmente suele suceder con flash aunque puede ocurrir también con reproductores de vídeo.
En cuanto encuentre una solución la publicaré ;).
Y para la parte superior como pongo el menu .En mi blog ya lo teng puesto http://www.rompedor83.blogspot.com/ es un blog de descargas que espero que funcione algun dia :):D
Rompedor83, en el primer bloque de código CSS del menú encontrarás esta línea:
position:fixed;bottom:0px;
Sustituye el atributo bottom con top y el menú aparecerá en la parte superior del blog.
¡Suerte con tu bitácora!
Gracias Jaime por la respuesta luego lo sustituyo
y comento
Muy bien, Rompedor83.
¿Este truco se puede aplicar si tienes la barra de navegación blogger? Porque creo que eso hace que no aparesca en mi blog...
Necesito la dirección de tu blog para comprobar de que se trata, EdwardCuley. La barra de navegación de blogger no interfiere ante el correcto funcionamiento de este menú pero puede que otro elemento si.
Buenas Jaime como estas?
Tengo una duda si quiero que ese menu tenga un boton para cerrarlo para que la gente que no lo quiera ver lo cierre como le hago? Gracias de antemano
Anónimo, utilizando este truco, pega el segundo código de este menú en donde iría el contenido oculto y escribe una frase o palabra en el enlace que abrirá / cerrará el menú.
Si tienes problemas para instalarlo dímelo.
Hola jaime...te felicito por tu blog...una pregunta...como coloco el menu debajo de la cabezera del blog...muchas gracias...
KoolYeah!, este modelo no puede colocarse bajo la cabecera ya que es un menú flotante y no estático pero si accedes a la categoría menús, encontrarás muchos que se instalan como deseas.
Hola buen día hombre, oye sin duda es uno de los mejores menús que e visto y he probado, el buscador es realmente funcional y exacto. Pero tengo un duda... quisiera saber como lo podría centrar?