Personalizando un poco los buscadores (1)

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