La búsqueda personalizada de Google en Blogger

JMiur

La búsqueda personalizada de Google (Custom Search Engine) funciona un tanto diferente de los buscadores comunes que podemos utilizar en Blogger y se asemeja bastante al elemento que podemos agregar como gadget desde la pantalla de diseño aunque posee más opciones:

podemos incluir los sitios donde se realizará la búsqueda
los resultados se mostrarán en la misma página
se pueden filtar resultados
permite la inclusión de AdSense

Para utilizarlo, necesitamos tener una clave API que obtenemos acá y luego, ingresar en la página de Google y hacer click en el botón Crear motor búsq. person.

Una vez allí. comenzamos a definir nuestros parámetros:

Configurar tu motor de búsqueda agregando un nombre , una descripción y seleccionado el idioma.
Define tu motor de búsqueda: aquí debemos elegir dónde se harán las búsquedas y lológico, ya que se trata de un buscador interno, es colocar la dirección URL de nuestro blog pero podemos colcoar otras.
Selecciona una edición: obviamente,elegimos Edición estándar que esla única gratuita

Una vez que aceptamos las condiciones de uso, pasamos a la personalización donde seleccionaremos colores, fuentes o elegimos alguno de los modelos prediseñados:

Pero, sobre todo, debemos escoger el formato que tendrá la página de resultados y ahí hay tres alternativas, Ancho total, Compacto y Dos columnas. Hay que probar pero, en general, el primero es el que usaremos si queremso crear una página de resultados individual como por ejemplo, una página estática, el segundo es el que elegiremos si queremos mostar los resultados en la sidebar de modo reducido y el tercero si queremos que se vean en algún sector más amplio, por ejemplo, abajo del header o arriba de las entradas.

Cuando estemos satisfechos, hacemos click en Obtener el código y ya está; ahora, deberemos pegar el código allí donde quisiéramos que apareceiera el formualrio de búsqueda (por ejemplo, en un elemento HTML) y, si hemos elegido la tercera opción, deberemos agregar el DIV donde se mostrarán lso resultados:

<div id="cse" style="width:100%;"></div>

Y esto lo podemos hacer, directamente en la plantilla o dentro de algún otro elemento HTML, ubicándolo justo donde nos guste que se muestren.

Todo eso se puede modificar cuantas veces se quiera. Para eso, accedemos a nuestro panel y desde allí podremos administrar cada uno de los motores de búsqueda que hayamos creado, ver las estadísticas, etc.

Nada impide que, una vez agregado en nuestro sitio, podamos cambiar su diseño o ajustarlo. Cada modelo posee su CSS particular que puede ser descargado o modificado a gusto. Por ejemplo, podemos agregar el estilo en el mismo elemento HTML donde hemos colocado el código. Un ejemplo práctico:

<style>

 /* el formulario de búsqueda */
form.gsc-search-box { /* este es el rectángulo del formulario */
  font-size: 13px;
  margin: 0 0 4px;
}
input.gsc-input { /* el cuadro donde se ingresan las palabras a buscar */
  -moz-border-radius: 6px;
  background: #000 none repeat 0 0 !important;
  border: 2px solid #BCCDF0;
  color: #FFF;
  padding: 2px 5px;
  text-align:center;
  width: 155px;
}
input.gsc-search-button { /* el botón de búsqueda */
  -moz-border-radius: 6px;
  -moz-box-shadow: 0 0 10px #000 inset;
  background: #BCCDF0 none;
  border: none;
  color: #000;
  font-size: 11px;
  margin: 0;
  padding: 4px 7px;
  text-transform: lowercase;
}
input.gsc-search-button:hover {
  -moz-box-shadow: 0 0 10px #FFF inset;
}

/* los resultados */
.gsc-wrapper { /* el DIV contenedor */
  background-color:#000;
    color: #CCC;
    font-size: 12px;
}
.gsc-resultsHeader { /* el encabezado */
    border-bottom: none;
    margin-bottom: 0;
}
.gsc-results { /* el área de resultados */
    border: 1px solid #345;
    margin: 5px;
    padding: 10px;
    width: 95%;
}
.gs-result .gs-title, .gs-result .gs-title * { /* la primera línea con el título */
    background-color: #303941;
    color: #BCD;
    font-family: Tahoma;
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    text-decoration: none;
}
.gs-result .gs-snippet { /* el resumen de cada resultado */
    margin: 10px;
}
.gs-snippet b { /* la palabra resaltada */
    color: #CDE;
    border-bottom: 1px dotted #ABC;
}
.gs-snippet b:last-child {
    color: #CCC;
    border: none;
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
  display: none; /* no hace falta mostrar la RL si somos nosotros mismos */
}
.gsc-cursor-box { /* la paginacion inferior */
.gsc-results .gsc-cursor-box {
    border: 1px solid #345;
    font-family: Tahoma;
    font-size: 14px;
    margin: 10px 0;
    padding: 5px;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page { /* los números de a paginacion */
    color: #BCD;
    margin-right: 4px;
    padding: 2px 5px;
    text-decoration: none;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page { /* la página actual */
  -moz-border-radius: 2px;
    -moz-box-shadow: 0 0 5px #FFF inset;
    background-color: #303941;
    color: #FFF;
    font-weight: bold;
}
</style>

Que daría como resultado esto: