Modificar el gadget de búsqueda de Blogger | blogsmadeinspain

Aquí encontrarás plantillas para Blogger diseñadas por mí totalmente gratuitas, conocerás como se manipulan imágenes, fondos, texto, enlaces o links, los mejores widgets o gadgets, herramientas y utilidades, etc... Y además puedo diseñarte una plantilla exclusiva para tí, totalmente a tu gusto, y solo por 38 Euros.

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.

12 comentarios:

Gildo Kaldorana dijo...

Gracias, lo he puesto.
Un saludo

Canterell dijo...

Genial!!!
Muchas gracias, excelente explicación!!!

Saludos

Anónimo dijo...

Gracias, también lo he logrado, hay cosas que me faltan, pero de por sí esta muy buena tu pagina, con información muy completa y bien explicada.

pepo dijo...

Hola
He intentado modificar el gadget, tal como lo explicas.Y no me modifica los cambios efectuados.
¿Es posible que no funcione, con los motores de busqueda personalizados de google.Y las nuevas plantillas de blogger?
Espero tu respuesta
Saludos

Blogsmadeinspain dijo...

pepo, nunca lo he probado en las plantillas nuevas de Blogger. Pero en principio no debe haber ningún motivo para que no funcione.
Si alguno de mis lectores lo ha probado con alguna plantilla de las nuevas y sabe algo, a ver si puede contestarte.

Saludos

Bea dijo...

Yo lo he probado en plantilla nueva y sí que me ha funcionado.
Muchas gracias por la explicacion!

c.a.l dijo...

buenas tardes,yo lo agregué en la nueva plantilla y funciona perfecto,la unica contra que le encuentro es no poder cambiar ese color celeste en el borde del recuadro,saludos :)

Gorbeia dijo...

Gracias Blogsmadeinspain.
Me ha venido de cine, odio las propagandas esas.
Será posible hacer lo mismo con lo de ¨ Seleccionar idioma ¨ ?
Un saludo

Audrey H. dijo...

Gracias Blogsmadeinspain, a mi me funcionó todo menos lo de la imagen. Si la pongo, me sale el recuadro con las letras blancas pero sin fondo. Qué hago?

Blogsmadeinspain dijo...

Audrey, lo que me comenta puede ser debido a dos problemas:

* Que no hayas copiado exactamente el código html. Puedes haberte comido alguna de las comillas, u otro caracter.

* Que la dirección que hayas colocado como URL DE LA IMAGEN ALOJADA no sea correcta.

Revisa esos dos temas, verás como das con la solución.

Saludos

Gabriella Yu dijo...

¡Muchísimas gracias! ¡Me salió perfecto!

Natalia dijo...

Pues ya no existe ]]> en el nuevo. ¿Algo sin ello por favor?