Personalizar el "buscador de Google" en Blogger

Actualización: Versión mejorada de este tutorial en:
Buscador de Blogger, personalizado parte 1: Arreglando el cuadro de búsqueda.

Estuve revolviendo el CSS de todo mi template, aprendiendo un poco de las funciones  nuevas de Blogger y modificando aspectos como el buscador de Google que se puede agregar a nuestra plantilla como un gadget de nombre Cuadro de búsqueda.

El siguiente código CSS va comentado con /* */ y totalmente funcional, por lo que debe conservarse.

Eliminando la imagen y el texto "con la tecnología de Google"
Primero que nada el formato del buscador está incrustado en tablas, lo que hace difícil modificarlo, por tanto la solución obvia es ocultar la imagen y cualquier texto en esas casillas mediante display:none. así pues la primera regla CSS sería:

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

una vez aplicado el botón debe verse como:

El botón de buscar
Ahora si agregaremos (Vea los comentarios de cada parámetro, los comentarios pueden removerse, la especificación !important debe mantenerse):

input.gsc-search-button
{
margin:0 0 0 5px !important; /* el ultimo valor establece la separación del boton y el cuadro */
color: #fff;  /* color del texto */
background: #FF55AA; /* color de fondo del botón*/
border: 1px solid #fff !important; /* grueso, tipo de contorno y color de borde */
}

Con esta configuración el cuadro debe verse:

El cuadro de búsqueda
Este dará problemas porque ya hay una configuración establecida por Google y deberemos agregar !important al final de algunas reglas para obligar a que se respeten nuestros deseos

 input.gsc-input
{
float:right; /*alinea a la derecha el cuadro */

width:200px !important;  /*establece el tamaño del cuadro */
color: #FFF; /* Color del texto */
background: #2f7eb9; /* color de fondo del cuadro */
border: 2px solid #000 !important; /* grueso, tipo de contorno y color de borde */
}

El resultado debe verse:

Agreguemos una lupa
Si queremos agregar una lupa tendremos que agregar una regla con el mismo nombre del cuadro de búsqueda, sólo que con nuevos parámetros (Note que ya no podemos usar background a secas, mi sugerencia es que fusione esta sección con la anterior si desea hacerlo):

input.gsc-input {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNHjEEjR5poiLEKOz0jq6MgfmqoJ7C5mFCig5apmrtmtnzs2n5XzL5mZT-r8w3GYVfrDr51J2nDxs_upOJulC_tzRGIh7KzA0eWlnEMzLvS269QJU_Fewa1JHLPRfxNaCtGRQkew/);
background-repeat: no-repeat;
background-position: left top;
padding: 0 5px 0 30px !important; /* el ultimo valor es  la separación del texto y la lupa */
}

El resultado sería:

Dudas en comentarios, no correo.