Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Menú flotante horizontal con buscador incluido

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.

Deybi dice...

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.

Jaime Trujillo Escobedo dice...

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!

La Trucoteca de Blogs dice...

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

Jaime Trujillo Escobedo dice...

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!! ;)

Javier Medina dice...

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

Jaime Trujillo Escobedo dice...

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.

El Camino dice...

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

Jaime Trujillo Escobedo dice...

El Camino, no veo el menú en tu blog, es difícil saber lo que sucede si no está instalado :S

Admin dice...

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?

Jaime Trujillo Escobedo dice...

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.

Maliante dice...

Hola Me Gustaria Su Ayuda Tengo Problemas Con El Meno akI les Dejo Mi Msn BaniActivo@hotmail.com

Jaime Trujillo Escobedo dice...

Claro que te ayudaré, Divanny. ¿De que se trata?

Admin dice...

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

Majonyjony dice...

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

Majonyjony dice...

Ups!! sorry, mi bloghttp://configurarpokertracker.blogspot.com/

Jaime Trujillo Escobedo dice...

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>

Jaime Trujillo Escobedo dice...

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é ;).

Rompedor83 dice...

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

Jaime Trujillo Escobedo dice...

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!

Rompedor83 dice...

Gracias Jaime por la respuesta luego lo sustituyo
y comento

Jaime Trujillo Escobedo dice...

Muy bien, Rompedor83.

EdwardCuley dice...

¿Este truco se puede aplicar si tienes la barra de navegación blogger? Porque creo que eso hace que no aparesca en mi blog...

Jaime Trujillo Escobedo dice...

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.

Anónimo dice...

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

Jaime Trujillo Escobedo dice...

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.

KoolYeah! - Curiosidades dice...

Hola jaime...te felicito por tu blog...una pregunta...como coloco el menu debajo de la cabezera del blog...muchas gracias...

Jaime Trujillo Escobedo dice...

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.

Anónimo dice...

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?

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo