Crear un buscador personalizable para Blogger

Un usuario me preguntó cómo hacer un buscador para el blog y que fuese personalizable, en el tutorial trataré cómo crear uno y a su vez que se pueda editar mediante CSS.

También mostraré unos ejemplos para que entiendan la estructura y para que puedan añadirlos en sus blogs.

El tutorial:

Paso 1: Creando el buscador:

Primero crearemos la forma del buscador básico mediante el siguiente código:

<form action='/search' id='buscador' method='get'>

<input id='texto' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Buscar&quot;;}' onfocus='if (this.value == &quot;Buscar&quot;) {this.value = &quot;&quot;;}' type='text' value='Buscar'/><input id='botonbuscar' type='submit' value='Buscar'/>

</form>

Veamos a qué corresponde cada color:

• Lo que está de color verde, corresponde al formulario contenedor, designado con el id ''buscador''.


• Lo que se encuentra de color azul, corresponde al texto del buscador, designado con el id ''texto''.


• El texto destacado en color naranjo, es el botón del buscador, el cual se ha designado con el id ''botonbuscar''.

Tendrá que quedar así:

Puedes alternar el orden de la estructura cambiando lo que está de color naranjo y azul:

Paso 2: Personalizando el buscador:

Ahora que ya tenemos la estructura definida y también los ids establecidos, procederemos a crear la síntaxis para el buscador:

#buscador { /*El buscador-form*/
acá van los atributos del buscador;
}

#buscador #texto{ /*Texto*/
acá van los atributos del texto que el usuario escribirá para buscar el texto;
}

#buscador #botonbuscar{ /*Botón buscar*/
acá corresponden los estilos del botón buscar;
}

Podemos agregar los estilos que queramos, sabiendo un poco de CSS podemos crear un muy buen buscador, veamos unos ejemplos y sus códigos (Están listos para agregar en un gadget ''HTML/Javascript''):

Ejemplo Estilo 1:

Código:

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


<style type="text/css">
#buscador { /*El buscador-form*/
height:34px;
width:300px;
padding:15px;
text-align:center;
background:#f5f5f5;
}

#buscador #texto{ /*Texto*/
width:185px;
height:19px;
background:#fff;
border:none;
padding:2px 5px;
font-weight:normal;
border:1px solid #969696;
color:#b0b0b0;

}

#buscador #botonbuscar{ /*Botón buscar*/
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLPS_bQ2aAs45DAvYndnb3QiU4gxsn57ZFIeY6aXnsk-NYQaRJn0-j2-KublWi_Ue_H7ROJXQspkz4-8Stq17ycktFZmsO8GBiU_FC7kc7cPyWPw6fRKR2pcQd4f0NwkPDGt1S8F4aeXk/s400/search.png) no-repeat left top;
width:70px;
height:24px;
margin-left:5px;
border:none;
color:#348bab;
}
</style>

Ejemplo Estilo 2:

Código:

<form action="/search" id="buscador1" method="get">
<input id="texto1" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Buscar&quot;;}" onfocus="if (this.value == &quot;Buscar&quot;) {this.value = &quot;&quot;;}" type="text" value="Buscar" /><input id="botonbuscar1" type="submit" value="." /></form>
<style type="text/css">
#buscador1 { /*El buscador-form*/
height:22px;
width:240px;
padding:1px;
text-align:center;
border-radius:45px;
border:1px solid #969696;
background:#f5f5f5;
}

#buscador1 #texto1{ /*Texto*/
width:185px;
height:15px;
background:#f5f5f5;
border-radius:45px 0 0 45px;
border:none;
padding:2px 5px;
font-weight:normal;
color:#b0b0b0;

}

#buscador1 #botonbuscar1{ /*Botón buscar*/
background:url(http://3.bp.blogspot.com/-Wps5gZmeMpI/Tlp4pZPJZRI/AAAAAAAABkg/w79Bz2I7vJw/s1600/search_button.png) no-repeat left top;
width:22px;
height:22px;
margin-left:0px;
border:none;
color:#348bab;
}
</style>

Ejemplo Estilo 3:

Código:

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

<style type="text/css">
#buscador2 { /*El buscador-form*/
height:28px;
width:240px;
border-radius:45px;
box-shadow:2px 2px 2px #86632b;
padding:10px;
text-align:center;
background:url(http://2.bp.blogspot.com/-UypdqilgKdw/Tlp8XcZuZLI/AAAAAAAABko/l5k6uxVb9b8/s1600/back_busqueda.jpg) no-repeat;
}

#buscador2 #texto2{ /*Texto*/
width:185px;
height:17px;
background:#f5f5f5;
border-radius:45px 0 0 45px;
border:1px solid #86632b;
border-right:none;
padding:2px 5px;
font-weight:normal;
color:#86632b;

}

#buscador2 #botonbuscar2{ /*Botón buscar*/
background:url(http://3.bp.blogspot.com/-nsCM0-MLa3U/Tlp74SVSVpI/AAAAAAAABkk/PusALviGiQQ/s1600/lupa_buscar.png) no-repeat left top;
width:24px;
height:24px;
margin-left:0px;
border:none;
color:#348bab;
}
</style>

Importante:

• Recuerda que los estilos que crees deben ir antes de ]]></b:skin>


• Los estilos los he creado sólo como referencias, pero puedes hacer mucho más a base de los ejemplos.