Personalizar el botón de "Buscar"

En blogger hay un gadget para poner un botón buscardor en nuestro blog, pero es genérico y a través dfel blog de "El Perro de Papel" aprendí que se puede personalizar ese botón, así que vamos a ello.

Primero hay que crear un gadget HTML y escribir en contenido lo siguiente:

<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

Y ahora es momento de ir a la plantilla para añadir más códigos que nos van a permitir la personalización propiamente dicha.

Plantilla ---> Editar HTML

Y buscamos lo siguiente:

]]></b:skin>

Pues justo encima de eso tenemos que escribir lo siguiente:

#search {
width: 228px; /* Ancho del buscador */
height: 25px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: #8FE1D8 url(#) no-repeat;
border-radius: 10px 10px 10px 10px; /* Borde del marco del buscador */

}
#search-box {
margin-top: 3px;
border:0px;
background: #FFFFFF;
text-align:center;
border-radius: 10px 10px 10px 10px; /* Borde del cuadro del buscador */
}

He copiado tal cual el código que nos dan en El Perro de Papel, así que si lo dejáis tal cual os saldrá el buscador que ella tiene, y ahora es cuestión de irle cambiando los parámetros para personalizarlo al gusto de cada uno.

Si se añade border y border-color, se puede cambiar el tipo de línea y el color, tal y como lo tengo yo.

Sólo es cuestión de tener unos conocimientos básicos de HTML.