Buscador de Blogger, personalizado: Arreglando el cuadro de búsqueda

Sin lugar a dudas el buscador de Google interno de Blogger es una genial implementación y a la vez poderosa herramienta para encontrar contenido en tu web y funciona mucho mejor si implementaste el envío de tu feed como un mapa de sitio.

Siendo sincero, esta es la primera vez que diseño una plantilla enteramente desde cero en Blogger, que pueden ver en esta dirección, donde he implementado todos los trucos de SEO que he aprendido con los años y muchos elementos que antes no les daba mucha importancia hoy los he replanteado, como el buscador interno en Blogger ofrecido por Google.

Primero que nada debe tener el Cuadro de búsqueda, para ello vaya a Diseño - Elementos de la página:

Y pulsa en uno de las barras laterales con un mínimo de 250px en Añadir un gadget:

Buscan el gadget Cuadro de búsqueda y pulsan en el "+":

El resultado debe verse así, que es bastante feo:

Lo queremos así:

Para ello, en Diseño - Edición de HTML en la sección de CSS pegamos:

/* interceptar diseño de google estilo 1.1 por matius */
input.gsc-search-button:hover {background:#A80000;}
td.gsc-search-button {padding:0 0 0 10px !important;}
table.gsc-search-box
{width:224px !important; /* ancho de la tabla */ margin:0 auto 0 auto;}
input.gsc-search-button
{margin:0 !important;
padding:5px;
color: #fff; /* color de la letra */
background: #000; /* color de fondo del boton */
border: 2px solid #fff !important; /* borde del botón */
}
input.gsc-input {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNHjEEjR5poiLEKOz0jq6MgfmqoJ7C5mFCig5apmrtmtnzs2n5XzL5mZT-r8w3GYVfrDr51J2nDxs_upOJulC_tzRGIh7KzA0eWlnEMzLvS269QJU_Fewa1JHLPRfxNaCtGRQkew/) 3px 3px no-repeat; /* la imagen de la lupa */
padding: 5px 5px 5px 35px !important;  /* Ultimo valor es la separación con el texto  */
width:150px !important; /* ancho de la entrada de texto */
color: #000;
border: 2px solid #000 !important;
}
.gsc-branding-text, .gsc-branding-img-noclear
{
display:none;
}
/* Fin de estilo para Google por matius */

Eso es todo.

Personalizando colores y anchos
El resultado será como abajo que incluye el efecto hover sobre el botón -mostrado en rojo- y centrado automático:

Si lo ponemos sobre un fondo negro vemos el borde del botón:

Si queremos cambiar el color del botón modificamos el fondo o background de la regla: input.gsc-search-button:

Si queremos cambiar el color del botón cuando pongamos el cursor encima, modificamos la regla: input.gsc-search-button:hover:

El buscador de Google genera un tabla, en este caso el valor es de 224px, la tabla se alinia automáticamente al centro, si quiere reducir su valor, modifique la regla table.gsc-search-box, pero también deberá quitar tamaño a la regla input.gsc-input cuyo tamaño es de 150px. Para que no se haga bola, si quiere la tabla de 200px, reste los 24 del corte a input.gsc-input para que ambas estén en proporción.

Si quiere cambiar el color de fondo de la caja de entrada de texto, cambie la regla input.gsc-input pero no olvide que el valor background corresponde al fondo de color de la caja y color al color del texto.

Si usa Google Chrome y no sabe como generar hexadecimales, vea la review de Chroma, que le permite generar colores hexadecimales rápidamente.