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: 1 – 200 de 241 Más reciente› El más reciente»

Anónimo: Excelente rosa este buscador tipo menu es lo que estaba buscando para mi blog, muy buen blog el tuyo es unico y original.; 21/9/08
David Cueto Collao: muy buena utilidad esta yo tengo algo parecido, en mi blog, y lo mejor es ke lo hize yo solito jaja bueno ni tanto.

aunque hace poco vi algo en una pagina y me justo mucho, alguna idea de como hacerlo, mira te dejo una imagen de lo k kiero

http://subefotos.com/ver/?975ff55bc0609dd6408aa615e46cd6a5o.jpg

crees ke sea posible hacer uno para un blog???; 21/9/08
Unknown: Hola Rosa no se como lograr que mi pagina después de reducir el tamaño de la sidebar, se vea bien internet explorers, eso me tiene muy preocupada, porque he querido revertir los cambios instalando la plantilla que antes había salvado y blogger no me deja , me dice que ha habido un error y debo comunicarme con ellos.; 21/9/08
Perinqué: Muy bueno,Rosa.Yo,como tengo el menú por pestañas en el que ya aparece el inicio,prefiero no ponerla,sino añadir el buscador aparte.
Lo que sí querría es añadir la propia barra Navbar.Cambié de plantilla y ésta no la lleva, a pesar de que cuando voy a elementos de página aparece la opción de editarla,pero no hay manera de que aparezca.La barra navbar es muy necesaria,ya que cada vez que voy a cambiar algo en el blog,o simplemente crear una nueva entrada,tengo que dar muchos rodeos:ir a mi perfil,desde ahí a la página principal de Blogger y luego al apartado que quiero del blog.¿Hay alguna forma de añadir esta barra? Gracias.; 21/9/08
Anónimo: Tara, localiza esto en tu plantilla (creo que está justo encima de donde has colocado el css de las pestañas del menú):

#navbar-iframe { height:0px; visibility:hidden; display:none }

Y borralo.; 21/9/08
Anónimo: Soliradidad , supongo que será la versión de IE que usas...porque yo veo bien el blog :-X

No obstante, te recomendaría retirar el cartel de neón que tienes en la sidebar, ese tipo de carteles usan un código más apropiado para spaces y suelen dar problemas de visualización del blog en Blogger...; 21/9/08
Anónimo: Cochalo, gracias! :-); 21/9/08
Anónimo: dicc93 , puffff, ni idea así de pronto...aunque a menudo vemos cosas así en dominios privados como es este caso, donde el acceso a cualquier parte de la plantilla y sus funciones es total...en Blogger no es así, dependemos de muchas cosas controladas por ellos...; 21/9/08
Unknown: Perdona Rosa, cual cartel de NEON ?...disculpa mi ignorancia.; 21/9/08
Anónimo: Soliradidad , perdona tu, es que yo lo llamo así...:-$ me refiero al de "Paremos la guerra".; 21/9/08
Anónimo: Li este tutorial e daqui há alguns dias vou colocar lá no meu blogue. Gosto de menu horizontal.
Hoje estou passando para agradecer o presente. Em sete meses já tive várias imagens no cabeçalho e de nenhuma eu gostei.
Aquela imagem ficará no blogue para sempre e também ficará gravada em meu coração.
Obrigada!; 21/9/08
Anónimo: Iza, gracias :-L; 21/9/08
Unknown: Ola Rosa ...
Cada vez que veo tu blog, gosto mucho.
Me gustaría cambiar el banner de mi blog, dónde puedo encontrar un banner ...?
Saludos; 21/9/08
Unknown: Bueno Rosa pero en el Internet explores que yo miro el blog, es el que viene por defecto con xp.

Rosa eso me tiene muy preocupada porque así como yo deben haber bastantes personas usando el mismo Internet que por defecto tengo yo.

sera que me puedes ayudar? que tengo que hacer para que el blog se vea bien en esa versión antigua de explores ? como se ve en en otros navegadores como fairefox; 21/9/08
Anónimo: Rosa, me quedo con el menú bar que nos enseñaste en otra entrada, tengo demasiados enlaces y el buscador me quitaria sitio, de todas formas es una buena alternativa. ¡Salud!; 21/9/08
Anónimo: Soliradidad , en Firefox yo lo veo bien y en la última versión de IE también...no podemos estar diseñando para todos los navegadores a la vez, sería un trabajo de "locos".
Cada versión nueva de navegadores corrige los fallos de las anteriores...lo normal es que siempre se use la última versión del navegador que sea.; 21/9/08
Anónimo: Carlos Soler, de eso se trata :-) de que cada uno use lo que más le convenga a su blog...¡gracias por estar siempre ahí!

Un abrazo!; 21/9/08
Anónimo: GUILHERME PIÃO, en esta página las hay muy lindas:

http://www.freewebpageheaders.com/gallery/index.php; 21/9/08
†Eddie†: muy buen dato Rosa muchas gracias, lo puse pero
no lo guarde, te queria preguntar, primero, que tengo que editar, para cambiar el color de la barra y del font?

que no me combina mucho, trate de cambiarlo yo, pero no me resulto mucho en realidad
jejejeje, gracias en todo caso, me gusto mucho este truco,
como siempre sigues siendo la mejor; 21/9/08
Anónimo: VENGA ROSA! DE DONDE SACÓ ESA IDEA? ESO CREÍ QUE LO HABIA INVENTADO YO, SOLO QUE EN MI BLOG NO LE HABIA PUESTO LOS ENLACES. EN FIN, ES PRÁCTICO E INNOVADOR. SALUDOS.; 21/9/08
Anónimo: Siempre es un placer visitarte, aunque a veces no comente, te sigo por suscripción.

Curiosidad, enséñame por favor con que combinación de teclas se hace con emoticonos el corazón, si te parece.; 21/9/08
Anónimo: Carlos Soler, pues el corazón lo añadí yo en el código de los emoticonos, en realidad pueden añadirse los emos que uno quiera antes de subirlo para enlazarlo.; 21/9/08
Anónimo: LHEONNEL , en cuestión de css y html ya está todo inventado :-) solo hay que saber combinarlos para lograr lo que uno quiere...en realidad, es algo que he visto en muchos blogs...; 21/9/08
Anónimo: †Eddie† , he rectificado el código css, ya que en mis pruebas anteriores había usado imágenes y sin darme cuenta dejé el "hueco" para estas...

Si vas a intentarlo de nuevo, hazlo con el nuevo código. Te explico:

Cambiar el color de la barra aquí:
/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ;

Cambiar el color del hover (al pasar el ratón) aquí:
ul.navtop li a:hover { background:#e1477d;

Cambiar el tipo de fuente:
font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif;

Como verás, hay unas cuantas, la que semostrará por defecto es la que está entre comillas, pero si algún visitante no tiene esa fuente en su navegador, verá la siguiente y así sucesivamente...; 21/9/08
Anónimo: Carlos Soler, no se que código usas para los emos, pero mira en esta entrada (comentarios 20 y 21):
http://elescaparatederosa.blogspot.com/2007/05/emoticonos-en-tu-blog.html; 21/9/08
Anónimo: Gracias Rosa, ya le he echado un vistazo y he dejado comentario. ¡Salud!; 22/9/08
†Eddie†: Listo, muchas gracias rosa, ahora lo modifique algunas cosillas, (en realidad solo las 3 que me mencionaste, que era las que quería)
para que quedara mejor en mi blog,
denuevo, eres la mejor!!!; 22/9/08
Than: hola, Rosa

Tengo una consulta: En Vagabundia (y otros sitios) he visto como al final de todas las entradas del blog ponen una barra con una numeracion, donde vas eligiendo a que pagina del sitio quieres ir.

Sabes como se hace esa herramienta.

La considero interesante, debido a que asi supliriamos los botones de Entradas Anteriores y posteriores del Blog, y navegar en el se hace mas sencillo con esta barra que te comento.

Espero que me puedas ayudar.

Recibe un cordial saludo

La direccion de mi blog es:
http://vida-serendipity.blogspot.com; 22/9/08
Anónimo: Thanya, te refieres a un sistema de paginacion.
Aún no he publicado nada al respecto ya que he preferido esperar un poco...ha dado problemas o, mejor dicho, no está funcionando bien en según que plantillas, por lo que me han comentado...
Puedes ver como colocarlo en Vagabundia:
http://vagabundia.blogspot.com/2008/08/paginacin-en-blogger.html; 22/9/08
DieGo: Exacto esa paginación da muchos problemas en diferentes plantillas, an algunas funciona muy bien y en otras (lo digo por que la probe) desencaja todo el contenido, se sale de cuadros, en fin...; 22/9/08
Anónimo: Rosa, hace tiempo que quería agradecerte la impagable labor que haces entre nosotros, los aprendices de blogueros.

Gracias a la generosidad de otro peso pesado (de los tuyos ;) ), hoy puedo hacerlo. Tienes un corazón brillante (Además, quiero decir :) ).

Un abrazo,

Segis; 22/9/08
Jaime Trujillo Escobedo: donde puedo saber el codigo del color gris oscuro, esque quria cambarle el color de cuando pongo el raton encima; 22/9/08
Jaime Trujillo Escobedo: y otra cosilla, como puedo numerar las entradas como tu tienes en una esquina, con una nubecita? bueno eso era todo, un saludo!; 22/9/08
Jaime Trujillo Escobedo: siento ser ta pesado, pero tenia otra pregunta, como se pone la barrita azul en los archivos, sabes, en el lateral, donde se ven los de 2008, 2007, 2006, etc,,, eso se pone o sale solo cuando hay muchos archivos?

gracias, esperaré una respuesta, un saludo.; 22/9/08
Anónimo: Rosa tu blog es genial,sabes muchisimo yo todo los dias aprendo algo nuevo gracias a ti,es mas gracias a ti pude aprender a personalizar mi blog.; 22/9/08
Anónimo: ROSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!!! ROSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA!! LO CONSEGUIMOSSSSSSSSSSSS!! O AL MENOS ESO PARECE ¬¬ TENDREMOS ALOJAMIENTOOOO GRACIAS A GOOGLEEEE!!! BLOGGERS CONTENTOS!!GOOGLE DARÁ 5 GB DE ALMACENAMIENTO ONLINEEEE!!
MIRE MI POST!!! DIFUNDALO!! ESTO HAY QUE FESTEJAR! ;)
http://inhdigo.blogspot.com/2008/09/google-lanza-servicio-de-almacenamiento.html; 22/9/08
Anónimo: LHEONNEL, aunque como todos sabemos Blogger pertenece a Google, no se yo hasta que punto será ese servicio lo que los usuarios de Blogger necesitamos...no festejemos antes de tiempo...prudencia.; 22/9/08
Anónimo: Segis , encantadacon tu comentario XD.
Gracias. :-$; 22/9/08
Anónimo: Jaime Trujillo Escobedo
donde puedo saber el codigo del color gris oscuro, esque quria cambarle el color de cuando pongo el raton encima...

Cuando pones el ratón encima el color no es gris oscuro, sino una especie de rosado :-X ¿a qué color te refieres exactamente?

Lo del numero de entradas en una imagen (nubecita o lo que sea) paso a publicarlo en breve, ya tengo la entrada preparada.

Lo de las barritas del archivo, pues no, no salen solas, hay que aplicarlo en el código html de la plantilla, puedes ver como hacerlo en esta entrada (revisa también los comentarios pues hay respuestas interesantes a algún problemilla surgido):
http://elescaparatederosa.blogspot.com/2007/10/scrollbars-en-cualquier-parte-del-blog.html; 22/9/08
Anónimo: nickorock , es un placer poder ayudarte.
Mil gracias por tu comentario. :-); 22/9/08
Anónimo: OOOOOH !!! ROSAAAAAAA!! NO ME FRENE EL FESTEJO XD JAJAJAJA SEA COMO SEA, YA ES ALGO O NO? ES UN PASO ADELANTE ;); 22/9/08
Anónimo: LHEONNEL, si es cierto, es un gran avance, solo que yo a veces soy un poco desconfiada, ja,ja.; 22/9/08
Anónimo: MMM YO TAMBIEN ¬¬; 22/9/08
Anónimo: Muchisimas Gracias
Rosa!

Por tomarte el tiempo de contestar.

Recibe Saludos y un fuerte abrazo!; 23/9/08
Anónimo: ok graciasw Rosa!
esperaré a lo de las nubecitas de numerar entradas =_=; 23/9/08
Julio Torres: Hola Rosa: cuánto tiempo!!

Te cuento. Después de tu ayuda para poner mi blog de A Lareira Máxica http://alareiramaxica.blogspot.com/ a 3 columnas y que fue posible gracias a ti, quería preguntarte un par de dudas, a ver si me puedes ayudar.

1- REFERENTE AL TRUCO DE ESTE POST: ¿Se pueden poner las pestañas después de la imagen del blog, quiero decir, justo debajo como en el tuyo?

2- EMOTICONOS: ¿Cómo hay que hacer para colocar la posibilidade de usar emoticones divertidos a la hora de hacer comentarios?

Esas son mis dudas.

Aprovecho para darte, una vez máis, las gracias por anticipado. Tu ayuda es, valga la redundancia, de gran ayuda. Te mereces un gran premio al blog más solidario.

Un bico Rosa, desde Sanxenxo (Pontevedra)
Boas noites e Carpe Diem; 23/9/08
Julio Torres: Rosa, he probado en mi blog de pruebas el buscador y no me funciona. Meta la palabra que meta no encuentra ningún resultado. ¿Por qué?

Por cierto, que aunque no escribo habitualmente comentarios en tu blog, lo consulto a menudo. De hecho tengo un enlace directo en mi "A eira dos blogs" (lista de blogs) de El Escaparate.

Bicos; 23/9/08
Anónimo: Hola Rosa! me quedó muy pero muy bonito. Eso sí, le quité el buscador porque en mi blog no encontraba nada. Sin embargo, el que tengo de google funciona a la perfección. Será que se puede poner éste en la barra en lugar del otro?
También se podrá agregar otras pestañas verdad? Otra pregunta pero de otra naturaleza. No hay forma de tener dos perfiles en blogger no? Como tengo dos blogs para diferentes destinatarios...uno es para mis alumnos y no quiero que tenga el mismo perfil que el de mezcla azul. Yo probé pero parece que no se puede. Viste que en mezcla azul yo tengo una foto y lo que quiero que se lea, pero lo tuve que agregar como un elemento de página (imagen).
Muy buena quedó esta barra, gracias Rosa!; 24/9/08
Anónimo: Graciela, el tamaño del buscador de Google es apropiado, así que se trataría de probar, sustituyendo el código del otro por el de Google.

También te digo que el que quitaste es el mismo que uso yo en mi blog y que va muy bien...el problema es que estos días con las pruebas de Blogger anda algo "loco".

Si, pueden agregarse más pestañas.

Para lo de los perfiles mira aquí:
http://elescaparatederosa.blogspot.com/2007/12/dos-perfiles-o-ms-en-el-mismo-blog.html; 24/9/08
Anónimo: Gracias Rosa, ahora pongo el buscador. Me decís que el de la barra es el mismo de google? Porque ayer el de la barra no encontró el post dentro de mi blog y el de google sí.
Con respecto al perfil, el truco sirve para dos perfiles diferentes, no para el mismo. Es decir, dos administradores comparten en una sola página sus dos perfiles juntos.
El mío es uno solo, para ambos blogs, la fotografía puede ser la misma, pero lo que yo quiero es que se lea una cosa en un perfil y otra cosa en el otro. No creo que eso se pueda hacer (creo).
Saludos!; 24/9/08
Anónimo: Rosa: el buscador tampoco se puede poner porque es un script. El anterior iba con un form y éste es el buscador de google que se añade desde elementos de página.
Saludos; 24/9/08
Emilio Fernandez: Hola Rosa, gracias por toda la ayuda,
Gracias a ti tengo una cabecera con fotos aleatorias, he modificado el ancho de mi blog y estoy pendiente de varios mas, y tengo musicaaa.
Tu blog es tremendamente util.
Me gustaria donde puedo encontrar "caratulas mas acorde con mi blog para el reproductor de mp3.
Gracias de nuevo Emilio; 24/9/08
Pamen: Muchas gracias Rosa, me ha quedado muy bien el menú. Pero hay una cosa y es que se me ha ensanchado el blog y ahora sobra un trozo en blanco. No se si me entiendes, quiero decir que en la parte derecha sobra espacio y eso se paga teniendo la barra de desplazamiento lateral inferior. Me gustaria saber como "desensanchar" y dejarlo como estaba. Gracias de antemano.; 24/9/08
Anónimo: Graciela Ventimiglia , no, lo que te decía es que el buscador es el mismo que yo uso en El Escaparate y que funciona muy bien.
En cuanto a lo del perfil creo que no, que no puede hacerse usando el perfil que Blogger proporciona, pero si podría hacerse algo como el widget de suscribir, pero para unir los datos de dos perfiles en uno...

Y si, en lo del buscador tienes razón, el de Google no sirve, no al menos el que se instala desde Blogger.; 24/9/08
Anónimo: Emilio Fernandez , ups pues lo siento, pero no se donde encontrar eso...; 24/9/08
Anónimo: Mari Carmen si es http://pamencocina.blogspot.com/ yo lo veo bien...:-X; 24/9/08
Anónimo: El cuadro de búsqueda de google que implementé es de blogger in draft. Funciona perfectamente para las búsquedas dentro del blog. Por eso te decía que el que tengo es de google, es un widget y por eso no puedo ponerlo en la barra de tu truco.
Con respecto a los perfiles entonces no se puede, es lo que imaginé, porque tampoco quiero que se unan los perfiles.
Bueno, gracias por todo Rosa, como siempre tan bien dispuesta. Saludos!; 25/9/08
Pamen: A mi me sigue apareciendo quizá sea por el navegador. Pero puede que no me haya explicado bien, a ver si lo consigo, para que te hagas una idea, si vas a la derecha del todo del blog (desplazando la barra) sobra un espacio, además se ve en que la barra blogger acaba y sobra un cacho negro aún. Muchas gracias por la atención y por tu estupendo blog.; 25/9/08
Anónimo: Mari Carmen , verás, yo he mirado el blog con Firefox y con Iexplorer, ambos en sus últimas versiones y el blog se ve correcto, de hecho ni siquiera me sale abajo la barra que dices de desplazamiento para ir a derecha...; 25/9/08
Julio Torres: Rosa!!! no te olvides de mi!!!!

Dudas:
1- Cómo poner las pestañas debajo del dibujo del blog (como en el tuyo, por ejemplo)

2- Los emoticones en los comentarios cómo se ponen?

Besos,
Carpe Diem; 25/9/08
Anónimo: Julio, pues juraría que ya te había contestado...estoy prácticamente segura de que así fue...para mi que Blogger me pilló haciendo de las suyas y no se publicó la respuesta, lo siento :-$ culpa mía por no comprobar después de comentar...

Te decía que tengo pensado publicar como se hace exactamente mi menú de pestañas, ya que varias personas se han interesado por el.
No obstante, hay algunos tipos de menú en horizontal publicados en el blog y que puedes ver si accedes arriba en la etiqueta "Menus".

En cuanto a los emos, te había remitido a Vagabundia, ya que aquí tengo publicados dos sistemas, uno de ellos no sirve en los comentarios y el otro parece ser que no funciona o lo hace con dificultad dependiendo de algún otro script que esté siendo usado en la plantilla. Yo estoy usando el de Vagabundia, fisga allí en la pestaña de su menú "Blogger"; 25/9/08
Julio Torres: Gracias Rosa!!!

Visito Vagabundia y espero tu post sobre las pestañas.

Moitos biquiños. Eres un sol!!
Carpe Diem; 25/9/08
Iván: Rosa, necesito ayuda, intento achicar la barra y no hay caso, no anda, dime que es lo que tengo que tocar, mi blog es http://avatar-site.blogspot.com, gracias!!!; 25/9/08
Unknown: No se me había ocurrido ponerla al lado de los gatitos :) pero por ahora la dejo donde la tengo si me decido el cambio al menos ya se como ^_^
Gracias! Feliz inicio de Otoño :)

Muchos, muchos besos prrrrrr; 25/9/08
Anónimo: Iván, la barra se achica en esta parte del código:
.nav {width: 950px; margin: auto;}

En donde ves 950 pones la medida del ancho de tu cabecera.

Si aún se sigue yendo hacia el lado izquierdo, cambia su posición dentro de la plantilla y pega el segundo código justo encima de: <div id='header-wrapper'>; 25/9/08
Anónimo: Σ=o) Pau, gracias prrrrrrr!!!; 25/9/08
Pamen: Muchas gracias Rosa, he estado mirando en otro ordenador y tienes razón. No se porque extraña causa solo me pasa en el ordenador donde administro el blog. Mil gracias y disculpas por haberte hecho perder el tiempo.; 27/9/08
Anónimo: Mari Carmen , ni mucho menos ha sido perder el tiempo, tranquila. Era extraño porque yo lo pruebo en dos ordenadores con distinta resolución de pantalla y hasta con cuatro navegadores...tal vez sea algo de la configuración en ese PC.; 27/9/08
Alejandra: Rosa, sigo tu blog pero nunca había comentado. He puesto en mi blog este menú barra, lo único que me falta es saber como ponerlo debajo de la cabecera, pero como he leído en los comentarios, parece que lo publicaras luego.
Gracias por todo lo que publicas, ya que me ha ayudado mucho con el blog.

Un saludo; 29/9/08
Anónimo: Toke de libélula, lo que pasa supongo es que no te deja la plantilla arrastrar el elemento ahí ¿no es así? Para que puedas hacer "hueco" debajo del header y arrastrar el elemento con la barra-menú, mira aquí:
http://elescaparatederosa.blogspot.com/2008/05/elementos-adicionales-en-diseo-de-la.html; 30/9/08
Pamen: Pues no creo que sea del PC porque me pasó cuando puse el menú. Aún así da igual porque mi importa más que salga bien en el resto. Por cierto lo he mirado con resolución de 1024x768. Pero no te molestes más que no tiene importancia. Un saludo y si alguna vez necesitas una receta pasate por mi blog.; 2/10/08
MINDistortion: rosa gracias este tambien me funciono pero x ahi vi un comentario tuyo donde puedes modificar cuantas entradas puedes mostrar en la pagina inicial y cuando le dan en entradas antiguas

ya que quiero q en inicio aparesca 5 entradas y cuando le den en entradas antiguas aparescan 10 xD

eso si me intereza pero no encuentro donde esta espero me ayudes

y q me hayas entendido VALES ORO xD; 3/10/08
Anónimo: MINDistortion, supongo que será esto...

http://elescaparatederosa.blogspot.com/2008/05/controlar-el-nmero-de-entradas-en.html; 3/10/08
Anónimo: Mari Carmen, yo pienso que si te vas a quedar mal a gusto, lo mejor será que elimines el menú, arriba, en la etiqueta "Menus" tienes más opciones.; 3/10/08
Pamen: No me importa que me pase, así que no lo voy a quitar, he mirado en el ordenador portátil y me he dado cuenta que es cosa del monitor que te aumenta la imagen de las páginas. Y se ve que la ha aumentado. Pero no te preocupes más. Podemos darlo por zanjado, y me quedo con él menú. Gracias una vez más y seguiré visitandote y sirviendome de tus buenos trucos.; 3/10/08
Antony: Muy bueno, pero no lo pude colocar el la parte superior del blog, pero lo coloque en HTML muy bien.
Saludos!; 8/10/08
Fernando: hola rosa me gustaria saber si se pueden poner varias entradas en un mismo boton de la barra de menus.
por favor responde pronto es urgente!!; 13/10/08
Anónimo: Fernando, todos consideran que su consulta es urgente...suelo responder lo más rápidamente que me es posible...

Si pueden ponerse todas las entradas de videos en la etiqueta del menú "Videos" por ejemplo, pero para eso antes tienes que tener todas tus entradas etiquetadas:
http://elescaparatederosa.blogspot.com/2007/08/como-etiquetar-los-posts.html

Una vez etiquetadas, en la pestaña Videos puedes colocar la url a esa etiqueta y asi saldrán allí todas las entradas de esa categoría...la url de una etiqueta es la dirección que se ve en la barra del navegador cuando pinchas en esa etiqueta determinada.; 13/10/08
Cristina Batanero: ¡Muchas gracias! ¡Mi blog tiene cada vez un aspecto más profesional! :); 18/10/08
Anónimo: Cris, gracias a ti!; 18/10/08
Cristina Batanero: Por cierto Rosa, no sé si habrás mirado mi blog, pero la barra de menú que hice no me queda del todo bien, aunque a lo mejor ni se nota:

- No me queda realmente centrada respecto al blog, he tenido que ir jugando con el valor de "width:" (Ahora lo tengo así: .nav {width: 545px; margin: auto;} ). Según el navegador y el SO se me mueve, y a veces no cabe y se hacen dos líneas. He probado encerrándolo con el código 'center', pero no lo consigo.

- Me queda demasiado espacio entre los títulos de la barra, tanto arriba como abajo. Si pudiera quedarse en una barra más finita, tocando las barras verticales con la superior e inferior, ya sería el novamás.

Si pudieras ayudarme con estas dos cosillas, ¡te estaría más agradecida de lo que ya lo estoy! Muchas gracias por todo Rosa.; 18/10/08
Anónimo: Cris, cuanto menos valor pongas en width, más se apretarán los enlaces y por eso se "saltan" a una segunda línea.

En #navtop { background: #dcdcdc ; height: 26px; has cambiado el valor de height a 52 y eso es lo que marca el espacio de los títulos al borde de la barra...

En fin, has tocado cosas en el código que no eran necesarias...normalmente doy los códigos con las medidas más apropiadas...; 18/10/08
Cristina Batanero: Es que si lo dejaba como tú lo dabas los títulos se salían del sitio, pero bueno da igual, lo dejaré así, tampoco queda mal.

Gracias por tu atención, se agradece.; 18/10/08
Anónimo: Hola Rosa, creo que en algún momento he leido en tu blog como poner esta barra debajo de la cabezera pero ahora estoy perdida y no lo encuentro por ningún sitio...

Mil gracias; 23/10/08
Anónimo: Liz, supongo que será esto:
http://elescaparatederosa.blogspot.com/2008/10/aprovechando-espacios-en-la-plantilla.html
o esto:
http://elescaparatederosa.blogspot.com/2008/05/elementos-adicionales-en-diseo-de-la.html; 23/10/08
Anónimo: Rosa, me referia a colocar la barra de menus debajo de la cabecera y no arriba...en fin, como lo tienes tú ahora en el escaparate.

Besitos; 23/10/08
Anónimo: Liz, ay Dios! hoy no me entero de una :-)

Mira tal como explico aquí es sobre <div id='header-wrapper'> para que se vea arriba.
Pues localiza esa misma línea, y desde esa línea ve bajando por el código hasta el primer </div> que veas. Pega el código debajo de ese </div>; 23/10/08
Anónimo: Ja ja ja...pero si es que no se como puedes con todo...eres genial...

Voy a probar. Mil gracias; 23/10/08
Anónimo: Puse al fin el Menú Inicio gracias a ti siguiendo los pasos, y también el buscador, no me quedo tan bonito pero para no saber mucho sobre esto creo que ahi la llevo, muchas gracias por tantos tips utiles que nos brindas...; 3/11/08
Anónimo: Ahh no dejé mi blog.. este es

http://mundomagicodealondra.blogspot.com/

Gracias Rosa... hasta pronto.; 3/11/08
Anónimo: Alondra, prueba cambiando algunos de los valores en estas dos líneas:
#searchcont { width: 100%; margin: 12px auto 12px auto; }
#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}

Ve probando a cambiar en padding, por ejemplo, sin guardar, usa la vista previa.; 3/11/08
Anónimo: Hola Rosa!! hice lo que me dijiste de cambiar algunos valores de las dos líneas... pero no me quedaba bien creo que fue porque le estuve moviendo antes de tu consejo y luego ya no supe como resolver el problema por lo tanto opté por eliminar los códigos que había pegado, y me decidí por el menú CSSplay (Menu numero 4), ya lo puse me gustó, sólo que no supe como cambiarle el tamaño de letra, el color, y que no me quedara salido, te dejo la dire de mi blog en serio eres una gran ayuda, en tu blog he sacado muchas ideas... este es mi blog

http://mundomagicodealondra.blogspot.com/

Muchas gracias por tu ayuda...; 4/11/08
Anónimo: Alondra, veo que has conseguido modificar el texto.
Para que no se te "salga" el menú en esta línea del código:
.menu4 {padding:0 0 0 1em; margin:0; list-style:none; height:35px; background:url(http://img132.imageshack.us/img132/53/profour0tc2.gif);}

siempre antes de la última llave, la de cierre } añades: width: 853px;; 5/11/08
Anónimo: Rosa, muchísimas gracias por responder a mi comentario, ya hice lo que me aconsejaste de agregar width: 853px; antes del } se me movió del lado derecho hacia adentro pero del lado izq. quedo igual, así que para que del lado derecho me quedara al margen le puse 915px en lugar del 853px para ver si así se me ponia un poco mejor y si funcionó pero del lado izq. me sigue quedando hacia afuera...

Me ayudas a que del lado izq quede mejor?? eres un sol, gracias!!!

http://mundomagicodealondra.blogspot.com/; 5/11/08
Anónimo: Ufff quiero llorar, quise cambiar la plantilla para ver si se venia con más color, y pues guardé antes la plantilla como se recomienda, hice el cambio para ver si me gustaba como se veia y cuando quise regresar a mi plantilla para recuperar los artilugios se me elimino todo! estoy que echo chispas estoy bien triste, ufff voy a tener que empezar de nuevo y me da mucho coraje conmigo misma, buena ya que no?? pero lo bueno es que existe tu página para ver como poner de nuevo todo, ay estoy bien enojada conmigo misma, en fin ya que le hago no??

La ayuda que me diste me sirvió mucho y me da pena que me haya pasado esto luego de tu ayuda, que tonta fui!!

Bueno a empezar de nuevo...

Saludos!!; 5/11/08
Anónimo: Alondra,claro, la plantilla se guarda pero los widgets no se conservan...

http://elescaparatederosa.blogspot.com/2008/10/cambiar-la-plantilla-sin-perder-los.html; 5/11/08
Anónimo: Hola Rosa.

Esta excelente este menu, ya lo he puesto en mi blog y no he necesitado cambios, porque ha combinado a la perfeccion con mi plantilla...

Es que estoy trabajando con un minima a ver lo que hago!!!.

Saludos...; 5/11/08
Anónimo: Birdelo, ya tengo ganas de ver el resultado...:-); 6/11/08
Unknown: Hola Rosa... pues seguí tu consejo de usar una plantilla básica e irla poniendo a mi gusto. Empecé con este menú, y creo que va bien. Los colores de mi blog aún no me gustan, pero seguiré poniendolo mono, hasta que quede. No tengo que decirte que todos los cambios que hago son siguiendo tu blog. Mil gracias.; 7/11/08
Anónimo: Pucca , claro, poco a poco conseguirás lo que deseas, ya verás como si:-); 7/11/08
rafael: Hola Rosa, gracias por tu blog! como puedes ver en miblogdeyoga.com ya he colocado la barra de menu, pero me gustaria que esta quedara por debajo del header y no por encima.
gracias por tu ayuda y le pongo un incienso al buda en tu honor; 8/11/08
Anónimo: rafael, para colocarla debajo busca después de <div id='header-wrapper'> el siguiente </div> que veas y coloca el código debajo.; 13/11/08
Unknown: hola rosa te saluda jean javier te felicito por los consejos espero que me ayudes con esta pregunta quisiera cambiar el color de la fuente yel tipo de fuente, he leido y aparece alliel tipod efuente pero hay varios tipos de fuente nose cual es elqm ued ebode cambiar gracias

font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; ?; 29/11/08
Anónimo: director, la fuente actual del menú es la que aparece entre las comillas "
font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif;

Si quisieras por ejemplo la sans-serif tendrías que ponerlo así:
font-family: "sans-serif", Century Gothic, Palatino Linotype, Trebuchet MS;; 29/11/08
Paau: Hola Rosa.. esta excelente tu blog.. quiero hacerte una consulta acerca de como cabiar la imagen que aparece donde escribios la url que queremos entrar
en tu caso vos pusiste la imagen que sale una persona sentada en la computadora .. mientras que ami me aparece la B de blogger

Muchas Gracias; 7/12/08
Anónimo: Alejandro
Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html; 7/12/08
Paau: Muchas Gracias Rosa!!:D

Sos una genia... me salio todo perfecto

Un Saludo; 7/12/08
Anónimo: rosa, genial tu blog.

Tengo un pekeño problem. He puesto el menu y se me ha descentrado el header... Sabes que puede ser¿?; 7/12/08
Anónimo: sonalob, supongo que has incluido el código del menú directamente en la plantilla...¿porque no pruebas a colocarlo dentro de un gadget html?; 7/12/08
Anónimo: Problema solucionado... La paciencia, la madre de la ciencia ;); 7/12/08
Anónimo: Texto enlace
Hola!
he instalado la barra con el buscador que de este post y tengo problemas con el buscador.
Las categorias me funcionan perfectamente, pero el no puedo escribir nada en el buscador!
gracias de antemano y enhorabuena por tu fantastico blog! un saludo; 15/12/08
Anónimo: el enlace a mi blog es barral23.blogspot.com gracias; 15/12/08
Anónimo: Cid, ni idea...veo que todo está correcto...tendría que funcionar, ya que te aseguro que funciona. Tal vez es que has añadido el código para anular el botón derecho del ratón y eso le afecta...digo yo, porque no se me ocurre porque no va...; 15/12/08
Rima Hi-Tech: Saludos, he colocado la barra de navegación en mi blog, pero con Internet Explorer no se visualiza correctamente, sino que sólo se ve la mitad. Con Firefox no hay problema, ¿Existe una solución? Gracias.

Mi blog: http://www.planetagraffiti.blogspot.com; 12/1/09
Rima Hi-Tech: Hola de nuevo Rosa. Muchísimas gracias por haberme dado una respuesta tan completa y por haber elaborado todo ese pedazo de código que ha funcionado perfectamente(por cierto, no recibí tu mail), ahora se ve la barra de navegación tanto en IE como en Firefox sin embargo...

La barra no ha quedado centrada y además ahora me aparece un deslizador horizontal debido a que el tamaño de la barra es muy grande para mi blog. Estoy seguro de que es cosa de modificar algún margin o padding, pero llevo un buen rato intentandolo y no consigo arreglarlo. ¿Podrías orientarme por favor? Muchas gracias por esta pedazo de web y por todo el esfuerzo realizado. ;)

Te dejo mi web y asi lo ves:

Planeta Graffiti; 13/1/09
Anónimo: estilounderground , si es que las prisas son muy malas :D se me olvidó el div...

He borrado el comentario enorme anterior, ja,ja, así no queda huella de mi "metedura de patita" es broma...es que era muyyy enorme.
Te dejo de nuevo el código, que espero que ahora sea lo que buscas:

/*-- CSS Menu Superior-- */
ul.navtop {width: 950px; margin: 0 auto; height: 26px;background: #114477 top left repeat-x; font-weight: bold; list-style-type: none; padding-left:140px; 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;}
ul.navtop li { display: block; float: left; margin: 0 0 0 5px; }
ul.navtop li a { height: 20px;background: transparent; color:#ffffff; 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: #ffffff;}
ul.navtop li a:hover { background: #5294da; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;height: 19px; }
ul.navtop li a:active { text-decoration: none; color: #ffffff; }
ul.navtop li a:focus { color: #ffffff; outline: 1px dotted #ffffff; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }
#search {float:left; padding-left:150px;}
#searchcont { width: 100%; margin: 12px auto 12px auto; }
#searchform { height:26px; line-height:25px; float:left; 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;}


<div style=' background-color:#114477;height:26px;border-bottom: 1px solid #afafaf;'>
<ul class='navtop'>
<li><a href='http://planetagraffiti.blogspot.com'>Inicio</a></li>
<li><a href='http://puertograffiti.freeforums.org/' title='Foros de Planeta Graffiti'>Foro</a></li>
<li><a href='http://planetagraffiti.blogspot.com/2008/09/links.html' title='Las mejores webs de la red'>Links</a></li>
<li><a href='http://planetagraffiti.wufoo.com/forms/formulario-de-contacto/' title='Contacta con Planeta Graffiti'>Contacto</a></li>
<li><a href='http://planetagraffiti.blogspot.com/search/label/?max-results=999' title='¡No te faltará entretenimiento!'>Ver todas las entradas</a></li>
<li id='search'>
<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></li></ul>
</div>
; 13/1/09
Rima Hi-Tech: Este comentario ha sido eliminado por el autor.; 13/1/09
Rima Hi-Tech: ¡Muchas gracias Rosa! De no ser por tí, la malloría de blogs del ciber espacio serían una patata XD (incluído el mío). No te puedes imaginar cuanto te agradezco la ayuda y el esfuerzo prestados.

De momento la barra se ve bien en ambos navegadores, a excepción de que el botón "buscar" no aparece en IE, junto al campo de búsqueda (mecachis). Supongo que esto es debido a que cada navegador lleva sus propios estándares o algo así :o , vaya cruz que nos ha tocao. De todos modos, me conformo con que quede así, al menos la barra no pierde su funcionalidad en IE, cosa que antes me sucedía.

Gracias por todo el esfuerzo Rosa, sin duda eres un tesoro para cualquier persona que se esté iniciando en blogger, ¡GRACIAS Y FELICIDADES POR LA WEB! :D

Edito: Creo haber descubierto que el botón "buscar" sí que aparece en IE, pero está detrás del campo de búsqueda :S por lo que no se ve.; 13/1/09
Anónimo: estilounderground , y tanto que cruz...uff a ver si la nueva versión no hace lo que le sale de ahí, y no tenemos que estar currando dos veces...ainsss

En fin, a ver si podemos con el...

En el CSS del menú, en ul.navtop{
añade una nueva línea con esto
padding-right:140px;

Y ahí mismo en el css del menú algo más abajo en #search {float:left; }
cambialo así:
#search {float:right; }; 13/1/09
Rima Hi-Tech: :D:D:D Siiii ¡Victoria! Lo hemos conseguido Rosa, por fín la web se visualiza perfectamente tanto en IE como en Firefox con su estupenda barra de navegación.

Gracias por todas las molestias y por haber estado siempre ahí, incluso cuándo se ha empezado a "complicar" el asunto. Sin duda alguna todo esto abría sido imposible sin tu gran ayuda.

Me gustaría comentar en mi blog todo el esfuerzo que ha costado colocar correctamente la barra de navegación y de paso hacer un pequeño homenaje a tu web (con tu permiso).

¡Viva El Escaparate! ¡Viva Rosa! ¡Gracias por todo! ;); 13/1/09
@ZULMAROQUE: ooohhhhhhhh me salio , me salio .... me desmayo de la emocion , segui varios tutos y ninguno servia jejeejee Gracias Rosa, miralo aqui http://kasafia.blogspot.com/ (es mi blog de pruebas)ahora solo me falta configurarlo y lo paso a mi blog verdadero.... gracias, tienes un magnifico blog ... puedes verlo aqui

una preguntita mas por porfis : tienes algun escrito para hacer algo similar a esta opcion de "pagina cargando" espècificamente para hacer una imagen gif de espera mientras la pagina se termina de cargar ...como este conejo que esta de rechupete
conejo monisimo si lo tienes o sabes donde hay por favor avisanos con un enlace ...

Gracias; 14/1/09
Anónimo: Kasafia, en esta entrada tienes como hacer eso:
http://elescaparatederosa.blogspot.com/2007/11/cargando-pgina.html; 14/1/09
Rima Hi-Tech: ¡Saludos! Me ha parecido ver que la barra no se adapta automáticamente a la resolución del visitante, es decir tiene un tamaño fijo y provoca una visualización incorrecta de la página, según la resolución. ¿Estoy en lo cierto? ¿Puede hacerse algo para que la barra se adapte a la resolución del visitante, como la barra original de blogger? Muchas gracias.; 15/1/09
Anónimo: Prueba a añadir un width: 100%; después de <div style='; 15/1/09
the piinwy!!: hola! rosa!!! de verdad te agradesko esta entrada, tengo mas de tres semanas buskando y nomas no me salia kon ningun truko ke encontraba en la web, eres mi idolo neta!
y ps ya kedo solo ke keria saber si me podias ayudar?,
kiero kitar la barra de buskeda, komo podras ver en mi blog tengo dos y ps kualkiera ke me eyudes a kitar est bien, espero tu respuesta, en caso de ke no puedas mediante tu blog te dejo mi correo " txz_c@hotmail.com "
y el enlace a mi blog
txz-producciones blogger
bueno es todo bye y grasias; 21/1/09
Rima Hi-Tech: Si quieres eliminar la barra original de Blogger lee este artículo:
Ocultar barra Blogger
Si quieres eliminar la barra personalizada que agregaste, bastará con seguir a la inversa el siguiente tutorial:
Barra superior; 21/1/09
the piinwy!!: hola stilounder...
si el mns de arriba es para mi... mmm
no no es la barra de menu personalizado la ke kiero kitar
es la cakita esa blanka donde buskas en google
es la ke sta ala derecha y tiene un boton ke dice buskar,
bueno mas presiso creo e nose puede, si me puedes ayudar te lo agradeceria,
ooo porcierto grasias por responderme
Texto enlace; 21/1/09
Anónimo: p_txz, para suprimir el buscador, borras esto en el primer código:
#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;}
Y esto en el segundo:
<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>; 21/1/09
Anónimo: estilounderground , gracias por intentar ayudar;); 21/1/09
Anónimo: Hola Rosa, me ha encantado tu opción de menú; lo he puesto en mi blog y todo muy bien, sólo que me gustaría colocarlo debajo del encabezado. ¿cómo hago para bajarlo?
Gracias y felicidades por tus blogs, estan excelentes!; 29/1/09
Anónimo: BlogEra, mira aquí mismo en el comentario número 71; 29/1/09
PedroX: Hola Rosa. Mira, quiero colocar este menu en uno de mis blogs, lo coloque y todo bien.. Cambie los colores y todo, pero cuando pongo un borde arriba sale descuadrado, en el codigo que das sale solo con borde abajo, pero en la imagen de ejemplo tiene un borde arriba.. yo lo quiero con borde completo, pero no se como hago.. Me sale todo un espacio grande arriba y fuera del cuadro.. AYUDA

Gracias!!; 1/2/09
Anónimo: Pedrox, en la imagen lo que se ve arriba que parece un borde, es el borde de la pantalla, ya que el menú lo coloqué en la misma posición que la navbar de Blogger.

Y es que por más que lo he mirado, no soy capaz a colocar el borde arriba sin que se deforme en el navegador :(; 2/2/09
Nathan yo: Te amo Rosa este truco si me funciono, y no te preocupes por la pregunta anterior ya alle el codigo; 10/2/09
Bernat Vivolas: Hola Rosa!

Primero muchas gracias por tu ayuda, hacía tiempo que tenia esta pagina guardada para ponerlo pero hasta hoy no he tendido suficiente tiempo. Ya lo he puesto y no he tenido ningun problema, incluso le he cambiado el color!

Pero mi pregunta es si habria alguna opción de poner tambien alguno desplegable, porque, como veras si entras en la pagina, es un blog deportivo, y me gustaría poner uno que pusiera "Equipos" y cuando pusieras el ratón encima, bajara otro menú con cada equipo... no se si es posible, si no, no pasa nada.

Muchas gracias.

Por si acaso, aquí tienes el blog, Aquí; 10/3/09
Anónimo: Sr. Taronja Has elegido un color que combina fantástico con el fondo del blog ;)

Mira, me has dado una idea, dame un par de días y voy a tratar de añadir submenús a la barra...si no me da problemas, publico una entrada.; 10/3/09
Bernat Vivolas: Muchas gracias! Dónde podré mirar si ya lo has logrado?; 11/3/09
Anónimo: Sr. Taronja Si lo consigo y que se vea bien en todos los navegadores, haré una entrada sin duda.; 11/3/09
Foncho: excelente blog rosa felicidades !!
mi pregunta es como hago para que el menu que pones de ejemplo me aparezca debajo del titulo de mi blog ?
este es mi blog: http://www.deportesdiario.blogspot.com

saludos.; 23/3/09
Anónimo: Foncho Lo mejor para eso es pegar su código dentro de un elemento HTML y arrastrarlo a debajo del header o en el crosscol.
Mira en los comentarios anteriores que hay algo de eso contestado.; 23/3/09
Foncho: muchas gracias rosa
por tu pronta respuesta, voy a intentarlo asi
como tu dices.; 24/3/09
Foncho: ROSA GRACIAS.
POR TU MUY ACERTADA EXPLICACION, YA PUDE PONER
EL MENU DEBAJO DEL TITULO.
TODO OK.; 24/3/09
Jonathan Pita: Hola Rosa, me ha sido de gran utilidad todo, y de hecho he puesto 2 de estas barras en mi blog. La pregunta es si puedo agregarle fecha y hora por ejemplo en el extremo izquierdo.
Es mucho pedir??? MIL GRACIAS!; 29/4/09
Anónimo: Jonathan Supongo que será mediante un script...la verdad no se que decirte, podrías intentar colocarlo igual que está el form del buscador...aunque, si me permites opinar, me parece una tontería añadir una fecha y hora por demás...todos tenemos eso en nuestro PC.
Para que cargar el blog con cosas innecesarias...digo yo:S; 29/4/09
Jonathan Pita: y cómo colocaría ese scrpt que tampoco sé como es??!! jeje
gracias por responder!!!; 30/4/09
Jonathan Pita: AH, PERDON, SE QUE NO ES ESTA SECCIÓN PERO PODRÍAS EXPLICAR CÓMO HICISTE TU "FOOTER" ESTA BUENISIMO Y ME GUSTARÍA TENER ALGO ASÍ EN EL BLOG! GRACIAS!; 30/4/09
Anónimo: Jonathan Pita Tampoco lo se yo ahora mismo ni lo tengo...quizás buscando en Google.

Lo del footer puedes verlo aquí:
http://elescaparatederosa.blogspot.com/2008/01/aadir-tres-columnas-en-la-seccin-del.html

Y para darles un mejor diseño aquí:
http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html; 30/4/09
blogenpracticas: Hola Rosa ¿puedes echarme una mano?
Estoy colocando un menu con buscador debajo de una cabecera dividida.
En principio todo funciona en explorer, pero luego vas a firefox y la visualización está desajustada de manera muy extraña.

He visto un ejemplo en: http://pruebasdeyk.blogspot.com/ en el que todo cuadra tanto en explorer como en firefox.

¿Qué hago mal? ¿Qué puedo hacer? Los ojos me hacen ya chiribitas después de siglos de pruebas viendo-cambiando código y nada de nada.

Mi blog de prueba es: http://practicandoconelblog.blogspot.com/

Un saludo y gracias de antemano,
Jorge; 2/5/09
Jonathan Pita: Rosa, dos cosillas:
1. qué debería modificar para que no quede espacio entre la barra de menu y el borde superior de la pagina (como lo tienes acá en el escaparate)?
2. lo mismo pero para que no quede espacio entre la barra y la imágen que tengo de cabecera??
MIL GRACIAS!; 2/5/09
Anónimo: blogenpracticas El ejemplo que has visto allí es este mismo...le han cambiado el color y demás pero es este :S

No puedo ver exactamente cual es el problema, aunque creo que es la colocación...trata de seguir la orientación de mi entrada y ayúdate de los comentarios también...; 2/5/09
Anónimo: Jonathan Pita Mi menú son solamente enlaces, lo que te parece la barra de fondo es la imagen del body.
Tendrías que poner a cero 0 todos los margin y padding del menú y de la cabecera...no se que efecto tendría eso en como se verá en los navegadores, supongo que mal...siempre es adecuado que hay algo de distancia para la buena visualización.
En breve voy a publicar una entrada sobre como hacer paso a paso un header con menú incluido como el mio...; 2/5/09
Saúl Sánchez Toro: Rosa. despues de hacer el menu, como se hace para alimentar la informacion de cada enlace? Por ejempl como se introducen los datos en tus archivos?; 5/5/09
Anónimo: Saul Sanchez Toro Mira en el comentario número 79, creo que es eso lo que preguntas...¿no?; 5/5/09
Anónimo: Hola Rosa. Primero muchas felicidades por el blog. Siempre que me surge una idea recurro a ti y nunca falla ¡tu biblioteca de archivos es impresionante!

Ahora se me ha planteado un problema y quería ver si puedes ayudarme (ya que en los comentarios no lo he visto). He incluido el menúbar y ocultado la navbar tal como has explicado y me ha quedado bastante bien excepto por un detalle, y es que me gustaría unirlo a la imagen de la cabecera pero no sé cómo. ¿Podrías indicarme qué debo hacer?

Por cierto, y ya que estoy. No he visto que hayas explicado (a lo mejor me lo he saltado) la forma de dividir el pie de página en varias columnas como lo tienes tú. Tengo algunas ideas y me vendría de perlas, ejeje.

Un saludo y muchísimas gracias por tu atención.; 5/5/09
Anónimo: Por cierto, el blog es este: http://almanatural.blogspot.com; 5/5/09
Anónimo: ZonaDu Es complicado lo que pides porque habría que modificar el código del menú para eso lo que haría que se viese mal en algún navegador...
Trata de aquí:
#header-wrapper {
width:850px;
margin:0 auto 10px;
}
Dejar el margin así:
#header-wrapper {
width:850px;
margin:0 auto;
}

Aunque ya te digo que siempre ha de haber una cierta distancia...

En cuanto al footer, pues si ;), te saltaste las entradas:
http://elescaparatederosa.blogspot.com/2008/01/aadir-tres-columnas-en-la-seccin-del.html

http://elescaparatederosa.blogspot.com/2008/01/modificar-las-columnas-del-post-footer.html; 5/5/09
COMOAS 2009: Hola ehh yo aquí como puedo saber cual es la fuente predeterminada he cambiado la página y no se! osea en sentido de qe he puesto el menu como configuro fuente y eso; 7/5/09
Anónimo: COMOAS 2009 Cuando leas una entrada, presta más atención...eso está contemplado en la entrada, en el primer paso, el CSS es donde se configura cualquier característica en el diseño del menú...
Si leyeses comentarios anteriores en muchos casos también te ayudarían...;); 7/5/09
Jonathan Pita: ROSA, NO TIENE QUE VER CON ESTE TEMA, PERO NO ENCUENTRO UN POST SOBRE EL TEMA, ASI QUE PERDONA PERO TE LO PREGUNTO AQUI: CÓMO HACES PARA PONER TU PROPIA IMAGEN EN LA BARRA DE NAVEGACION DEL EXPLORER? EN EL TUYO HAY UNA NENA SENTADA CON UNA COMPUTADORA.; 18/5/09
Anónimo: Jonathan Pita ¡Muy observador! ;) porque algunos hasta me han dicho que mi imagen es ¡un pájaro! ja,ja,ja, y no, como tu bien dices, es una nena en un PC :D

Mira aquí como se hace y usa los comentarios de esa entrada si tienes algún problema porque en ellos hay varias dudas resueltas:

http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html; 18/5/09
Amador López Criado: Hola de nuevo, Rosa. Después de muchas vueltas, dudas y planificaciones he optado por poner en el blog tu barra de menú con el buscador. Sólo quería darte las gracias por tu ayuda. Un abrazo.; 25/5/09
Anónimo: Amador López Criado Lo he visto en "para mi"...¡muy lindo! :D; 26/5/09
Amador López Criado: Hola Rosa. En "Para mi" es donde hago las pruebas. En www.cepaalcala.Blogspot.com es el "bueno". Si lo visitas verás que también he puesto una fecha arriba siguiendo tus indicaciones de otro post. Me gusta más la flecha con el movimiento deslizante con scriptacolous, pero tenía interés en que se leyera un pequeño texto (como el que hay) pero no he acertado a hacerlo. ¿Podrías ayudarme? Un saludo y gracias.; 26/5/09
Anónimo: Amador Tendrías que colocarlo así en el código de la flecha "deslizante" para que se viera como el que tienes:


<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>Volver<img align='right' alt='Volver arriba' src='URL_DEL_ICONO_FLECHA' title='Volver arriba'/>arriba</a>; 26/5/09
Unknown: Hola!! gracias por el menu con buscador..acabo de colocarlo en mi blog y funciona a las mil maravillas...ahora tengo un inconveniente con la pestaña de "suscribe feeds",como genero un enlace propio para que se suscriban a mi blog y modificar eso en el codigo q tan generosamente nos pasaste?.Mi nombre es Mauricio,de Venado tuerto,Argentina(mauriciomigoya@yahoo.com.ar)
http://centurycinema.blogspot.com/; 2/6/09
Anónimo: Morgan Roth Yo uso FeedBurner, pero independientemente de que uses cualquier servicio, puedes usar el que Blogger facilita por defecto que en tu caso sería:
http://centurycinema.blogspot.com/feeds/posts/defaultColoca esa url en lugar de la mía en el código (http://feeds.feedburner.com/blogspot/hnBy) y ya estarás facilitando la suscripción a tu blog.; 3/6/09
Manuel Alberto: Hola Rosa, gracias por lo de los atributos para los títulos de los comentarios. Ya lo aplico.
Por otro lado, coloqué el menú que explicas en esta entrada y quedé alejado de la cabecera. Intenté eliminar los márgenes en el CSS del código pero no pasa nada. Quité algunos márgenes del header (a ciegas, prueba y error...:S)y nada. Me ayudas?;)
Avibert; 13/6/09
Manuel Alberto: Quisiera que el menú quede pegado a la cabecera.; 13/6/09
Anónimo: Manfenix Ten cuidado si modificas algo del menú...se descompone fácilmente.

Mira en esta parte, y prueba a poner en 0 el valor de 5px, para mover hacia arriba la cabecera.

#header {
margin: 5px auto 0px;
border: 0px solid #446688; /* Cambiamos 1 por 0 px */
text-align: center;
color:#eeeeee;
}

Por cierto, que en comentarios anteriores hay bastantes dudas resueltas con respecto a este menú.; 13/6/09
Manuel Alberto: Gracias Rosa, modificando valores de la CSS, en un momento que estaba haciendo vista previa, desapareció el código de la plantilla. Suena increible, no?. Leyendo los comentarios, pude eliminar el buscador y cambiar colores de fondo y de texto.; 14/6/09
Manuel Alberto: Olvidé comentarte que el segundo código lo pegué como un elemento html en el crosscol. Esto afecta en algo?; 14/6/09
Anónimo: Manfenix Para nada, está bien. Puede ir tanto en un gadget como en la plantilla directamente.; 14/6/09
Carolina: Hola rosa como te va, la verdad es que aprendemos contigo, pero los comentarios de los que utilizan los trucos son geniales y a luego de tratar con todas las recomendaciones, sin resultado pues recorremos a ti. No entiendo porque mi barra no queda en el largo completo, despegada de la cabecera, intente ponerle el margen 0 pero se subia, y la foto de la cabecera como podre subirla, debo hacer otra mas pequena, he intentado hacer algo pero que va no me sale.

me ayudas again?
Thanks
bienesraicesdominicana.blogspot; 21/6/09
Anónimo: Carolina En esta parte del código de tu blog:
#header-wrapper {
width:940px;
margin:0 auto 10px;
border:0px solid #2d6e89;
}
Intenta cambiando margin:0 auto 10px; por margin:0 auto; o reduciendo el valor en 10px...

En cuanto a la barra con buscador, no puedes añadirla ahí, ya que está diseñada para que se adapte al 100% del espacio disponible donde la coloques.
Si la colocas en algún lugar que no sea el que indico en la entrada, no alcanzará el ancho de la pantalla, sino, el ancho del blog como pasa ahora.; 22/6/09
Unknown: Rosa que tal, una maravilla tu blog y una luz de esperanza tu conocimiento sobre el tema.
y te comento para felicitarte sobre este blog y para preguntarte como le corro el buscador a la izquierda ya que queda fuera del margen...

saludos y muchas gracias

mi blog es:
nelsims.blogspot.com; 12/7/09
Anónimo: NelSim Cambia en el CSS del menú, donde dice width: 950px; por 740px aproximadamente que es el ancho de tu blog, si aún sobresale reduce algo más.; 15/7/09
Pipi Pinto Orellana: Gracias Rosa

Un abrazo :); 16/7/09
Unknown: Muchas gracias Rosa!!!!

que pases un buen dia!; 16/7/09
Admin: Este comentario ha sido eliminado por el autor.; 3/8/09
Admin: Este comentario ha sido eliminado por el autor.; 3/8/09
Anónimo: 077dc El código de tu buscador no sirve para Blogger... Localiza esto en tu plantilla:
<div id='search'>
<form action='/s' id='searchform' method='get'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value=''/>
</form>
</div>

Y cámbialo por este otro código:
<div id='search'>
<form id="searchform" action="/search" style="display:inline;" method="get"><input id="s" name="q" type="text"/><input id="searchsubmit" value="Buscar" type="submit"/></form>
</div>

Usa Vista Previa, si el buscador se ve bien, tal como estaba antes, guarda los cambios y pruebalo...; 3/8/09
Admin: me gusto mucho gracias por tu ayuda; 4/8/09
Anónimo: Hola Rosa
Me encanta la idea de los menus pero me gustaria poder tenerlo como el de este Blog
Blog de Muestra
Me parece muy bonito y sencillo, pero en ninguna parte encuentro como hacerlo, te lo agradeceria si me ayudas.; 4/8/09
Anónimo: Yurika-Chan No me es posible atender a ese tipo de peticiones "a la carta"...tal vez un día lo explique, pero eso solo sería bastante más adelante...
No se si has mirado bien en ese blog, pues creo recordar que en alguna de sus entradas hace tiempo se explicaba como hacerlo...; 4/8/09
Lujo: Hola Hola Rosa,
Antes de nada, mil disculpas por interrumpir tus vacaciones. Soy seguidora tuya desde hace muuuuucho, aunque no participo de forma activa en tu blog.

He estado probando este menú que proporcionas y es genial pues funciona muy muy bien.

Quisiera hacerte una pregunta por si se te ocurriera una idea que explique por qué una vez puesto este menú, (y eliminada la navbar de Blogger), me queda una franja superior que no consigo eliminar. Curiosamente en Internet Explorer 8.0 no aparece esa franja y otros navegadores que uso, (Firefox, Chrome, Safari), sí.

Lo pregunto pues me dificulta poner el truco que usas para completar el diseño de la cabecera a ambos lados.

Gracias de antemano por tu respuesta y tiempo empleado.

Un abrazo.; 5/8/09
Anónimo: Lujo Intenta añadiendo un padding-top aquí:

#outer-wrapper {
margin: 0 auto;
padding-top: 0px;
width: 1020px;
text-align: left;
font: normal normal 112% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif;
}

Ten en cuenta que es prácticamente imposible diseñar para todos los navegadores...; 5/8/09
Lujo: Re - Hola Rosa,

Te agradezco un montón la idea que me has lanzado :). Creo que los ojos me hacen chiribitas :O pues he estado probando en todos los márgenes y paddings que pudieran estar relacionados. Sigo sin encontrar de dónde sale ese espacio en la parte superior del blog al eliminar la navbar.

Seguiré pensando sobre la cuestión. Si lo llego a solucionar vendré para contártelo.

Miles de gracias por tu ayuda ☺.
Espero que las vacaciones sigan siendo fantásticas.

Un abrazote!; 5/8/09
MONICA: hola excelente; 7/8/09
Bernat Vivolas: Hola!

He puesto otra cosa en la barra superior y ahora me queda el "Buscar" del buscador debajo de la barra, como puedo quitar el buscador o subir este "Buscar"??

Muchas gracias!; 11/8/09
Anónimo: Sr.Taronja Para retirar el buscador, eliminas esto en el código:
<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>

El menú se adapta al espacio en el que lo colocas, así que si tienes en el incluidos muchos enlaces, el buscador no tiene sitio y se "baja"...; 11/8/09
zethä: gracias por el tutorial, es fácil y bonito.

y me uno a la pregunta del sr. taroja, me enseñas a hacer un menú desplegable? quiero eliminar el archivo de la barra lateral, ocupa demasiado espacio..

gracias rosa : D; 26/8/09
ZaFoRe: Rosita! soy tu queridisimo amigo zafore!!!! quisiera saber como cambiar el color de fondo del buscador!!!; 26/8/09
Anónimo: zethä No se a que pregunta te refieres... un menú desplegable de que tipo...; 26/8/09
amasamune54: como puedo aumentar el número de apartados de la barra?; 26/8/09
Anónimo: Zafore Si, si, mi "querido amigo" que aún no ha ido a visitarme en la radio :(

Coloca en el CSS del menú, algo como esto:
#search-box {background: #dddddd;}

Cambia el código para el color, ya sabes...; 27/8/09
Anónimo: amasamune54 En el código html, siempre antes de </ul> tal y como están los demás, fijate que desde <li> a </li> es una pestaña.; 27/8/09
ZaFoRe: Rosa... no me explico como una persona de mi talla ha podido tener ese dezliz al escribir un comentario... lo que yo queria saber es "como cambiar el color del fondo del menú" y te he puesto el fondo del buscador... oju que mal estoy jajajja. bueno pues mi pregunta es esa entonces.

¿Rosa... como se cambia el color del menú?

y por cierto, como que no he ido a visitarte a la radio? yo desde que Cala dijo que dejaba la radio no he vuelto a pisar la radio. Cala daba un ambiente muy selecto! Pero tu estas de locutora o algo?; 27/8/09
c: Hola Rosa, te hago una nueva consulta, en el blog laiglesiasantacruz.blogspot.com, cambie la planilla. En el menú no logro que el botón NUESTRA HISTORIA, vaya a la entrada que tiene ese nombre y lo mismo el que dice LA PELICULA. El de inicio y el de contacto funcionan bien. Como puedo arreglarlo? Gracias, mARIA C; 27/8/09
Anónimo: ZaFoRe En la primera línea del CSS, ahí:

#navtop { background: #dcdcdc ;

Tengo una radio propia, que no te enteras de naaa:
http://elescaparatederosa.blogspot.com/2009/08/dejotas-radio.html; 28/8/09
Anónimo: c Sustituye en el menu el "false" que está en el herf por la terminación de la direccion de la entrada, por ejemplo, si la url es:
http://laiglesiasantacruz.blogspot.com/search/label/Nuestra historia

colocas solo la terminación respetando la ur de tu blog, es decir, en este ejemplo, en lugar de false colocarías esto:
search/label/Nuestra historia; 28/8/09

«El más antiguo ‹Más antiguo Total comentarios: 1 – 200 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.