Menu barra superior con buscador incluido : El Escaparate de Rosa

Estás en: Inicio » Menus » Menu barra superior con buscador incluido

Menu barra superior con buscador incluido

Un menú horizontal tipo Navbar para colocar en la parte superior de nuestro blog y que además de los enlaces que añadamos en el, lleva un sencillo buscador incorporado, que funciona muy bien.
Como podéis ver en la imagen de ejemplo, la barra del menú ocupará todo el ancho de la pantalla:

Para colocarlo en nuestro blog solo son necesarios dos simples pasos:

[1] En la parte de "Edición Html" de nuestra plantilla sin expandir las plantillas de artilugios, localizamos la etiqueta ]]></b:skin> y justo antes pegamos este código CSS:

/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }

#searchcont { width: 100%; margin: 12px auto 12px auto; }

#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}

En este código CSS es donde tendréis que cambiar los datos necesarios para modificar el color, tipo de texto, etc. del menú.

[2] Colocaremos ahora el código necesario para que se muestre la "barra menú" en la parte superior del blog y lo haremos justo sobre <div id='header-wrapper'> y si en esa posición el resultado no es el esperado (dependerá del diseño de la plantilla) lo colocaremos después de <body> donde debería de funcionar:

<div id='navtop'>
<div class='nav'>
<ul class='navtop'>
<li><a href='http://elescaparatederosa.blogspot.com'>Inicio</a></li>
<li><a href='http://draft.blogger.com/profile/06743611108067453905' title='Perfil Blogger'>Sobre mi</a></li>
<li><a href='http://feeds.feedburner.com/blogspot/hnBy' title='Suscribe Feed'>Suscribe Feed</a></li>
<li><a href='mailto:lejaniaimposible@hotmail.com' title='Contactame'>Contacto</a></li>

<li><a href='http://elescaparatederosa.blogspot.com/search/label/?max-results=999' title='Ver todas las entradas'>Ver todas las entradas</a></li>
</ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</div>
</div>

Tendréis que cambiar en el código mis datos por los vuestros, lo que no os será muy difícil ya que los he colocado resaltados en negrita.

Entradas Relacionadas:

241 comentarios:

«El más antiguo ‹Más antiguo Total comentarios: 201 – 241 de 241 Más reciente› El más reciente»

ZaFoRe: A partir de hoy tienes un nuevo adepto :P Gracias por el menú que es perfecto! Me gustaría hubicarlo debajo de la imagen que se pone como titulo en la cabecera (head) porque me sale arriba del todo. Como se hace? Gracias rosilla... recomendare tu radioooo xD; 28/8/09
Anónimo: Zafo Coloca el código debajo de la sección de <div id='header-wrapper'> o sea, desde esa línea hacia abajo el primer </div> de cierre que veas, justo debajo de el.; 28/8/09
Israel Nebot: hola, tengo un problema... cada vez que meto el codigo antes de b:skin, me sale en la parte superior de la pagina, como si no lo reconociese. Alguna ayuda? gracias; 30/8/09
Anónimo: Adox Hay dos b:skin en la plantilla, uno casi al comienzo y otro mucho más abajo, es antes del segundo donde has de colocarlo, fijate bien porque son distintos, el primero es b:skin y el que yo digo es de cierre /b:skin; 30/8/09
Anónimo: hola rosa, volvi despues de bastante tiempo, jjjejje, bueno, mi duda es??? como puedo cambiarle el fondo, ni si quiera me vino con fondo!!! asi que por favor ayudame!!!!; 31/8/09
Anónimo: Ascesino Lee los comentarios anteriores al tuyo.; 1/9/09
Bel ^.^!: Gracias Rosa :D

Estaba a la busqueda de una barra bonita que poner ahora que cambié el diseño de mi blog y encontré esta.

Tus consejos realmente ayudana personas como yo que apenas nos manejamos en esto del diseño.

Cuidate y muchos exitos; 2/9/09
jose_3: hola rosa, veras tengo un blog y estoy intentando hacer una plantilla y decidí poner tu barra, el problema es que el buscador no funciona, siempre me pone que no encuentra nada, este es el blog de pruebas que uso:
http://estrenosddd.blogspot.com/
he partido desde una plantilla mínima white, a ver si puedes echarme una mano con esto , muchas gracias; 6/10/09
Anónimo: jose_3 Algo han cambiado en las plantillas de Blogger que algunos buscadores no trabajan como antes...el mio era como ese e iba fantástico, hasta hace nada...tube que cambiarlo por el de Blogger que ves.; 6/10/09
Ezequiel Del Bianco: Rosaa, tengo una duda, al colocar esta barra, me queda un espacio de algunos píxeles entre la barra y la parte superior de la página..

Busqué modificar todos los margins y paddings del outer wrapper y main wrapper pero ninguno puede eliminar esa pequeña distancia..

No logro que me quede como en tu blog.. alguna idea de qué puede estar pasando?

el blog es Alerta Pseudociencias, espero tu respuesta, y te pido disculpas por la molestia de antemano.

Y agradezco enormemente la existencia de tu blog y tu esmero :); 16/11/09
Anónimo: ezeqdb Esa distancia siempre queda porque es la que marca la misma pantalla en body...

Mi menú es distinto, son simples enlaces sobre la cabecera y la imagen de fondo... mejor miralo tu mismo:
http://elescaparatederosa.blogspot.com/2009/05/header-con-ancho-total.html; 17/11/09
Ezequiel Del Bianco: Muchas gracias, terminé modificando el mío y poniendo un background que le da un efecto 3D: una imagen de 1px*14px con repeat-x y queda lindo y pesa 200 bytes :D

Saludos!; 17/11/09
Alexis S: hola rosa como pongo un buscador como el tuyo en mi blog ayuda; 20/12/09
Anónimo: alex Tan fácil como ir a Diseño y pinchar en añadir un nuevo gadget, alli verás el gadget para el buscador, es de Blogger como ves....; 21/12/09
Iria: ¡Hola, Rosa! :)
El fondo de la barra sale por defecto en gris.
¿Qué tengo que cambiar para ponerlo en otro color?
Saludos y gracias,
Iria; 31/1/10
Anónimo: IriaNo por defecto, sino porque es el color que yo coloqué en el código... concretamente en esta línea del CSS:
/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ;

Cambias ahí el código del color por el que vas a usar tu.; 31/1/10
Manuel: Hola de nuevo Rosa,acabo de incorporar las "entradas relacionadas en el blog" y ya me estoy metiendo en otra tema. He quitado el menú que tenía en el crosscol y he incorporado el menu horizontal encima de la cabecera retocándolo un poco quitándole el buscador y creo que he borrado más de la cuenta. Me gustaría saber como expandirlo para que siempre ocupe el ancho de la pantalla como en el código original. Aquí lo puedes ver:
http://probandoloscambios.blogspot.com/
Gracias.; 11/2/10
Anónimo: M@nuel El blog es privado :S no puedo verlo...; 11/2/10
Manuel: Dicúlpame Rosa, ahora ya puedes acceder.
http://probandoloscambios.blogspot.com/; 11/2/10
Anónimo: CreatiBeaEn las plantilla hay dos b:skin uno sin corchetes casi al principio y otro bastante más abajo cono los corchetes... mira si te has confundido de b:skin...; 1/3/10
Silvia Quezada: Hola Rosa, gusto de saludarte, mira queria preguntarte como se hace para que las entradas que se enlazan al menú superior tengan un diseño distinto al resto de las entradas, es decir, que no aparezcan las siderbar y que la entrada ocupe todo el ancho de la pagina.

Vi la entrada cambio de diseño paginas estáticas, pero no se ajusta a lo que yo deseo. Puesto que probe el codigo en varias posiciones de mi plantilla pero no me dio resultado. ( uso la plantilla básica )
Podrias indicarme si es posible hacerlo? o en que entrada hablas al respecto?
Gracias; 25/3/10
Rosa: Silvia ¿A qué llamas tu plantilla básica?...; 25/3/10
Silvia Quezada: Este comentario ha sido eliminado por el autor.; 25/3/10
Silvia Quezada: Disculpa las molestias, he colocado este menú en los sitios indicados pero no me funcionan, y no me queda segun lo esperado, ya que los titulos me salen asi:
* Inicio
* suscribe feed
* Contacto

La plantilla que uso es la Plantilla mínima.

La he probado en otros blog y si me funciona, no se porque en esta no me sale, si he seguido los mismos pasos y los mismos codigos.
Podrias ayudarme?
Gracias; 24/4/10
Anónimo: SilviaTienes un error en varios sitios de tu plantilla que la verdad no se como no te ha dado más problemas...

Marcas en el CSS las cosas que quieres saber que son de esta manera:



Eso NO puede hacerse, dentro del CSS solo puedes usar esto para marcar:

/* cambia color resaltador pestañas gris--- */

Cambia todo lo que hayas marcado así desde el comienzo de la plantilla hasta ]]></b:skin>

De ahí hacia abajo SI se marcan los códigos así como los tienes...; 24/4/10
Silvia Quezada: Este comentario ha sido eliminado por el autor.; 25/4/10
Silvia Quezada: Hola Rosa, gracias por contestarme, hice lo que me indicaste, cambie todo hasta llegar a donde me señalaste..........
el problema es que con el cambio se modificaron algunos cosas:

1.- En el menu de pestañas aparece un fondo blanco con bordes, que no se como quitarlo.

2.- Por qué algunos fondos de colores de los titulo del sidebar si funcionan y otros no? aunque tiene los colores asignados.

2.- El menu superior no ha variado y continua saliendo en vertical.

Te agradeceria mucho me ayudaras a salir de este aprieto?

Mi blog es http://manualidadesdesivy.blogspot.com/

Mil gracia.; 25/4/10
Silvia Quezada: Hola Rosa, he logrado quitar el marco blanco alrededor del menu de pestaña que dañaba un poco la estetica.

Lo que no puedo todavias arreglar es lo del menú superior me continua saliendo en esta forma:
* Inicio
* suscribe feed
* Contacto

Tampoco he logrado que todos los fondos de los titulos del sidebar tengan distintos colores, solo me funciona con algunos.

Disculpa que te quite el tiempo.
Gracias por todo.; 25/4/10
Silvia Quezada: De todas maneras gracias, ya arreglé lo del menu superior, y los titulos del sidebar; 25/4/10
Anónimo: SilviaMe alegra oír eso... y siento no haber "llegado" antes... contesto en el orden que me llegan los emails y comentarios a mi bandeja de entrada y tengo a veces cientos a revisar en el mismo día...; 25/4/10
Unknown: Hola Rosita =)tengo un pequeña pregunta =) me gustaria colocar un buscador como el tuyo. Es decir que al poner la palabra el resultado de la busqueda se muestre en el mismo blog, y ademas con las 2 pestañas superiores dandome la opcion de respuestas en este blog y en internet. Me podrias ayudar al respecto, te lo agradeceria un monton =) gracias por todo tu efuerzo y valiso apoyo =); 21/6/10
Anónimo: Surplus21 El mio es el gadget que Blogger proporciona en "añadir gadget" ni más ni menos...; 21/6/10
Cristian: Querida Rosa....tengo el mismo problema que Lujo...la barra no me queda pegada al borde superior, si no que queda unos cuantos px más abajo como si la barra oculta de bloger estuviese pero invisible y si dejar que tu menu pueda ocupar su lugar.

¿Hay alguna forma de solucionar eso?; 13/8/10
Anónimo: Arahel Es una entrada bastante antigua... pero creo recordar alguien preguntó lo mismo antes... revisa los comentarios.; 13/8/10
Cristian: Rosa.....bueno...encontré el comentario al que te referís y la explicación a su respuesta...Me temo que no me va a servir porque al igual que otro usuario en esa explicación, soy nuevo en blogger y estoy usando las plantillas nuevas en las que no aparece ni uno de los códigos que marcas.
Pude arreglármelas para hacer funcionar algunas de las cosas que aprendí leyendo tu blog, pero en esta no tengo idea.

Esperaremos a que salgas con nuevas soluciones para las plantillas nuevas! Gracias....; 16/8/10
manu6666: rosa necesito de tu ayuda, te explico antiguamente puse un menu con un buscador incluido ,de aca mismo y ahora no lo puedo eliminar. ya que puse ahora un menu [MENU DOS (ROBS)]y lo otro lo puse bien pero cuando entro a alguna entrada ya no esta. esta solamente en la pagina principal. Puedo dejarlo figo como menu principal??? ayudame te dejo la direccion para que lo veas.

http://peliculasenzonadirecta.blogspot.com/; 16/9/10
Anónimo: manu6666 Para retirar el anterior, solamente has de seguir los pasos de la entrada e ir eliminando el código que añadiste.

En cuando el menú robs, no hay nada si sigues los pasos de la entrada, que le impida ser visible en todas las páginas...; 18/9/10
marta_tururu: Muchas gracias Rosa!!! Estoy dando el mismo formato a mis 4 blogs y este menu me ha venido de perlas

Un saludete; 21/9/10
El Programador: Hola Rosa, desde ya muchas gracias por toda la informacion que nos brindas, y que te dejen un comentario es algo que nos encantan a todos los que tenemos blogs, yo soy programador en visual y en genexus, pero hace un tiempo que me largue a descubrir esto del diseño web, y arranque con blogger, y dia a dia quiero mejorarlos, soy muy novato en esto, y me intereso el menu en el blog, me gustaria saber si cada enlace del menu lo tomas de una entrada, que quiero decir con esto, en el caso de la pestaña contacto que quiero que me figure en el menu, o cualquier otra cosa, vos a eso lo tomas de una entrada o haces algo aparte, no se si me entendes lo que se va a visualizar al hacer clik es lo que ya esta en una entrada o es una pagina aparte, bueno solo eso, desde ya muchas gracias y que tengas suerte en todo...; 24/9/10
Anónimo: El Programador Si te refieres a mi bog, en unos casos es una entrada y en otros una página independiente... depende de lo que necesites:

http://elescaparatederosa.blogspot.com/2009/09/como-anadir-los-enlaces-en-un-menu.html; 24/9/10
Conceitus de Beleza: Tu blog es muy hermoso.
gracias por tu ayuda.
Felicidades.; 28/10/10

«El más antiguo ‹Más antiguo Total comentarios: 201 – 241 de 241 Más reciente› El más reciente»

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.