Personalizar el buscador de google en blogger y su lista de opciones

En un rato libre me di a la tarea de configurar el cuadro de búsqueda de google y vaya que es sencillo de personalizar.

Para personalizar el buscador básico que tiene google en blogger:

Y que nos quede como este:

Se necesita implementar los siguientes códigos:

/* Eliminar con la tecnologia de google 
---------------------------- */
.gsc-branding-text, .gsc-branding-img-noclear {
display:none;
}

Como ves el código anterior, se le agrega display:none; para ocultar la imagen y el texto.

---

/* Configuración del botón del buscador 
---------------------------- */
input.gsc-search-button {
color: #FFFFFF; /* Color del texto del botón */
background-image: url(Url-de-tu-imagen); /* Imagen del fondo del botón */
border: 3px solid #2E2E2E; /* Grueso, tipo de borde y color */
}

Si prefirieras ponerle color de fondo en lugar de imagen, solo coloca en su lugar:
background-color: #FFCC00;

---

Aquí al revés, si prefirieras ponerle una imagen de fondo en lugar de color al cuadro, solo coloca en su lugar:
background-image: url(Url-de-tu-imagen);

/* Configuracion del cuadro del buscador 
---------------------------- */
input.gsc-input
{
float:right; /* Alinea a la derecha el cuadro */
width:200px !important; /* Establece el tamaño del cuadro */
color: #FFFFFF; /* Color del texto del cuadro */
background-color: #FFFFFF; /* Color de fondo del cuadro */
border: 2px solid #2E2E2E; /* Grueso, tipo de borde y color */
}

---

Una vez configurado el buscador y entrando con la lista de opciones para que nos quede como esta:

Es necesario ir a nuestra plantilla(guardar una copia antes de editarla) y expandir artilugios para buscar(con Ctrl+F) el siguiente código:

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:<data:linkColor/>;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: <data:dateColor/>;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: <data:urlColor/>;
}

#uds-searchControl .gsc-results {
border-color: <data:borderColor/>;
background-color: <data:backgroundColor/>;
}

#uds-searchControl .gsc-tabhActive {
border-color: <data:borderColor/>;
border-top-color: <data:activeBorderColor/>;
background-color: <data:backgroundColor/>;
color: <data:textColor/>;
}

#uds-searchControl .gsc-tabhInactive {
border-color: <data:borderColor/>;
background-color: transparent;
color: <data:linkColor/>;
}

#uds-searchClearResults {
border-color: <data:borderColor/>;
}

#uds-searchClearResults:hover {
border-color: <data:activeBorderColor/>;
}

#uds-searchControl .gsc-cursor-page {
color: <data:linkColor/>;
}

#uds-searchControl .gsc-cursor-current-page {
color: <data:textColor/>;
}
</style>

Ya que lo encontraste, lo reemplazas por este:

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:#FFFFFF; /* Color de los titulos */
background: url(Url-de-tu-imagen); /* Imagen de fondo de los títulos */
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:#FFFFFF; 
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color:#2E2E2E; /* Color de las fechas */
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color:#2E2E2E; /* Color de la Url del blog */
}

#uds-searchControl .gsc-results {
border-color:#2E2E2E; /* Color del borde del cuadro */
background-color:#1C1C1C; /* Color del fondo del cuadro */
}

#uds-searchControl .gsc-tabhActive {
border-color:#2E2E2E; /* Color de los bordes laterales de la pestaña seleccionada */
border-top-color:#2E2E2E; /* Color del borde de arriba de la pestaña seleccionada */
background-color: #1C1C1C; /* Color del fondo de la pestaña seleccionada */
color:#BDBDBD; /* Color del texto de la pestaña seleccionada */
}

#uds-searchControl .gsc-tabhInactive {
border-color:#2E2E2E; 
background-color: transparent;
color:#BDBDBD; /* Color del texto de las pestañas no seleccionadas */
}

#uds-searchClearResults {
border-color:#2E2E2E; /* Color del borde del icono cerrar */
}

#uds-searchClearResults:hover {
border-color:#1C1C1C; 
}

#uds-searchControl .gsc-cursor-page {
color:#BDBDBD; /* Color de los números de paginación no seleccionados */
}

#uds-searchControl .gsc-cursor-current-page {
color:#BDBDBD; /* Color del numero de paginación seleccionado */
}
</style>

---

A continuación te dejo el código en partes para que lo personalices como tu desees:

color:#FFFFFF; /* Color de los titulos */

background: url(Url-de-tu-imagen); /* Imagen de fondo de los títulos */

color:#2E2E2E; /* Color de las fechas */

color:#2E2E2E; /* Color de la Url del blog */

border-color:#2E2E2E; /* Color del borde del cuadro */

background-color:#1C1C1C; /* Color del fondo del cuadro */

border-color:#2E2E2E; /* Color de los bordes laterales de la pestaña seleccionada */

border-top-color:#2E2E2E; /* Color del borde de arriba de la pestaña seleccionada */

background-color: #1C1C1C; /* Color del fondo de la pestaña seleccionada */

color:#BDBDBD; /* Color del texto de la pestaña seleccionada */

color:#BDBDBD; /* Color del texto de las pestañas no seleccionadas

border-color:#2E2E2E; /* Color del borde del icono cerrar */

color:#BDBDBD; /* Color de los números de paginación no seleccionados */

color:#BDBDBD; /* Color del numero de paginación seleccionado */

---

Y por ultimo si deseas que el buscador cargue con un gif en lugar del texto loadign, lo puedes hacer buscando:

<span class='cse-status'><data:loadingMsg/></span>

Y lo reemplazas por:
<img src="Url-de-tu-gif" />
Puedes ver los 2 ejemplos funcionando en este mismo blog.


Si gustas aquí puedes encontrar de diferentes tipos de gifs animados.
Eso seria todo, espero y este truco te sea útil. Nos vemos en la próxima entrada.