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.
CSS type set, es una herramienta practica que consiste en escribir un texto, darle un formato y mostrarte dependiendo del formato que le des, el código CSS en línea.
