24 abr. 2009

Un buscador en el Blog

Otra de las cosas esenciales a la hora de gestionar un Blog es incluir un buscador, puede que los lectores casuales no lo utilicen mucho, pero para nuestros lectores fieles es una practica herramienta para encontrar algún post que necesiten en el momento, obviamente es un método mucho mas rápido que la búsqueda manual.


El código básico es el siguiente:

<form action='http://nombreblog.blogspot.com/search' method='get'>
<input type='text' value='' name='q' />
<input type='submit' value='Buscar' />
</form>

Solo deben cambiar nombreblog por el del suyo, el resultado es el siguiente:




Personalizando con CSS

Como ven no es para nada bonito, pero tiene solucion, solo debemos personalizar con CSS tanto las etiqueta FORM como los controles INPUT.

En el ejemplo la etiqueta FORM tiene las siguientes propiedades:

style="margin: 0 auto; padding:10px; border:2px ridge #111"

De la misma forma podemos utilizar el parametro STYLE para personalizar los INPUT, veamos algunos ejemplos:


background: #FFF;
width: 200px;
border: none;
border: 2px ridge #111;
background: transparent;
text-align: center;
border: 2px solid #224466;
background: #336688 url(Tu Imagen) no-repeat;
padding:4px 20px;


Algo que se puede agregar, aunque es obvio, es un texto indicativo

<input value="el texto" type="text" ... >




También podemos cambiar el texto estándar del botón por algun otro:

<input value="el texto" ... >



O reemplazarlo por una imagen:

<input type="image" src="URL_imagen" />




Personalizando con JavaScript

Hasta aquí las posibilidades que ofrece el CSS, pero utilizando un poco JavaScript podemos agregar detalles realmente vistosos, como por ejemplo que el texto explicativo desaparezca al hacer click en la barra. Para esto utilizaremos los eventos ONFOCUS y ONBLUR, en código seria el siguiente:


<input value="elTexto" name="q" type="text"

onfocus="if (this.value=='elTexto') this.value='';"

onblur="if (this.value=='') this.value='elTexto';"

>

Ustedes deben escribirlo todo en la misma linea:

<input value="elTexto" name="q" type="text" onfocus="if ( ......... >

El resultado seria el siguiente:



Otro detalle seria modificar el estilo al hacer click en la barra, para lograrlo el código seria algo parecido a esto:

<input
type="text"
style="text-align: center; background-color: #223366;"
value='elTexto'
onfocus="if (this.value=='elTexto') this.value='';this.style.backgroundColor='#888888';"
onblur="if (this.value=='') this.value='elTexto';this.style.backgroundColor='#223366';"
/>

Lo remarcado en color rojo es lo que agregamos para modificar el estilo:

this.style.backgroundColor='#223366';

Parametro JavaScript para indicar estilo

Codigo CSS

Valor

Eso es todo, como ven solo hace falta imaginación. Las posibilidades para personalizarlo son infinitas, esta explicación es solo una guia. Tienen que animarse y probar.
El ha comentado!
hector

disculpa como lo lograste poner en el menu que tienes en tu bloG?

¿Desea hacer un comentario?

Diseño: Shark_Bloody
MDEQ® - Todos los derechos reservados