JMiur [E]

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:
  1. Configurar tu motor de búsqueda agregando un nombre , una descripción y seleccionado el idioma.
  2. 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.
  3. 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>

58 comentarios:

Anónimo  

Se ve bugeado en Mozilla Firefox versión 3.6.13 por alguna razón. Espero se solucione el problema , aparece el buscador en el titulo :S

Responder
La hormiguita  

Que bonito :)

Responder
John Mistery Doe  

Genial, hace tiempo que quería colocar este buscador, ya que el que tengo funciona fatal.

He elegido la opción de 2 columnas, pero no se donde colocar el código (div id="cse" style="width:100%;") para que aparezcan los resultados encima del titulo del post como lo tienes en este blog.

Además… ¿Seria posible cambiar el botón “Buscar” por una imagen?

Saludos JMiur!

Responder
JMiur  

En el blog no utilizo este buscador.

Puedes ponerlo arriba de las entradas si colocas ese código debajo de:

<div id="main-wrapper">

Responder
LNR  

interesante pero me gustaria colocarle una imagen de fondo como en tu buscador.

como se podria hacer?

Responder
John Mistery Doe  

Hola JMiur,

Me a surgido un desagradable problemilla, después de personalizar el buscador y conseguir sustituirlo por el que venia encima del header de la plantilla (Toda una odisea con mis limitados conocimientos) mi felicidad se vio truncada al descubrir que en internet explorer… el buscador se veía desplazado! Y el verdadero problema, es que contento con los resultados que veía en FireFox borre la copia de seguridad de la plantilla. ¿Tiene alguna Solución?

Saludos y gracias por la paciencia que tienes con los novatos como yo.

Responder
JMiur  

Lionel:
No uso este modelo. NE le que tengo (es similar), no hay una imagen sino un gradiente. Cualquiera de esas cosas, las puedes poner en esta regla:
#cse-search-form {}
o bien el DIV donde coloques el formulario de envio.

John Mistery Doe:
En IE8 se ve bien pero en IE7 no y tampoco se ve bien el banner de adsense. En el caso del buscador, estás usando esto para posicionarlo:
#topsearch {
padding: 15px 10px 0 300px;
text-align: right;
}
No uses paddings; prueba con float:
#topsearch {
padding: 15px 10px 0 0;
float: right;
}

Responder
John Mistery Doe  

Hola de nuevo JMiur,
Al cambiar “text-align: right” por “float: right” el buscador seguía desplazado hacia abajo y el botón Buscar se separaba muchísimo.
Supongo que tendré que resignarme. :-|

Gracias por tu ayuda:) Saludos.

Responder
LNR  

gracias por la data!

Responder
JMiur  

John Mistery Doe:
¿Estás seguro que has puesto float:right y le has quitado el padding?

#topsearch {
padding: 15px 10px 0 0;
float: right;
}

agrega tambien esto:

.gsc-search-box {width:250px !important;}

y deberás ver esto

Responder
John Mistery Doe  

Hola!

Puse float:right y le quite el padding tal como me explicaste en el comentario, pero como el desplazamiento era mayor lo volví a dejar como estaba.
Al ver que en el último comentario me preguntabas si estaba seguro, pensé que lo había hecho mal y lo volví a repetir pero el resultado fue el mismo. Pero al poner debajo .gsc-search-box {width:250px !important;} ¡¡¡Se soluciono!!!
Y no solo en IE8, también en Safari y Crome!

Te estoy muy agradecido por las molestias que te as tomado, si puedo devolverte el favor no dudes en decírmelo.

Muchas Gracias, Saludos!!!

Responder
JMiur  

Me alegra que funcionara. Pués sí, lo del ancho también parece que era necesario :-)

Responder
Anónimo  

Buenas!
antes que nada gracias por los tips que compartes y que me han sido de gran ayuda mas de una vez.

Y lo que que me gustaria saber es, si hay alguna manera de incorporar imagenes en los resultados de busqueda como por ejemplo en los de esta pagina : http://www.cookzillas.com/

Por lo que he ido encontrando, esto se podria hacer comprando una cuenta bussines etc... pero me gustaria hacerlo con la cuenta gratuita, solo unas imagenes en miniatura ya me servirian.
no se si me he explicado...

bue... gracias de nuevo.
un saludo! ;)

Responder
JMiur  

Lo desconozco; tendrías que consultar con los desarrolladores del API de Google mismo y ver qué cosas son accesibles.

Responder
BLOGDEMIGUELR  

Muchas Gracias JMiur....
Escogi la 3era opcion y ajuste el ancho style="width:100% a 60%, es decir, , lo coloque arriba de pueden darle un vistazo... http://blogdemiguelr.blogspot.com/

Responder
dioscaficho  

Disculpa mi ignorancia pero que se hace con el api Key, nada más se genera y ya? o habria que incluirlo en la plantilla del blog

Responder
JMiur  

No. La clave no es necesario agregarla en ningún lugar; sólo es necesaria para usar el servcio y el código que te darán será personal y exclusivo para tu dominio.

Responder
Unknown  

Hola JMiur:
Mi consulta es la siguiente. Se podría poner una imágen en vez del botón de búsqueda, de ser afirmativo, como???? Gracias.
Gabriela.

Responder
JMiur  

Sólo puedes cambair el CSS así que podrías intentarlo cambiando el fondo en esta regla:

table input.gsc-search-button {
background: transparent url(laimagen) no-repeat left top;
}

es un ejemplo genérico, podría ser cualqueir otra cosa.

Responder
Unknown  

JMiur, me funcionó todo bien, menos lo de poner los resultados encima de las entradas. No me sirvió lo de poner bajo < div id="main-wrapper"> ya que aparentemente mi diseño no cuenta con esa etiqueta.

Mi blog es http://notannuevo.blogspot.com por si deseas ayudarme, por ahora tengo el buscadorencima de las entradas... pero al ponerlo en la barra lateral y que los resultados aparezcan encima de las entradas entro en conficto. AYUDA! :)

Responder
JMiur  

Tu blog tiene una de las nuevas palntillas de Blogger as´ique las cosas se complican; busca:
<div class='column-center-inner'>
ese podría ser el DIV equivalente.

Responder
Unknown  

@JMiur: Solucioné el tema haciendo que los resultados salgan en una nueva ventana.

Pero ahora tengo un nuevo problema, el CSS. Al buscar el del estilo minimalista me sale esto: http://www.google.es/cse/style/look/minimalist.css Pero es excesivamente extenso, qué debo quitar de ahi?

Responder
JMiur  

No comprendo a que te refieres ya que eso es algo interno del mismo buscador de Google. L oque si puedes hacer es modificarlo agregando propiedades.

Responder
Unknown  

@JMiur, a eso me refiero :P Cuáles son las propiedades importantes a agregar? Ejemplo, la caja de texto, el margen del buscador, etc.

Responder
JMiur  

Eso depende de lo que quieras modificar; en el post hay una lista de algunas de las clases que definen las propiedades que controlan eso; depende del resultado final que quieras.

Responder
Unknown  

Hola JMiur, como puedo quitar u ocultar ese encabezado que dice algo como: "Aproximadamente x resultados (y segundos)"

JMiur  

Coloca esta regla y con eso ocultas esa línea:

.gsc-result-info {
display: none !important;
}

Responder
Unknown  

Se me olvido la otra consulta que tenía :) añadi

div id="cse" style="width:100%;"/>
justo debajo de:
div id="main-wrapper">
y me aparecen los resultados de busqueda arriba del post, hasta ahí todo bien, pero la cuestión es que al cargarse la página (antes de hacer cualquier búsqueda) el div id="cse" genera un espacio o desplazamiento de los post que vienen debajo. La pregunta es ¿como puedo hacer para que ese div no se muestre sino hasta que se realize una busqueda?

JMiur  

No sé en que blog está colcoado, en el que veo en tu perfil, no lo encuentro. Probablemente sea porque hay alguna propeidad genérica que establece alturas, márgenes o paddings.

Unknown  

El problema se encuentra en este blog: mundotelecomunicaciones.blogspot.com
Mientras carga el blog se observa el efecto de esa especie de desplazamiento que comente. Ya intenté algunas cosas pero no le encuentro solución al problema, :(
Gracias por la ayuda.

JMiur  

Ahí lo veo. Es raro porque eso no deberia ocurir. Prueba agregando esta reglas:

.cse .gsc-control-cse, .gsc-control-cse {
padding: 0;
width: 100%;
}

Unknown  

Yeee!! funcionó. Muchas gracias JMuir le agregué un !important al padding de esa regla y resultó, que "Master" eres :) gracias nuevamente.
Saludos.

Responder
ritmosymelodiasecuador.blogspot.com  

Hola Jorge, ahora te pido ayuda nuevamente y te comento que el buscador de Google no muestra ni una sola entrada de mi blog, lo hace con todas las demás: acceso desde aquí, internet, etc.

No se si tiene algo que ver con los sitemaps, cuando ingreso a las herramientas de webmaster encuentro lo siguiente:

URL bloqueadas Descargado Estado
1.120 Hace 1 horas 200 (Correcto)

o será que esta mal configurado, debo aclarar que el tema de la indexación es algo que no entiendo nada, si puede ser eso por favor por donde debo empezar a leer para ir aclarando el tema:

Saludos Master.

Responder
ritmosymelodiasecuador.blogspot.com  

me olvidé indicarte, el blog es el siguiente:

http://ritmosymelodiasecuador.blogspot.com

JMiur  

No veo problemas. Elbiuscador interno de tu blog lista páginas correctamente:
http://ritmosymelodiasecuador.blogspot.com/search%20;?q=Jaramillo&x=0&y=0

ritmosymelodiasecuador.blogspot.com  

Gracias Jorge, me refería al buscador ajax http://vagabundia.blogspot.com/2009/06/el-buscador-ajax-de-blogger.html

este es el que no funciona y puedes probarlo en mi blog en la pestaña que dice megabuscador, échale un vistazo y me cuentas.

obrigado

JMiur  

Ese, algún resultado devuelve pero poco. No hay nada que puedas hacer al respecto. Depende pura y exclusivamente de Blogger y Google.

ritmosymelodiasecuador.blogspot.com  

Parece que con blogger todo es incierto, gracias Jorge.

Responder
josepartengo  

Hola, Se puede hacer un buscador de comentarios?

JMiur  

Lo desconozco.

Responder
Anónimo  

Buen día JMiur, gracias por este tutorial!, me sirvio muchisimo, pero quisiera hacerte una pregunta, es que dentro de los resultados del buscador salen anuncios de google, y por ejemplo mi blog es de viajes, entonces al buscar la palabra viajes salen como primer puesto anuncios de google y pues no se que hacer para quitar esos anuncios no encuentro una opción en la pagina de editor de motores de busqueda de google ni tampoco en el codigo css que tu nos das, que puedo hacer?, podrias ayudarme?

Eso es todo por ahora JMiur, agradezco tu paciencia y ayuda, te deseo lo mejor!!! muchas gracias de nuevo!

JMiur  

No veo que salgan anuncios publicitarios cuando se hace una búsqueda en el blog; imagino que debe ser algo en al configuración del motor. No sé cuál es tu página para chequear y ver qué se ve allí.

Anónimo  

Hola Jmiur, gracias por tu respuesta y disculpa mi tardanza para reponderla pero no puedo por mi trabajo actual, pero esta semana estoy libre, quiero comentarte que yo hice el buscador en la pagina de la busqueda personalizada de google y lo puse es un blog aparte donde tengo los gadgets que encuentro para luego ponerselos a mi nuevo blog de viajes de Colombia, y apenas lo puse a mi nuevo blog, pero en el blog de gadgets me sale con anuncios, por ejemplo yo escribo "Viajar al caribe" y me salen anuncios de viajes, de hoteles, y otras cosas de google y lo que quiero es quitar eso, esa es mi pregunta ahora

eso me paso como a los dos dias de haberlo puesto y en el blog, yo hoy hace poquito puse ese buscador en mi blog de viajes y hasta el momento no me aparecen anuncios, pero me preocupa que al igual que el otro me salgan de esas cosas en unos dos dias o mas

por eso te pido tu ayuda, mira que veo que lo mismo le pasa a este blog, mira yo solo busque la palabra "ecuador" y ya salieron todos esos anuncios
es en esta url que yo copie:

http://ritmosymelodiasecuador.blogspot.com/2009/06/donaciones.html?cx=partner-pub-2474643868365406%3A9663505203&cof=FORID%3A10&ie=UTF-8&q=ecuador&sa=Search&siteurl=ritmosymelodiasecuador.blogspot.com%2Fsearch%2520%3B%3Fq%3DJaramillo%26x%3D0%26y%3D0&ref=&ss=1065j229407j7

Jmiur eso es todo por ahora me he alargado mucho pero quiero quitar todos los anuncios de mi blog porque no me gusta nada de eso

Te agradezco grandemente tu ayuda
como siempre tu blog es genial, el mejor que conozco, quisiera que el mio fuera como el tuyo pero lamentablemente no se como hacerlo pero la esperanza es que tu nos ayudas a todos

de nuevo un saludo desde el caribe de Colombia y hasta pronto!!!!!

JMiur  

Tal vez, agergando estas reglas, puedas ocultarlas:

.gsc-adBlockVertical {display: none !important;}
.gsc-adBlock {display: none !important;}

Responder
Anónimo  

Jmiur! muchas gracias, fijate que lo hice y ya no salio la publicidad!!!!!!!

Eres el mejor!!!!! te lo agradezco!!!! pero bastantisisisismo!
eres muy amable al ayudarme, de nuevo gracias!, y desde Colombia te envío un saludo deseandote muchos éxitos e invitandote a que un día vengas y conozcas este bello país!

de nuevo gracias o gracias otra vez!

hasta pronto Jmiur!!!!

JMiur  

Me alegra que funcionara, Julián.

Responder
bloggertest10  

Hola, estoy creando un blog, bueno primero estoy haciendo una plantilla básica basada en travel para luego cuando agregue más cosas dejarla de definitiva, me gusta este buscador para agregarlo, puse el gadget del buscador con la opción de mostrar los resultados debajo de la cabecera que es de la manera que más me gusta, el único problema es que al cargarse el buscador deja un espacio indeseado entre la parte inferior de la cabecera y la fecha de la primera entrada aun sin hacer ninguna búsqueda, de hecho antes había ajustado ese espacio, pero con ese buscador me dejo de vuelta ese espacio :( te cuento que solo lo hice poniendo 2 gadget, el buscador en el sidebar y los resultados debajo de la cabecera, hay alguna manera de evitar ese espacio entre los resultados del búseador y la cabecera? leí algo de lo que comentaban, pero no me aparecían ciertos códigos que mencionaban, espero me ayuden, gracias!

JMiur  

Tendrías que indicar claramente en un imagen cuáles son esos espacios que quieres eliminar.

Responder
bloggertest10  

Gracias por respoder! claro mira te dejo 2 fotos.

Esta foto es como queda al agregar el buscador en el side bar y el código como html debajo de la cabecera para que aparezcan los resultados ahí, se hace un espacio.

http://3.bp.blogspot.com/-bF9S_l74tf0/UJdIqQgEksI/AAAAAAAAAJo/jxZFzTrkLCc/s1600/Espacio+Blogger+2.jpg

Esta otra foto es sin el buscador y con el espacio que me gustaría que tuvuese agregando el buscador

http://2.bp.blogspot.com/-jeuSTNtj8xo/UJdIpucBMEI/AAAAAAAAAJg/Fghw5oO3-yI/s1600/Espacio+Blogger+1.jpg

Gracias, espero me opuedas ayudar ya que no lo puedo solucionar, Gracias!

JMiur  

Empieza agregando esta regla para quitar el padding y el borde que tiene el buscador:

.cse .gsc-control-cse, .gsc-control-cse {border:none;padding: 0;}

eventualmente, agrega !important;

.cse .gsc-control-cse, .gsc-control-cse {border:none !important;padding: 0 !important;}

bloggertest10  

En que parte exactamente debo poner eso? no me manejo mucho con los códigos y donde van las reglas y todo aquello.

Mira, este es el código que está agregado como html en el side bar:

.......... (function() {
var cx = '013896810151720587954:cukr3v4p46s';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); .................




y este es el codigo agregado como html bajo la cabecera:




En que lugar se agrega la relga que dices exactamente y como debo agregarla?

JMiur  

Las reglas de estilo van junto con las otras; por ejemplo, entre <b:skin> </b:skin> o dentro de una etiqueta <style> </style>

bloggertest10  

Que capo JMiur! probé y resultó! agregué .cse .gsc-control-cse, .gsc-control-cse {border:none !important;padding: 0 !important;} directamente en la plantilla (en eso estaba confundido, no sabia si agregar la regla en el gadget o la plantilla) lo hice después de guardé y funciomó perfecto. Gracias JMiur por ayudarme a solucionar esto que me tenía de cabeza. Saludos!

JMiur  

Perfecto. Me alegra que funcionara.

Responder
Unknown  

JMiur, gracias por esto, hace rato quería este buscador, solo me queda una duda, hay alguna clase que controle las imágenes de los resultados, para dejarlas de un tamaño fijo o que solo se muestre una parte

JMiur  

La clase que control la imagen cuando esta existe, dice esto:

.gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
border: 1px solid #E2E2E2;
max-height: 120px;
max-width: 60px;
}

así que es allí donde debería probar cambiar algo

Unknown  

Funciono como esperaba, muchas gracias JMiur

JMiur  

Perfecto :-)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR