Como Modificar el gadget de búsqueda de Blogger

Desde que Blogger publicó el gadget "Cuadro de búsqueda", son muchos los que se habrán preguntado cómo se puede modificar y así darle un estilo más atractivo y personal. En definitiva, adaptarlo más al diseño de tu blog.
Aunque este gadget presenta algunos parámetros de configuración, todos son referidos a la búsqueda y no a la imagen o diseño del mismo. Bueno, acá te voy a explicar como añadiendo unos sencillos códigos en tu plantilla, vas a poder modificarlo y adaptarlo a tu gusto.
El aspecto que este gadget presenta es este:








Y así podrás verlo una vez que lo modifiquemos :






Y he quitado la publicidad de Google. A continuación explico cómo hacerlo.

Lo primero, y para los que no lo han usado nunca, decir que para instalarlo en vuestro blog (normalmente en una sidebar) tenes que entrar en "Diseño/Elementos de la página", pinchar sobre "Añadir un gadget" en la posición que quieras colocarlo, y dentro del cuadro de opciones que nos sale elegir "Cuadro de búsqueda" (como en la siguiente imagen): Veamos ahora por partes todo lo que podemos editar y modificar: 

Eliminar la publicidad inferior de Google: Localizar en la edición html de vuestra plantilla el código ]]></b:skin> y pegar justo arriba de él, estos códigos:

.gsc-branding-text {display:none;} .gsc-branding-img-noclear {display:none;}

Solo con hacer esto, habrá desaparecido la frase de publicidad de Google.   

Personalizar el botón de "Buscar": En el mismo lugar que antes, pegar este código:

input.gsc-search-button { color: #ffffff; height: 31px; font-weight:bold; font-size: 14px; background: #cc0000; border: 1px solid #000000; }

Con color: definimos el color de texto de la palabra "Buscar". Con height: el alto en píxeles del botón. También podríamos incluir width: 30px; para expresar la anchura del botón, aunque por defecto se adapta al tamaño de texto elegido. Con font-weight: podemos fijar si queremos el texto en "negrita" (bold) o normal (normal) En font-size: definimos el tamaño de la letra en píxeles. En background: colocamos el color de fondo que queremos para nuestro botón, con el código hex correspondiente. En el caso de mi blog, yo he colocado una imagen hecha por mí, en vez de un color de fondo. Para hacer esto sustituir ese renglón completo por ...

background: url('URL COMPLETA DE LA IMAGEN') no-repeat;

Y por último en border: definimos el borde que tendrá nuestro botón. Primeramente el ancho en píxeles, después el formato de línea(solid - línea continua, dotted - línea de puntos, etc...), y al final el código hex del color que queramos para el borde. Si alguno de estos parámetros queremos que aparezca el que tiene por defecto Blogger, basta con borrar el renglón de código que corresponda.     Personalizar la caja de búsqueda:  La caja de búsqueda es el recuadro donde se escribe el texto que buscas. Por defecto tiene el fondo de color blanco y las letras de color negro, pero esto puede cambiarse. Añadir en el mismo lugar que antes este código:

input.gsc-input { color: #cc0000; background: #e6e6e6; }

En color: se define el código hex del color del texto que se está buscando, y en background: el del fondo de la caja de búsqueda. Merece la pena hacer pruebas ustedes mismos, ya que este gadget es muy útil, está muy bien implementado y sus resultados se muestran de una forma clara, atractiva, y en la mayoría de los casos muy integrada con el aspecto general del blog.   Fuente