JMiur [E]

En Blogger, agregar un buscador interno es sencillo, podemos usar el que nos muestran en Blogger Draft o bien, simplemente, usar los servicios de Google.

¿Cómo lo hacemos? Creamos un elemento HTML con un título cualquiera y luego, copiamos y pegamos el código que, en su versión más sencilla es algo así:
<form action='http://nombreblog.blogspot.com/search' method='get'>
<input type='text' value='' name='q' />
<input type='submit' value='Buscar' />
</form>
Donde lo único que hacemos es cambiar nombreblog por el nuestro.

El resultado sería este:


Para personalizarlo, podemos darle propiedades CSS, tanto a la etiqueta FORM que es el contenedor del formulario de envío, como a los dos controles INPUT que son los elementos visibles, donde ingresamos los datos y el botón.

Por ejemplo, para que todo se vea centrado y con un borde como en el ejemplo, le agregamos el parámetro style a FORM:
style="border: 1px solid #CCCCCC; margin: 0 auto; padding: 10px 0; text-align:center;"
Los controles también pueden modificarse con el parámetro style:

width: 200px;
border: 2px ridge #FFFFFF;
background: none;
border: none;
background: #FFFFFF url();
text-align: center;
color: #FFFFFF;
border: 2px solid #647586;
padding: 5px 2px 5px 30px;
background: #445566 url(URL_imagen) no-repeat 0% 50%;

Otra opción es cambiar el típico botón de los formularios por una imagen. Para eso el control INPUT debe ser levemente diferente:
<input type="image" src="URL_imagen" />

Si queremos forzar a que la página de resultados se muestre en otra pestaña o en otra ventana empleamos el mismo método que usamos con los enlaces, le agregamos el atributo target a la etiqueta FORM:
<form target="_blank" ....... >
En las etiquetas INPUT podemos colocar un atributo llamado value que será el texto que se mostrará por defecto. En el que funciona como botón es lo que veremos si no usamos una imagen. Ese texto determina el ancho del botón a menos que indiquemos algo diferente:
<input value="un texto" ....... >

El atributo value también podemos colocarlo en el otro control, por ejemplo, para indicar para que sirve aunque, sea evidente:


Este control podemos personalizarlo aún más utilizando los eventos onfocus y onblur; el primero se activa cuando hacemos click en el interior, el segundo cuando hacemos click en otro lado. Usando estos eventos, podríamos colocar un texto que, cuando usamos el control, se borra dejando el control en blanco y si salimos de él, restaura el texto del atributo value:
<input value='elTexto'
onfocus="if (this.value=='elTexto') this.value='';"
onblur="if (this.value=='') this.value='elTexto';"
....... />
Por supuesto, todo en la misma línea:


¿Agregamos más detalles? Hagamos que tenga un color de fondo más oscuro y que, al hacer click dentro, se aclare. Para esto, seguimos usando los mismo eventos:

this.style.backgroundColor='#FFFFFF'; // fondo claro
this.style.backgroundColor='#CCCCCC'; // fondo oscuro

Este sería el código:
<input 
type="text"
style="text-align: center; background-color: #CCCCCC;"
value='elTexto'
onfocus="if (this.value=='elTexto') this.value='';this.style.backgroundColor='#FFFFFF';"
onblur="if (this.value=='') this.value='elTexto';this.style.backgroundColor='#CCCCCC';"
/>
Que se vería así:


En algunos casos, lo que queremos es limitar la cantidad de resultados a ser mostrados. Si no lo hacemos, la página puede ser muy larga y por lo tanto tardará mucho. Para eso, lo que debemos hacer es agregar parámetros.

Una búsqueda de un palabra cualquiera en Google nos mostrará algo parecido a esto en la barra de direcciones del navegador:
http://www.google.com.ar/search?hl=es&client=firefox-a&rls=org.mozilla:es-AR:official&hs=eyQ&pwst=1&q=palabra&start=20&sa=N
No importa saber qué significa cada cosa sino que se han agregado parámetros a la búsqueda y eso se logra agregando etiquetas INPUT "escondidas". Por ejemplo, para limitar a 5 la cantidad de entradas a ser mostradas, usaríamos esto:
<input name="max-results" value="5" type="hidden"/>
Y el resultado que nos mostraría el navegador sería algo así:

http://miSitio.blogspot.com/search?q=palabra&max-results=5

39 comentarios:

Markos  

¡Interesante! Hasta hace poco* buscaba la manera de personalizarlo

¡Muchas gracias como siempre!
¡Un saludo!

*Hasta que entré aquí x)

Responder
JMiur  

Saludos, Markos, espero que te sea útil :)

Responder
Gem@  

Muy bueno, sabía como personalizarlos pero descubrir como añadir los elementos onfocus y onblur ha sido algo nuevo para mi.

Responder
JMiur  

Me alegro que te sirviera, Gem@

Responder
David Sardinero  

Muy bueno jmiur, enorme idea compartir esto con todo el mundo porque creo que puede ser interesante para mucha gente. Un abrazo!!

Responder
Luis  

Excelente informacion, ten encuenta que lo utilizare para los blogs..
Muchas gracias jmiur

Saludos

Responder
JMiur  

Gracias a ambos por los comentarios :)

Responder
Pato Howard  

En Dynamic Drive había un script para resaltar el texto buscado al entrar desde google pero ahora ya no funciona, hay alguna alternativa?

Responder
JMiur  

A veces, en Dynamic Drive cambian los enlaces, busca en el índice, si recuerdas el nombre del script, mejor.

Responder
Anónimo  

Hola, hago una cosulta.

Es posible sustituir el form por otro código?, pq explorer y el form como que no se llevan muy bien. El form en IE te crea una linea mas de la cuenta siempre, sin embargo en firefox no,¿Alguien sabe como solucinarlo?

Gracias por el blog ;)

Responder
JMiur  

Para un buscardor es necesario porque allí está "la acción" a realizar. Si FORM tiene alguna característica gráfica que no te guste, basta establecer nuevas propiedades CSS con style.

style="margin:0;padding:0;border:none;"

Si está en un post, todo debe escribirse en una sola linea.

Responder
Jaume  

Muchas gracias!! Me ha ido de fabula para mi blog!

Un pregunta, cómo puedo hacer para separar el boton del cuadro de busqueda?

Gracias!

Responder
JMiur  

Jaume:

Habría que saber exactamente cuánto quieres separarlo pero, una forma sencilla es colocarlo en una etiqueta P:

<p>
<input ........... />
</p>

Responder
Josefina  

cómo hago para que el fondo de mi blog sea de un solo color ?
espero pronta respuesta...
gracias !!!
Josefina

Responder
JMiur  

Tendría que ver tu blog para contestar.

Responder
BNV  

Gracias, me ha sido muy util la informacion.
Saludos,.-

Responder
Noisuf  

Hola, gracias por publicar temas interesantes, cuando agregue un buscador a mi web me sera de utilidad.

Ah me gustaria que postees unos temas interesantes que no he encontrado en otros blog,s creo que a nadie se le metio por la cabeza hacerlo.

Los temas son los siguientes:

Insertar o Incrustar un elemento sobre el Header(ejemplo: Buscador)

Agregar un icono feed a nuestro lector =).

Gracias =).

Responder
JMiur  

Intentaré hacerlo Noisuf :)

Responder
Noisuf  

ok gracias, sobre el buscador tiene que quedar sobre la imagen delheader, y sobre el icono feed, por ejemplo en el tuyo que dice suscripciones tienes el icono feed, el que te da feedburner por defecto, se puede cambiar? :P.

Gracias

Responder
JMiur  

El icono del feed puede ser cualquier otra imagen, la que quieras; eso no es problema.

Responder
Noisuf  

ah ok, pro como se cambia xD.?
por ejemplo he visto que los lectores de algunos blog tienen un icono personalizado y al costadito su contador de lectores.

Gracias =).

Responder
JMiur  

Tendría que ver dónde está colocado pero, busca el elemento HTML donde esté puesto y allí debe haber una etiqueta IMG:

<img src="LAIMAGEN" /&gt

Responder
Noisuf  

ok, lo probare cuando avance algo con mi log, y como haria incrustar un elemento sobre el header (cabecera) y que no me desconfigure el blog xD.

gracias =).

Responder
Calithos  

Hola Javier!! de nuevo leyendo cosas super interesantes! gracias por los aportes y como siempre son 10 puntos amigo.

Tengo una consulta como puedo personalizar el color de los links de los resultados del buscador Draft de Google que por default están en color azul? Perdona mi ignorancia , seguro hay algo que no leí .Muchas gracias nuevamente por tu ayuda.

Responder
JMiur  

La mayoría de los esas propiedades están en el mismo elemento; fijate en la plantilla con los artilugios expandidos y busca:

<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'>

Allí está el estilo:
<!-- override gsearch.css -->

El de los enlaces sería este:

#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:#XXXXXX;
}

Ese es el color.

Si la propiedad no está, la agregas.

Responder
Calithos  

Waoooo Javier no se como agradecerte! ..pero como dicen en la Argentina (en la cual he estado varias veces y de la cual gusto mucho) solo tengo que decirte: Che que grande que sos!! , seguí los pasos que me indicaste y todo salio a pedir de boca . Nuevamente MUY AGRADECIDO .

Responder
Sharck_Bloody  

hola, se podria modificar el cuadro donde se introduce el texto a buscar, poniendole los bordes redondeados?

Responder
JMiur  

Los elementos de una página web son rectangulares. Las curvas sólo son imágenes así que debería cambiarse bastante del código.

Responder
Uve  

Hola JMiur!!
He puesto un buscador en mi blog, y he añadido algo de lo que tu habías hablado... a la hora de mostrar el texto y que al clikar desaparezca.

Queda genial :)

Pero ahora, la pregunta es si podría también modificar el tipo de fuente que por defecto sale en el cuadro de busca, y poner una de las fuentes que estoy utilizando en mi blog :)

y claro, si se puede, también saber como hacerlo, por donde empezar a mirar, jeje, porque he probado varias cosas y no lo consigo :(

Responder
JMiur  

Uve: Fíjate que debes tener una definición en el CSS que dice esto:
#busqueda .txtField {
......
}
Allí están las propiedades del cuadro de búsqueda. Podrías agregarle una más, por ejemplo:
font-family: arial;
o el nombre de la fuente que quieres usar. Allí también está el tamaño de la fuente.

Responder
Uve  

Buaaa, Jmiur no se donde tenía la cabeza :S
Entré otra vez para confirmar eso, porque estaba segura que eso también lo había provado... el error era el siguiente:

font-size:angelina;
font-size:20;

jajaja en lugar de poner family :S

Perdona por las molestias

Responder
JMiur  

Me parecía raro porque vi que habías usado esa definición. Suele pasar :D

Responder
Tigremen  

Hola Master,
Agregue el widget de google que viene por default, pero no me muestra nada, cuando pongo un texto que se que existe en mi blog no aparece nada. Como podre hacer que funcione bien el buscador, el buscador es como el tuyo.

Responder
JMiur  

No creo que haya nada que pueda hacerse al respecto o por lo menos, lo desconozco. No tiene opciones más allá de las que ofrecen y que encuentre o no encuentre algo depende del contenido. Por ejemplo si no hay textos suficientes que puedan indexarse, es difícil que encuentre algo. Los buscadores no funcionan buscando una palabra exacta dentro de las entradas sino que usan algoritmos mucho más complejos.

Responder
Yago Mosquera  

Tengo un problema con onblur y onfocus, no me funcionan. ¿ Alguien sabe por qué puede ser?

Responder
JMiur  

Tendrías que mostrar el ejemplo concreto. Debe ser un error de sintaxis.

Responder
PS3 Argento  

HOla, buenisimo el blog la verdad, unos trucos excelentes pero nunca me funcina nada jaja. El buscador con el efecto onfocus y onblur me funciona cuando lo creo en una entrada y cuando lo pongo en el "wrap" que es donde yo uso el buscador no me funciona el efecto. Que podra ser? Gracias

Responder
PS3 Argento  

Disculpen pero ya lo arregle, ahora me funciona, resulta que en el wrap no funciona, funcion solamente en una entrada o en un gadget, es raro pero bueno, ya logre ponerlo y tuve que agregar un gadget arriba del header. Otra consulta se que no es el lugar pero ya que estoy, quisiera saber si se puede agregar un gadget entre el final del post, y el formulario de comentarios. Yo se que me vas a decir que lo agregue en el "post-footer-line post-footer-line-3" y estuve probando pero no obtengo los resultados que deseo, quisiera saber si se puede intermedia un gadget HTML ahi. El gadget que quiero agregar es de botones sociales, y esta al final del post de esta pagina: http://ps3argentopruebas.blogspot.com/. Desde ya muchas gracias.

Responder
JMiur  

EL elemento Blog es un "gadget" por lo tanto, no puede agregarse otro adentro de ese. No hay ninguna necesidad de hacerlo. Puede colocarse en la plantilla y el resultado será exactamente el mismo. Si no l oes, es porque el código es erróneo o el estilo no está bien armado.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR