Añade un buscador a tu blog

Un buscador es un elemento que debe estar en cualquier blog para ser parte de la navegación dentro de tu blog. Esto es muy utilizado por los usuarios para encontrar algún artículo o publicación interesante, ya sean en periódicos virtuales o en páginas de videos (como YouTube).

¿Por qué interno?

El buscador que vamos a dar es interno y significa que al ingresar una palabra y buscar esta, sólo buscará en el blog en es que esté. Por eso internos, porque busca internamente sin buscar resultados en otras páginas.

Insertar un buscador interno

Con los párrafos anteriores quisimos dar a entender que es conveniente siempre navegar en el blog de uno mismo. Para esto daremos el código de un elemento básico interno:

<form action="/search" method="get"><input name="q" type="text"/></form>

Este código quedaría así:

Si lo copiaste y pegaste en una entrada o gadget, verás que el buscador está incompleto, ya que nisiquiera posee un botón. Pero en fin es un buscador porque al ingresar palabras, presionas enter y busca.

Completar el campo de búsqueda

Los códigos dados anteriormente son los códigos de un buscador básico. Ahora le daremos a este buscador un botón y algunos trucos para completar.

Agregar un botón

Para agregarle un botón debemos incluir al formulario (que tiene como función buscar) una etiqueta más luego de la etiqueta del campo.
La etiqueta para agregar el botón, es este:

<input value="Buscar" type="submit" />

entonces el código completo hasta ahora es así:

<form action="/search" method="get"><input name="q" type="text"/><input value="Buscar" type="submit"></form>

Y el elemento así:

Trucos para completar

1) Podemos hacer que en el buscador haya una palabra predeterminada para guiar al lector de que ahí es donde se debe tipear.
Código completo:

<form action="/search" method="get"><input value="Buscar..." name="q" type="text"><input value="Buscar" type="submit"></form>

2) Un truco muy visto en muchas páginas consiste en que al hacer click en el campo de búsqueda, el texto que tiene escrito desaparece. Como podemos ver en el siguiente ejemplo:
Código:

<form action="/search" method="get"><input onfocus="if (this.value == 'Buscar...') {this.value = '';}" value="Buscar..." onblur="if (this.value == '') {this.value = 'Buscar...';}" name="q" type="text"><input value="Buscar" type="submit"></form>

3) También existe algo similar al anterior que consiste en que el texto desaparece sólo al pasar mouse sobre el campo:

<form action="/search" method="get"><input onmouseover="if (this.value == 'Buscar...') {this.value = '';}" onfocus="if (this.value == 'Buscar...') {this.value = '';}" value="Buscar..." onblur="if (this.value == '') {this.value = 'Buscar...';}" title="teoriablogger.blogspot.com" name="q" type="text"><input value="Buscar" type="submit"></form>

RECUERDA:
El último recuadro que trata sobre lo que el buscador puede llegar a tener y más sea completo (botón y algunos trucos), son totalmente opcionales. Sólo publicamos para hacer más rica la entrada.

Posteado en: Buscadores,Códigos HTML,Elementos,Formularios,Intermedio