Buscador para el blog

Hace un tiempo, cuando comencé con mi blog, siempre me pregunté el porqué de que algunos blogs tenían esa barra que les permitía buscar y yo no la tenía. Pues en RecurS.O.S para tu blog e encontrado un excelente código HTML que podemos agregar normalmente al blog, aunque yo voy más allá y algo que aprendi en Pizcos Blog para darle un toque más personal y adaptada a nuestro blog.

(1) Para ponerlo el código es muy simple, en un elemento HTML:

<div id='busqueda'><form action='/search' id='busquedaform' method='get'>
<input class='txtField' id='s' name='q' type='text' value=''/>
<input class='btnSearch' id='busquedasubmit' type='submit' value=''/>
</form></div>

(2) Buscamos los ID's que facilita el código anterior para añadir un poco de CSS:

<div id='busqueda'><form action='/search' id='busquedaform' method='get'>
<input class='txtField' id='s' name='q' type='text' value=''/>
<input class='btnSearch' id='busquedasubmit' type='submit' value=''/>
</form></div>

(3) Para facilitarnos el trabajo, Pizcos, nos ayuda e inserta los ID's y confecciona el CSS que agregaremos antes la etiqueta ]]></b:skin>:

#busqueda {
width:233px;
height:60px;
background:url(URL ALOJAMIENTO IMAGEN DE FONDO) no-repeat;
}
#busqueda form {
padding:0;
margin:0;
}
#busqueda .txtField {
margin:20px 0 0 45px;
padding: 0 0 0 8px;
width:120px;
color:#000;
background:transparent;
font-size:11px;
border-style:none;
cursor:text;
}
#busqueda .btnSearch {
width:40px;
height:60px;
border-style:none;
float:right;
background:transparent;
cursor:pointer;
margin: 0;
}

Todo el código está ya listo para ser usado, solo hace falta cambiar la URL de fondo para comenzar a ver el efecto, si quieres ver uno online, visita Pizcos Blog.