El gadget de búsqueda de Blogger

Blogger Publicado por Claudia en junio 1, 2009

La noticia del día es que Blogger ha sacado del beta su buscador, que antes sólo podía ser añadido vía Blogger in Draft. El buscador permite tres opciones independientes: buscar en tu blog, en los sitios que hayas enlazado, y en internet.

En sí, la gran novedad es que el gadget de búsqueda esté disponible para todos, lo cual puede ser de enorme utilidad para quienes no saben cómo añadir un buscador a su blog. Era algo que le hacía falta a Blogger.

Buscador Blogger

Desde que comencé a ver el buscador en algunos blogs, hace quizá un par de meses, no me llamó mucho la atención. Me pareció antiestético; quizás innecesario considerando las infinitas posibilidades de personalización de un buscador externo. Sin embargo, cambié un tanto (no totalmente) de parecer al descubrir la posibilidad de hacer pequeños cambios en el formulario.

Por ejemplo:

1. Eliminar el texto y el logo de Google (“con la tecnología de Google”):

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

2. Cambiar las propiedades del botón:

input.gsc-search-button {
color: #FFF;
background: #FF55AA;
border: 1px solid #ff0084;
}

Aquí también puedes cambiar las propiedades del texto (por ejemplo: font-weight:bold; font-size: 13px), o poner una imagen de fondo (background: url [tu-imagen] no-repeat), añandiendo otros atributos como “height” y “width” (un botón debe tener aproximadamente 60×20 píxeles).

3. Algunos cambios en la caja de búsqueda:

input.gsc-input {
color: #ff0084;
}

Puedes cambiar el color del texto, y también el fondo, pero no el borde. Por alguna extraña razón, Blogger no me deja hacer esto, a pesar de que las propiedades por defecto para el borde (de ese selector) son: border:1px solid #BCCDF0.

El resultado:
custom-search-blogger

Compártelo!
57 Comentarios en El gadget de búsqueda de Blogger
  1. Claudia dice:

    El código se agrega en Diseño/Edición de HTML. Antes tienes que agregar el gadget de búsqueda desde Diseño/Elementos de la página.

  2. Zahrah dice:

    Hola Claudia, creo haber leído todos los comentarios, y espero no se me haya pasado en alguno la respuesta a lo que quiero consultarte.

    Verás el fondo donde sale la lista de los enlaces que obtenemos me sale gris y casi ni se ven los texto, como puedo cambia ese color para que salga tranparente o blanco, ya que el fondo del cuerpo de mi blog es blanco.

    Desde ya Gracias.

  3. Leo dice:

    Excelente aporte. He intentado quitar el logo debajo de cuadro de búsqueda pero no lo he logrado. Me puedes echar una mano.

    #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:;

    .gsc-branding-text, .gsc-branding-img-noclear {
    display:none;
    }
    ???????????
    Se agradece el aporte

  4. alexis dice:

    hola todos los que visitan esta página son todos unos tremendos hijos de puta ecepto yo xd

  5. Mauro dice:

    hola no sabes por las duda como hacer para poner el boton de busqueda debajo del cuadro de texto

  6. posicionamiento web dice:

    muy muy buen tutorial, gracias por el gadget buscador

  7. Anabel dice:

    Hola Nelly, muchas gracias por este tutorial, es muy útil. Un saludo.

Deja tu comentario
Tu Comentario