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

Posts relacionados

Compártelo!

56 Comentarios

junio 2, 2009

Muy bueno tu articulo, pero tengo una duda.. donde debo aplicar esos cambios en que parte?

junio 2, 2009

Bajo las variables, donde está todo el código CSS.

junio 2, 2009

Barbaro!Me funciono perfecto. Muchas gracias por tu ayuda :)

E.S. mj-mexico.com
junio 2, 2009

Hola, es muy útil tu blog y está todo muy bien ordenado. Pero yo soy un tronco para esto y quiero colocar éste tipo de buscador en mi blog, (cómo el que tienes en tu cabecera donde sale un texto en el espacio para escribir y poder manipular los colores y tamaños), pero no sé donde están las ‘variables’ ni sé que es eso del CSS.
Hasta ahora me defiendo con el HTML y con la ayuda del buscador de palabras para encontrar lo que hay que editar pero está vez no estoy seguro de que sea ahí donde deba moverle.
Me podrías aclarar como encontrar la parte donde debo aplicar estos cambios, o si tienes algunas otras opciones para difernetes buscadores? Gracias.

junio 3, 2009

E.S., disculpa, no había visto tu comentario!
El buscador de Google permite cambios básicos, pero puedes ver en B&B cómo añadir una caja de búsqueda externa, con más opciones de personalización.
Si buscas las variables, mira tu plantilla (edición de HTML) y busca “Variable definitions” abajo verás las variables, que terminan con “*/”.
Saludos!

E.S. mj-mexico.com
junio 3, 2009

La verdad es que sigo sin entender. X_x
Lo que escribiste en tu post como ‘ejemplo’, eso lo tengo que ver en mi plantilla HTML? Porque no lo encuentro por ningun lado. O es que eso se lo debo agregar a algo que ya está?
Ya agregué el buscador, que sería el primer paso, pero ahora quiero editarlo, borrar el texto ‘con la tecnología de google’, cambiar el ancho del cuadro del buscador, texto y colores pero no sé donde.

junio 5, 2009

E.S: No, esos códigos no están en la plantilla. Hay que añadirlos ;)

El ancho debería cambiarse con algo como esto:

input.gsc-input {
padding-top:10px;
padding-bottom: 10px;
}

Algo similar para el botón.

Saludos!

Fabio Junior sistemasyweb.blogspot.com
junio 6, 2009

Hola está muy bueno este sitio.. tiene secciones excelentes, y en las categorías info muy útil. Lástima que no encontré algo relacionado con lo que necesito.

Es que yo uso una plantilla con un crédito de Bloggerized by Girlyblogger = chica blogger….

Podrías decirme como incluir Adsense debajo de los post….. pero en el html… Porq si se introduce en la entrada no me aparece. Eso es así??? si introduzco código html de los anuncios en las entradas o post o artículos etc… No aparecerán???

Tengo inconvenientes con Adsense.. generé 5 anuncios, obtuve 5 códigos de los cuales solo subí 3 pero solo me apareció el primero… Dos fueron dentro del html y otro fue añadiendo un gadget, este me apareció, pero luego sin hacer ningún cambio dejó de aparecer en el blog y me quedó el espacio en blanco por lo que tuve que eliminarlo.

Gracias por tu ayuda..

E.S. mj-mexico.com
junio 7, 2009

Muchas gracias, ya se los agregué y ha funcionado.

Ahora tengo una duda, es posible cambiar el texto de “buscar”?
Se puede manipular el ancho de el botón y del cuadro para introducir la búsqueda así como agregarle un texto de fondo?

Algo así como lo que tienes en tu cabecera.

junio 10, 2009

Fabio: Tienes que convertir el código y pegarlo en la sección de la plantilla donde quieras que se muestre el anuncio. Más info.

E.S.: Mira mis comentarios de más arriba :P
El texto del botón no lo puedes cambiar; pero puedes añadir una imagen que reemplace completamente al botón. El buscador de Blogger es algo limitado en ese sentido.
Si quieres algo más personalizable, tienes que añadir un buscador externo con HTML y CSS (en uno de los comentarios de más arriba dejé un enlace a Blog and Web sobre cómo añadir un buscador).

junio 13, 2009

Hay alguna forma de que los resultados del buscador solo me entregue el titulo del post y no todo el post entero???

ya que mi blog no es de novedad tras novedad, sino informacion sostenida, y derrepente hay cosas que quedan muy atras y es muy dificil que los visitantes las encuentren, entonces por ejemplo me gustaria uqe al momento de buscar, me aparezcan 50 resultados por pagina pero solo sus titulos, para que sea mas facil, dinamica y efectiva la busqueda.

junio 14, 2009

Santiago: Con el buscador de Blogger no puedes hacer eso. Tendrías que añadir un buscador externo, y añadir los siguientes hacks:

Controlar el número de entradas
Entradas expandibles para las categorías

Saludos :)

Fabio Junior sistemasyweb.blogspot.com
junio 18, 2009

Muchas Gracias Claudia!!!!!!!!!!!

E.S. mj-mexico.com
junio 21, 2009

Gracias por todas las aclaraciones Claudia, la verdad es que aunque tardé en entender cómo agregar uno externo, no me convencen los resultados, sobre todo por la forma en que presenta los resultados de búsqueda, me gusta más el resultado del buscador éste de google.
(Quizás haya alguna manera de editarlo?, pero ese sería otro tema).

Así que para eso fue muy útil tu post para borrarle lo del logo de google que no se veía muy bien, pero tengo una última duda, no sé cómo editar el ancho del cuadro de búsqueda (el botón de búsqueda si puedo, pero con el cuadro de búsqueda no lo logro).
Lo coloqué en mi barra lateral que mide 222 px, pero no aprovecha todo el ancho, ¿cómo podría manipular eso?
Y ya que estamos, cuando coloco una imágen o video de youtube en mi barra lateral tampoco aprovecha todo el espacio, es cómo si tuviera un margen a la izquierda… ¿cómo puedo hacer para colocarlos en todo lo ancho de mi barra?

Gracias y espero puedas ayudarme.

junio 23, 2009

E.S.:
Nota que tu sidebar tiene 222 píxeles, pero los widgets de tu sidebar tienen una medida menor:

.sidebar .widget, .main .widget {
margin:5px;
padding:5px;
}

Eso significa que tienes 20 píxeles menos por lado (un ancho real de 182 píxeles).

Ahora, el buscador se adapta al ancho del widget. El widget del buscador tiene 95% píxeles. Tendrías que buscar el siguiente código (con los artilugios expandidos), y modificar su valor a 100%:

<div class='widget-content' style='width:95%'>
sebastian g amoalplaneta.blogspot.com
junio 25, 2009

Se los agradesco mucho realice los cambios en mi blog y me quedo perfecto.

para los que no saben donde estan las variables vallan a diseño o plantilla y luego a edicion de html y al principio mas o menos buscan este codigo
/* Variable definitions
====================

Pablo pablorovner.com
julio 15, 2009

Muy bueno tu post! Quería saber de paso si tenías idea de como puedo hacer para cambiarle las propiedades al título del widget. Saludos.

julio 18, 2009

Depende de lo que quieras hacer con el título del widget, y de si quieres cambiar las propiedades sólo para ese widget, o para todos ;)

Miguel Angel Gallego Caro formadores-ocupacionales.blogspot.com
julio 20, 2009

Hola !

Un post perfecto!! He podido manipular la barra de google y modificarla tal y como decía, sin ningún problema!! :-D

Intente por mi cuenta hacer que desaparecieran las líneas que rodean al cuadro de búsqueda, así como el espacio tan exagerado que la separan del siguiente Gadget… pero he tenido que cargar una plantilla anterior pq me cargue algún margen que no debía (eso pasa por tocar sin saber jajaja).

Dicho margen afecta igual a la barra de traducir de google, me deja un espacio inmenso.

¿Dónde puedo controlar estos márgenes, se pueden modificar uno a uno según las preferencias o también se puede de forma genera?

Me gustaría que me ayudarías si sabes cómo quitar las líneas y ese pedazo de espacio (ocurre lo mismo con el Gadget de “Suscripción por correo” tiene un recuadro muy grande, con líneas interiores).

¿Por qué salen en mi blog dichos cuadros y modificaciones en el margen?

Muchas Gracias ¡¡¡

julio 21, 2009

Hola Claudia.. Ya he logrado tener el motor de busqueda como tu lo explicas. La duda que tengo es, así como tu, en la imagen, has puesto: “Hola:)” ¿Es posible ingresar algún mensaje que quede fijo? Así como dentro de los motores como google aparece: “google”.

julio 22, 2009

Miguel Angel: No sabría responderte bien, porque tendría que estar en tu blog. Son muchas modificaciones manuales con CSS y HTML :(
El código del widget de Feedburner puedes modificarlo *algo* cambiando su ancho y su alto, los cuales en el código que añadiste son “width=550″ y “height=520″. También tiene que ver en parte con los márgenes de los widgets de tu plantilla:

.sidebar .widget {
margin: 10px 10px 5px 7px; padding: 0;
text-decoration: none;
}

Ten cuidado con lo que vayas a modificar :P

Nico: Podrías añadir una imagen fija como fondo (en input.gsc-input), pero sólo eso. El buscador de Blogger es muy limitado en cuanto a las posibilidades de personalización.

julio 28, 2009

ok gracias Claudia. Tambien pude agregar una pequeña lupa. No es mucho, pero a mi me ha costado, ya que soy un poco tronco en esto.

Este es el blog: http://siete-soles.blogspot.com/

Gracias..

julio 28, 2009

Quedó bien eso :)

septiembre 27, 2009

Pero tu barra de búsqueda no es la de google… A mi e gustaría saber donde se consigue una barra de búsqueda interno, que símplemente me busque las entradas de mi blog. Sabes onde están eso gadgets????

septiembre 27, 2009

Yo logré cambiar el borde de la caja de búsqueda agregando por ejemplo:

input.gsc-input {
border-style:ridge;
border-width:2px;
border-color:#D8FFEB;
background-color:#FFF
}

septiembre 27, 2009

Keko: Mira el enlace a Blog and Web en uno de mis comentarios de más arriba ;

Gabriel: Gracias por el dato ;)

sebas amoalplaneta.blogspot.com
octubre 15, 2009

hola quisiera saber como puedo hacer para ponerle una imagen de fondo al buscador

octubre 17, 2009

Sebas:

input.gsc-input {
background: url(la-direccion-de-tu-imagen.jpg);
}

;)

maye desarrollandominegocio.blogspot.com
octubre 20, 2009

Hola Clau, tengo un mes aprox que uso blogger, hasta ayer todo bien pero hoy inserte un adsense de busqueda y al finalizar la insercion del codigo del buscador y de resultados del buscador y publicar la entrada, me topo con la sorpresa que todas las entradas tienen un espacio en blanco terrible entre el titulo de la entrada y el texto, inserte un gadget para html y ahi puse los codigos,,,

porfa dime como soluciono esto para eliminar estos espacios tan feos,,,

matius cgnauta.blogspot.com
octubre 21, 2009

El borde se puede cambiar usando |important

input.gsc-input

{border: 2px solid #color !important;}

melanie info-varia.blogspot.com
noviembre 17, 2009

hola yo lo agregue el buscador dde google el tema que no se que tiene que decir lei que dijistes que esta en donde dice variable pero no lo encuentro quisiera que me digas que tiene que decir especificamente asi yo copio y pego porque no me llevo muy bien con los codigos HTML

noviembre 21, 2009

Melanie:
Simplemente pega el código antes de ]]></b:skin> ;)

noviembre 27, 2009

Muy bueno. Y cómo hago para colocar este buscador o cualquiera en un lugar como por encima del título, en la cabeza del blog.

noviembre 29, 2009

Hola excelente blog!!

Quisiera saber si sabes de algun buscador para blogger que solo busque y encuentre el titulo de las entradas no el texto.

Si sabes de alguno gracias^^

chobed bychobed.blogspot.com
diciembre 1, 2009

Hola!!
Mira yo habia puesto el buscador de adsense en mi blog, pero 1.No le hacen muchos clics a la publicidad (creo q ni aparece) y 2 tienen que ir a otra pagina.
ahora, lo bueno de ese fue que lo pude modificar para ponerlo dentro de una barra.

Pero quiero cambiarlo por el de blogger, que muestra los resultados en ese cuadro y con tabs. Me gusta como queda porq lo he probado, la cuestion es que no se como meterlo a la barra.

Hay alguna solucion??
chekea mi blog: hillsongencastellano. blogspot. com
(quiero que el cuadro de busqueda de blogger este en el lugar del actual.)

chobed bychobed.blogspot.com
diciembre 2, 2009

ash!!
Tengo otra pregunta y perdon q no sea del tema..es q no se que hacer!!!!
mira cuando estoy en el tag videos de mi blog, la sidebar se va para abajo!!!!….
por favor chekealoo!!
hillsongencastellano. blogspot. com/search/label/videos

En home todo esta normal..no se cual sera el problema.

Ah y otra cosa! como puedo poner un cuadro de adsense solo despues del 1er post. (solo hayo la manera de que salga en todos los posts o 3 veces con el deafailt de blogger.)
PORFA responde mis preguntas…. !!!

un saludo!

enero 10, 2010

Muy bueno, muchisimas gracias ;) Funcionó!!!

Elvin Gonzalez Shejab tecmaniaco.blogspot.com
marzo 14, 2010

Excelente!!!!…..casualmente estaba buscando algo parecido para poder cambiar ese cuadro de busque para que se ajuste al color de mi blog…..y como soy buevo en esto de los blogs era un verdadero lio………Esta muy bueno tu blog….saludos

Rafael J. garcía gobernarelmundo.blogspot.com
junio 26, 2010

Hola:

¡Cómo te lo curras!
Tengo un problema, espero me puedas ayudar. He colocado este gadget en mi blog, y no me encuentra nada. En el buscador de google tampoco aparece mi blog, y ya lleva un par de meses con más de 20 entradas, y ya se me va haceindo necesario un buscador. No sé si tiene algo que ver con los feeds, porque no entiendo, pero creé unos feed con feedburner. Modifico el blog casi todos los días, porque hasta ahora no había encontrado el diseño adecuado. No sé si tendrá algo que ver.

Gracias de antemano.

agosto 3, 2010

Hola Claudia,
Excelente post..
Solamente que hay algo que no entiendo.. Estuve leyendo los primeros comentarios pero sigo sin entender.. Por que yo tengo el nuevo Blogger, y no aparece nada de Google en la plantilla HTML, asi que.. no se en donde tengo que agregar ese código..

Saludos!

agosto 4, 2010

Claudia muchas gracias he estado mirando toda tu web y el apoyo que das en BT y sinceramente hasta ganas de casarme contigo me da de las cosas que haces eres genial!!! gracias por tu trabajo

Lukas thelukasweb.com
septiembre 17, 2010

como se haría para ponerle una imagen de fondo a todo el buscador, no solo a la caja de busqueda?
Gracias

septiembre 25, 2010

Piola!!!

migu3lfso rreggae.tk
octubre 28, 2010

Hola, me gustaria poner un cuadro de comentario como este en mi blog, espero me pueda ayudar gracias

merche merchenamaste.blogspot.com
noviembre 19, 2010

hola, estoy desesperada no se como quitar de mi blog un super espacio en blanco que me quedó debajo de del titulo por favor echale un vistazo porque lo he intentado todo y cada vez que entro y salgo del texto para arreglarlo me deja mas espacio aun no se si me he explicado lo mejor es echarle un vistazo
gracias

Luis Jaramillo jmsystemscenter.es.tl
marzo 29, 2011

Exelente aporte lo necesitaba para un blog que tenemos

;) Gracias

mayo 30, 2011

Eres lo maximoooooooooooooooo =), gracias agradecida de antemano no le cambie nada lo deje tal cual como lo describistes e iva a tono con mi blog gracias, gracias.

junio 19, 2011

gracias me funciono..Saludes

Luis lg-lamejor.blogspot.com
julio 17, 2011

No me funciona, todo lo de la apariencia si pero cuando busco algo en el blog no me aparece nada! D:

nagato gametronet.blogspot.com
agosto 28, 2011

en que parte se coloca el codigo ante de /head /skin /body ?¿

agosto 28, 2011

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.

Zahrah ummu.abdurra7man.blogspot.com
octubre 5, 2011

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.

Leo videojuegosgratis.com.ar
noviembre 14, 2011

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

alexis hkhih8u9u9.com
agosto 8, 2012

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

septiembre 28, 2012

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

posicionamiento web traficowebya.com
diciembre 28, 2012

muy muy buen tutorial, gracias por el gadget buscador

Deja tu comentario

Nombre (requerido)
Email (requerido)
Sitio web (opcional)