Modificar el gadget de búsqueda de Blogger

Desde que Blogger publicó el gadget "Cuadro de búsqueda", sois muchos los que me habéis preguntado cómo podía modificarse, darle un estilo más atractivo y personal. En definitiva, adaptarlo más al diseño de vuestro blog.

Aunque este gadget presenta algunos parámetros de configuración, todos son referidos a la búsqueda y no a la imagen o diseño del mismo. Pues bien, aquí os voy a explicar como añadiendo unos sencillos códigos en vuestra plantilla, podréis modificarlo y adaptarlo a vuestro gusto.

El aspecto que este gadget presenta es este:

Y así podéis verlo en la sidebar izquierda de Blogsmadeinspain:

Yo he personalizado totalmente el botón, el color y tamaño de texto, y lo más importante, he quitado la publicidad de Google. Si queréis personalizar este útil gadget de Blogger, a continuación explico cómo hacerlo.

Leer completo...[+/-]

Lo primero, y para los que no lo habéis usado nunca, decir que para instalarlo en vuestro blog (normalmente en una sidebar) tenéis que entrar en "Diseño/Elementos de la página", pinchar sobre "Añadir un gadget" en la posición que vayáis a colocarlo, y dentro del cuadro de opciones que os sale elegir "Cuadro de búsqueda" (como en la siguiente imagen):



Veamos ahora por partes todo lo que podemos editar y modificar:

Eliminar la publicidad inferior de Google:

Localizar en la edición html de vuestra plantilla el código ]]></b:skin> y pegar justo arriba de él, estos códigos:

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

Solo con hacer esto, habrá desaparecido la frase de publicidad de Google.

Personalizar el botón de "Buscar":

En el mismo lugar que antes, pegar este código:

input.gsc-search-button { color: #ffffff; height: 31px; font-weight:bold; font-size: 14px; background: #cc0000; border: 1px solid #000000; }

Con color: definimos el color de texto de la palabra "Buscar".

Con height: el alto en píxeles del botón. También podríamos incluir width: 30px; para expresar la anchura del botón, aunque por defecto se adapta al tamaño de texto elegido.

Con font-weight: podemos fijar si queremos el texto en "negrita" (bold) o normal (normal)

En font-size: definimos el tamaño de la letra en píxeles.

En background: colocamos el color de fondo que queremos para nuestro botón, con el código hex correspondiente. En el caso de mi blog, yo he colocado una imagen hecha por mí, en vez de un color de fondo. Para hacer esto sustituir ese renglón completo por ...

background: url('URL COMPLETA DE LA IMAGEN') no-repeat;

Y por último en border: definimos el borde que tendrá nuestro botón. Primeramente el ancho en píxeles, después el formato de línea(solid - línea continua, dotted - línea de puntos, etc...), y al final el código hex del color que queramos para el borde.

Si alguno de estos parámetros queremos que aparezca el que tiene por defecto Blogger, basta con borrar el renglón de código que corresponda.

Personalizar la caja de búsqueda:

La caja de búsqueda es el recuadro donde se escribe el texto que buscáis. Por defecto tiene el fondo de color blanco y las letras de color negro, pero esto puede cambiarse. Añadir en el mismo lugar que antes este código:

input.gsc-input { color: #cc0000; background: #e6e6e6; }

En color: se define el código hex del color del texto que se está buscando, y en background: el del fondo de la caja de búsqueda.

Merece la pena hacer pruebas vosotros mismos, ya que este gadget es muy útil, está muy bien implementado y sus resultados se muestran de una forma clara, atractiva, y en la mayoría de los casos muy integrada con el aspecto general del blog.