Añadir un buscador a un blog

Bueno en este post os intentaremos mostrar, de una manera sencilla como incluir un buscador que solo funcione en el blog; recientemente Blogger publicó un gadget buscador; pero claro lo casero sabe mejor. El codigo que os vamos a mostrar consta de dos partes, una que debereis incluir en un gadget de html/javascript de blogger; y la otra parte debereis incluirlo en vuestra plantilla del blog justo antes de donde pone:

]]></b:skin>

Bueno pues el codigo que debereis insertar en el gadget es este:

<form id="searchthis" action="/search" style="position:absolute;top:130px; padding-left:20px; display:inline;" method="get" align="left"><input id="search-box" style="font-family: Arial; font-size: 12px; text-align: left; width:303px; height: 18px;" name="q" size="30" type="text"/><input alt="Buscar" src="http://img341.imageshack.us/img341/1024/arrowright16x16xz9.gif" class="searchicon" value="Search" name="submit" type="image"/>
</form>

y el codigo que debereis insertar en vuestra plantilla es el siguiente:

.search-Box{
padding-left:0px;
}

.searchicon {
margin-left : -20px;
margin-bottom : -5px;
border : 0;
}

Cosas a destacar; pues en el primer codigo (en el del gadget) teneis un par de cosas que tendreis que tener en cuenta; uno es el vinculo de la imagen por si lo quereis cambiar:

src="http://img341.imageshack.us/img341/1024/arrowright16x16xz9.gif"

Y la otra parte de codigo que debereis de tener en cuenta es el de la posicion del cuadro de busqueda el cual es este:

;position:absolute;top:130px; padding-left:20px;

Donde pone "top:130px" segun aumenteis o disminuyais este dato el cuadro de busqueda subira o bajara; y donde pone "padding-left:20px" pues lo mismo pero de izquierda a derecha. Mas cosas veamos, si por ejemplo los px de posicion los poneis a cero, tal como esta el codigo el cuadro se situaria arriba de todo y a la derecha de todo; mas cosas; si sustituis "top" por "bottom" se alineara abajo de todo y si cambiais "left" por "right" pues imaginaos.

Mas cosas fijaos en esta parte de codigo: ;font-family: Arial; font-size: 12px; text-align: left; width:303px; height: 18px;" name="q" size="30" aqui podreis cambiar la alineacion del texto, el tipo y tamaño de la fuente y el ancho y alto del cuadro de busqueda; si haceis esto, si cambiais los tamaños tendreis que seguramente realinear la imagen que hace de boton de "buscar" esto lo podreis hacer en el codigo que introdujisteis en vuestra plantilla aqui:

.searchicon {
margin-left : -20px;
margin-bottom : -5px;
border : 0;
}


Facil ¿no?, ya vereis como si lo es. Un saludo