62

Buscador interno personalizado

Partiendo del buscador que ya tenemos en nuestro blog vamos a personalizarlo como más nos guste para adaptarlo a la estética del blog o, simplemente, para hacerlo más divertido. :-)

El código que uso para el buscador del Escaparate es este, hay que ponerlo en un nuevo elemento html-javascript:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Vamos a sustituir el botón que viene por defecto, por una imagen, para ello cambiamos esta parte del código del buscador, que es la que corresponde al botón:

<input id="search-btn" value="Buscar" type="submit"/></form>

por esta otra:

<input border="0" alt="Buscar" src="http://img234.imageshack.us/img234/5551/magnifyingglassec3.gif" type="image"/>
</form>



Vamos a ir un poco más allá, y cambiaremos el color de la cajita de búsqueda incluyendo una imagen en su interior y colocándole un borde. Partimos del código anterior del buscador del Escaparate:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form>

Añadimos en el CSS de nuestra plantilla estas líneas de código, por ejemplo, antes de ]]><b:skin>:

.searchBox{
background: #FFFF99;
background-image:url('http://img234.imageshack.us/img234/3756/emoticonsmilenz6.png');
background-repeat:no-repeat;
padding-left:20px;
border: solid 2px;
border-color: #000000;
}
En estas líneas de código, será donde podremos hacer todos los cambios posteriores.

Ahora añadimos class="searchBox" en el código de nuestro buscador, por ejemplo detrás de type="text":

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"class="searchBox"/><input id="search-btn" value="Buscar" type="submit"/></form>
Esto hace que nuestro buscador automáticamente se vea como le hemos indicado en el CSS, así:


Modificaciones:

Aquí se cambia el color de la caja de búsqueda:
background: #FFFF99;

En esta línea podemos cambiar la url de la imagen por la que queramos usar.
background-image:url('http://img234.imageshack.us/img234/3756/emoticonsmilenz6.png');

Aquí modificamos el color y ancho del borde de la caja, cuanto mayor sea el número de px, más ancho será el borde y viceversa.
border: solid 2px;
border-color: #000000;

¡Suerte! ;-)

Entradas Relacionadas:

62 comentarios:


Rubén

Rosa, te he dejado este premio por la ayuda que me has prestado, es como un reconocimiento, aunque ya te lo hayan pasado, así que no importa si no lo sigues:

http://redlitos.wordpress.com/

Rubén

Perdona, que me equivoqué de enlace. El premio es éste:

http://felicituri.blogspot.com/2007/09/premio.html

DyDy

Hola Rosa saludos por aqui ando de nuevo con una duda, se que no tiene nada que ver con el post, pero es que no encuentro la respuesta, quisiera me ayudaras en algo porfavor: quiero saber como hacer esa "cajita" que tienes debajo de tu "enlazame" o sea como se hace esa cajita para escribir un codigo dentro?gracias de antemano y espero me hayas entendido, hasta pronto.

Rosa

DyDy, te he contestado en mi último post ;-)

Neo

Hola Rosa.

¿Por qué el buscador que acabo de crear con estos datos no me busca igual que a tí? A tí te salen los enlaces, a mí directamente me salen las entradas de la palabra clave que ponga en el buscador.

Mejor te pasas por mi blog y te enteras mejor de lo que quiero decir. Pon algo en el buscador y verás que no salen los enlaces y salen todas las entradas enteras.

Salu2.

DyDy

Muchas gracias Rosa, si lo estoy leyendo y gracias por nombrar mi blog en el tuyo, honor que me haces, saluditosssss.

Rosa

Neo, tienes que perdonarme, bueno tu sola no, todos, el código del post es el de mi antiguo buscador, te dejo el de ahora, el sistema para hacerle los cambios de color y todo eso es el mismo que explico arriba, para compensarte te dejo el código preparado para tu blog, solo has de pegarlo en lugar del otro :

<center><form action="http://search.blogger.com/" name="b-search">
<input id="b-query" placeholder="" class="searchBox" name="as_q" size="15" type="text"class="searchBox"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input value="neocinetv.blogspot.com/" name="bl_url" type="hidden"/>
<input border="0" alt="Buscar" src="http://img515.imageshack.us/img515/436/preview32x32jw5.png" type="image"/>
</form></center>

Neo

Una vez más gracias por todo y por ser tan atenta.

Ya lo tengo arreglado. Muchísimas gracias.

Salu2.

Rukia Kuchiki

Graciass, x fin pude poner un buscador muy sencillamente n_n, suerte, sigue así.

DyDy

Hola rosa, aqui de nuevo yo con mkis dudas, anduve perdida un tiempo pero ha sido por cuestiones de indole familiar, deseo saber si me puedes ayudar con esto del buscador para mi web,en blog me funciona muy bien, pero en mi pagina HTML que tengo en iespana, no consigo hacerlo funcionar, he de decirte que mi pagina no tiene pagina de estilos, solo la hice en HTML y marcos, es esta: http://didita.iespana.es
Te agradeceria mucho si pudieras ayudarme Rosa y disculpa tanta preguntadera, saludos.

Rosa

DyDy, siento no poder ayudarte mucho, y eso que tengo una web en iespana también, je,je.

Solo que es distinto el busca y muchas otras cosas, para blog y para web, el blog es como si tuvieras una sola página, para que me entiendas y la web son varias...

De todos modos, si que hay buscadores web, mira aquí a ver si te sirve de ayuda:
http://www.desarrolloweb.com/articulos/853.php

DyDy

Muchas gracias Rosa igualmente, tratare de buscar uno entonces de la web,saluditos y gracias

Antonio Herrera

Coquetón.

Sigo buscando por tu blog más recursos.

Gracias de nuevo por tu ayuda.

Saludos.

Bestiarium Vocabulum

Excelente, buscaba algo así.

Rosa

Bestiarium, me alegra que te sirva ;-)

Centro de Estudiantes de Arquitectura

Que tal, soy un usuario blogger no muy experimentado, y estoy utilizando este servicio de google para crear un entorno digital para el centro de estudiantes de arquitectura de la universidad catolica de Santa Fe Argentina.

Ya habia gregado un buscador interno a mi blog pero mi consulta viene a la siguienete, observando que tus conocimientos de html pueden ser mayores que los mios.

Como puedo hacer para agregar un blog mas al buscador?

Que quiero decir, quiero adjuntar al buscador no solo el blog principal si no tambien los otros blogs que tenemos para ordenar toda la info del centro. Los cuales se encuentran linkeados en el blog de entrada.

En sintesis te consultaba si sabias como realizar un "buscador multiple de blogs"

Rosa

Centro de estudiantes...
Verás hay una posibilidad de conseguir eso que buscas o, al menos,lo más parecido...
No se si conoces el buscador de Blogger in Draft, pues bien, este buscador te da la posibilidad si antes has añadido un elemento de página de lista de vínculos a tu blog.

Es decir, si accedes a Blogger in Draft, creas un elemento lista de blogs desde allí, y en esa lista incluyes los otros blogs que comentas, más tarde al añadir el buscador desde allí, hay una casilla "Internet" que hace que el buscador funcione también con los blogs incluidos en la lista anterior.

Otra forma no conozco...espero que te sirva esta.

Saludos.

Centro de Estudiantes de Arquitectura

Estare provando este elemento, espero poder hacerlo andar.

desde ya muchas gracias

Incubusxp "Nerd-e-Geeks.com"

Hola Rosa, primero que nada dejame felicitarte por tu blog, ya que es uno de los màs informativos y bonitos que he vito xD

Ahora te tengo una pregunta: Sabes como hacer para que el buscador, solo busque los tìtulos de los post, y no las palabras que contengan estos?

Rosa

Incubusxp "Nerd-e-Geeks.com", los buscadores buscan en el contenido general del sitio según las palabras que se introduzcan en el, estén en el título o en el contenido, la búsqueda no puede limitarse a los títulos.

DoN CeSaR

Buenos Dias Rosa, cuando pongo la imagen, luego que acepto, e intento buscar algo, la imagen se interpone en el espacio que voy a escribir y no logro ver las primeras letras... Se pudiera agrandar mas la caja ??

Rosa

DoN CeSaR, pues no, pero es que has puesto un muñequito demasiado grande.

Anónimo

Muchísimas gracias. Pero no consigo ponerle color ni borde al buscador en sí. Tengo un problema con mi blog porque el fondo es blanco, y el "normal" no queda bien.
Agradecería ayuda: blogereando@gmail.com
GRACIAS.

Rosa

Anónimo, lo único que podría hacer es volver a repertirte lo que pone en esta entrada, ya que precisamente es lo que se explica...

Protegon

Rosa quisiera por favor que me ayudaras con lo siguiente:

He colocado el buscador interno que aparece en esta página
http://blogger-adictos.blogspot.com/2007/05/buscador-interno-actualizacion_21.html

Pues mi pregunta es la siguiente. Cómo puedo hacer para que salgan más resultados a la hora de hacer la búsqueda?

Por ejemplo, cuando yo escribo One Piece y le doy buscar, el buscador ejecuta una opción y me aparece la página con 20 resultados, y en la barra de direcciones aparece este enlace:
http://protegon-works.blogspot.com/search?q=one+piece

Pero si yo cambio ese enlace y le agrego un &max-results=99999

me queda de la sigueinte forma:

http://protegon-works.blogspot.com/search?q=one+piece&max-results=99999

Aparecen muchisimos más resultados. Eso es lo que yo quiero! que me aparezcan tantos resultados como sea posible, que modificación debo hacerle a este código para lograrlo?

Gracias ;)

jackson

Oi Rosa, fiz um buscador interno para meu site infanto-juvenil O Brasileirinho, onde consegui colocar um desenho dentro do buscador do google.Basta entrarem em www.obrasileirinho.com.br e digitar qualquer coisa no busca para ver. Tenho aprendido muita coisa em seu site.

Rosa

jackson, siento no poder escribir en portugués...pero si te he entendido :-)
Paso a verlo.

Sidhe and Darky Dragonseeker

Hola Rosa!
Segui los pasos y me quedo genial, pero te quería preguntar.. ¿Qué debo hacer para que el dibujo de la lupa me quede dentro del box y además aparesca un texto?

Bueno eso sería todo :)
Graciaas

PD: Te agradesco un montón por ayudarme con el problemita de los comentarios!

Rosa

Sidhe and Darky Dragonseeker , para que aparezca dentro del box una imagen, puedes verlo aquí mismo, en la segunda opción usando css.
En cuanto a que aparezca un texto dentro de la cajita, añade un "value" en esta línea, así:
<input id="search-box" value="Escribe el texto" name="q" type="text"/>

Sidhe and Darky Dragonseeker

Ahhh... Rosa esta cosa me esta ganando!!!
Pude colocar el texto pero no logró que me salga la lupa dentro :(
Parece que lo voy a tener que dejar así nomás

Saludines
Chau

Rosa

Sidhe and Darky Dragonseeker , acabo de darme cuenta de lo que quieres exactamente...meter la lupa en el box y que funcione como fuera, o sea, que pinchando sobre ella comience a buscar...no puede hacerse, al botón imput ha de ir fuera.

Sidhe and Darky Dragonseeker

Rosa dime Sidhe, más cortito :) :)
..bueno será..
Muchas gracias por la ayuda.. por lo menos con el texto quedo conforme!!

Saludos desde Chile

Rosa

Sidhe, gracias ;-) si, era un poquito largo :-)

ERIC

Hola Rosa,soy ERIC otra vez.Se puede cambiar el color del texto que se escribe en la caja de busqueda por que en negro no se nota mucha con el fondo que puse yo.Para que veas te dejo el link http://buscadordelranchovirtual.blogspot.com desde ya muchas gracias.Que suigas creciendo con el blog.;)

ERIC

muchas gracias por la respuesta que me enviastes.:-L

ERIC

Carlos

Mil gracias Rosa. Primera vez por tu casa y seguro no será la última!

Toxik Boys

Hola Rosa :)
Muy hermoso quedó tu blog con las remodelaciones que le hisiste :)

Junto con agradecer la valiosa información que brindas en este post generosamente, me gustaria hacerte una pregunta muy humildemente.
La verdad simplemente me gustaría saber como podría hacerlo para que la barra del buscador sea un poquito más bajita, es decir, que las letras tamaño "small" queden justas.

(Espero no te moleste que use mi blog como ejemplo) si echas un vistaso a mi blog www.federaciontoxika.blogspot.com junto con el buscador hay una especie de explicación donde incorporo los mails mio y de un amigo. Quiero que la barra del buscador tenga la misma altura que la palabra "Bueno" con que comienza esa escritura (espero mi mi escualida explicación se entienda).
De hecho, si te fijas, la diferencia de portes entre la misma palabra "buscar" y el resto de las palabras de mi blog es notoria y me gustaria que eso no suceda.

Un fuerte abrazo fraterno! Cualquier duda no dudes en hacermela. Saludos!!

Rosa

Toxik Boys Doy por hecho que usas el código del buscador tal como está aquí...

Coloca en el CSS (ya sabes, antes de ]]></b:skin>) estas líneas:
.search-btn{
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
}

Así el botón tendrá el mismo tamaño y tipo de letra que tu blog.

Toxikboys

Si, es el mismo buscador que tienes acá.

Sobre lo que dices, no entiendo, donde es que debo agregar estas lineas?

En el codigo del buscador no sale en ninguna parte el ]]><....

Donde coloco esas lineas Rosa?
Disculpa mi cabeza dura y mi falta de conocimientos :$

Rosa

Tosikboys En edición html, donde se ve todo el código de tu plantilla.

Hijo De Judas

Rosa, no sabes como agradezco tu atención y paciencia...

Ya vi donde esta ese CSS, agregé el codigo que me dices antes del ]]><...

Sin embargo no hay resultados... esta todo igual :o
No se que pudo haber ocurrido, pegé el buscador que acá tienes, luego me fui al CSS, pegé el codigo que me dijiste

.search-btn{
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
}

...y quedo igual.
Que pudo haber pasado? no hay alguna solución?

GRACIAS!!!!!!!!!!!!!

Rosa

Hijo de Judas No veo el código colocado en tu blog, así que no puedo decirte que has hecho mal, lo que está claro es que algo no está bien, porque yo misma tengo eso aplicado más de una vez sin problemas...

San..

Muy buen truco!!!
Quedo justo como lo queria..

Si quieres.. dale una vuelta a mi pagina.. (http://corazondenuez.blogspot.com)y veras como he implementado muuuuuchos de tus datos....

Mil gracias Rosa!!

Denshou

Hola rosa, cuando agrego otra imagen que no sea la "lupa" no me sale alineada con la barra de busqueda. Como la alineo?

Rosa

Denshou Coloca en el CSS algo aí para el botón o la imagen en tu caso:

.search-btn{
padding: 2px;
margin: 2px;
}

He puesto 2pxpor poner algo...ahí has de "jugar" con los valores para aproximarlo a la posición que necesitas, por supuesto, siempre que la imagen sea de un tamaño adecuado, sino jamás te quedará bien ahí.

Lolo

Hola Rosita, coloque un buscador en mi página pero si hago una busqueda no encuentra lo que ya tengo, solo encuentra algunas cosas y otras no?, sabes que se debe?, muchas gracias!

Rosa

Lolo Depende... si usa el motor de Google para buscar, no encontrará lo que Google no ha indexado.
De todos modos, no son infalibles, siempre hay algo que se les escapa o que no dan con el lugar o entrada exacta...

ezeqdb

Hola, tengo la misma pregunta de #34, ¿cómo cambiar el color de texto de fondo de la caja? saludos!

kikop

@ezeqdb En la entrada @Rosa lo dice claramente:
Aquí se cambia el color de la caja de búsqueda:
background: #FFFF99;

#FFFFFF= blanco
#000000= negro

Si no conoces los códigos de colores mira esta tabla, donde dice Hexadecimal es el código para plantillas , html, etc. Recuerda siempre de agregar el # antes del código.

Saludos espero que te sirva.

BOFOCAT

hola rosa oye mira ya integre el buscador y todo pero solo quiero cambiar el tamaño del recuadro no de los bordes de antemano gracias eres super

Rosa

BOFOCAT Prueba añadiendo un width y un height en el CSS.

Antonio Ruiz

Hola Rosa, qué tal de nuevo.

Tengo un problema con mi buscador interno. Las ultimas entradas no me aparecen cuando las introduzco. Ya le pedí ayuda a Gema y después de varios correos me comenta que me dirija a tí. Estas ha sido las consultas, para no escribirlas te adjunto el enlace: http://gemablog-.blogspot.com/2009/09/mi-buscador-interno.html?showComment=1256244900412#c640353286899765327

Muchas gracias.

Besos.

Rosa

Antonio Ruiz Yo antes tenía uno distinto a este y hace días tuve que cambiarlo porque dejó de funcionar, probé varios y al final me decidí por este.
Parto de la base de que algo ha cambiado en la parte interna de Blogger que los buscadores internos no funcionan bien, al menos ninguno de los que he probado hasta ahora.
Con este lo que estoy observando es que el resultado de las búsquedas se centra en el contenido de las entradas y no en los títulos, es decir, coloco el título de una entrada en el y probablemente no me envíe a esa entrada, en cambio pongo una frase o dato del cuerpo de la entrada y, en general, si encuentra la que quiero...
Claro, esto para un blog como el mio en el que la gente pone algo como "mover sidebar" es bastante adecuado, entiendo que para otro tipo de blogs no lo es...
Sintiéndolo mucho, es lo más que puedo decirte al respecto... :(

Antonio Ruiz

Muchas gracias Rosa por tu respuesta.

Cambiaré de buscador. A ver por cual me decido.

Gracias nuevamente y un beso.

Ago

Hola Rosa! :D Queria preguntarte una cosa: el buscador qui tienes ahora en tu blog es este?
Me gustaria ponerlo como el tuyo...es decir, buscador de google, pero con la opcion de abrir una ventana con diferentes enlaces y que se puede cerrar, dentro a mi blog (propio como el tuyo)...como se hace?
Te envio un grandisimo abrazo y gracias por todos tus preciosos consejos
Ago :D

Rosa

AgoEl mio es el que Blogger proporciona en sus gadget... ve a añadir un nuevo gadget y escoge la opción "cuadro de búsqueda".

Ago

Ops Rosa :D no habia visto :D de todos modos gracias de todo corazon! :)

Bocha

Rosa, me quedo, por suerte anda, lo coloque en el menu horizontal que tengo en este blog: http://abrancancha-ac.blogspot.com/ pero cuando modifique el boton, este me quedo muy pegado a la cajita del buscador. Con que codigo puedo separarla. No solo lo quiero separar de la cajita, tambien quiero bajar un poco el boton, dime que hago.

Saludos y espero tu respuesta.

Rosa

BochaEl buscador tendría que estar dentro del menú para que tomara las mismas instrucciones... es decir, deberías colocar su código entre <li> y </li> en la última línea del menú que ahora está vacía...prueba ahí, y si no se muestra bien me lo dices...

ROBERTO BETO PINCETTI

Hola Rosa. Estoy tratando de instalar en mi blog un buscador interno. Instale el que tu propones y me muestra todas las entradas, no como en el caso de tu blog.
Estuve viendo en otro blog un buscador que tienen instalado alli,que poniendo una palabra en la busqueda te aparecen los titulos y los primeros escritos de las entradas como para hacer clic en la opcion que interese, muy parecido al que tenes vos. El que tu tienes dice al lado con la tecnologia google.El que te comento tambien dice con tecnologia google al lado.
Me puedes decir si es otro buscador??? Espero tu respuesta. Gracias disculpa la molestia.
Mi blog: http://elrefugiodelosmusicos.blogspot.com

ROBERTO BETO PINCETTI

Rosa te cuento que ya instale el buscador que vos indicas. El Blogger in Draft. Y anda de perillas. Lo unico que tambien salen las palabras que estan en los comentarios...? Y el tamaño no se como centrarlo o achicarlo (si se puede)??
Gracias...

Rosa

ROBERTOEl buscador se adapta al ancho del gadget donde lo incluyes...de todos modos prueba a ver con esto, colocado antes de ]]></b:skin>

#CustomSearch1{padding:0 30px 0 30px}

Los 30 son la distancia de cada lado del buscador al borde, puedes aumentar o disminuir según veas...

Publicar un comentario en la entrada

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.

:) :(( :( :P :D :$ ;) :I :X :O |O :S