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.
En el sitio de 
Si necesitas un sitio incrustado dentro de otro en esta entrada sabrás como hacerlo. 
Tal vez para algunos es molesto ir a un blog y escuchar música sin pedirlo pero si tu deseas ponerle música de fondo que se escuche automáticamente, coloca después de la etiqueta <body> los siguientes códigos:
