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.

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:

Posts relacionados
Compártelo!
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.

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:
![]()

56 Comentarios
Muy bueno tu articulo, pero tengo una duda.. donde debo aplicar esos cambios en que parte?
Bajo las variables, donde está todo el código CSS.
Barbaro!Me funciono perfecto. Muchas gracias por tu ayuda
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.
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!
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.
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!
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..
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.
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
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).
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.
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
Muchas Gracias Claudia!!!!!!!!!!!
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.
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%:
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
====================
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.
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
Hola !
Un post perfecto!! He podido manipular la barra de google y modificarla tal y como decía, sin ningún problema!!
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 ¡¡¡
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”.
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
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.
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..
Quedó bien eso
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????
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
}
Keko: Mira el enlace a Blog and Web en uno de mis comentarios de más arriba ;
Gabriel: Gracias por el dato
hola quisiera saber como puedo hacer para ponerle una imagen de fondo al buscador
Sebas:
input.gsc-input {
background: url(la-direccion-de-tu-imagen.jpg);
}
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,,,
El borde se puede cambiar usando |important
input.gsc-input
{border: 2px solid #color !important;}
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
Melanie:
Simplemente pega el código antes de ]]></b:skin>
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.
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^^
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.)
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!
Muy bueno, muchisimas gracias
Funcionó!!!
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
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.
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!
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
como se haría para ponerle una imagen de fondo a todo el buscador, no solo a la caja de busqueda?
Gracias
Piola!!!
Hola, me gustaria poner un cuadro de comentario como este en mi blog, espero me pueda ayudar gracias
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
Exelente aporte lo necesitaba para un blog que tenemos
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.
gracias me funciono..Saludes
No me funciona, todo lo de la apariencia si pero cuando busco algo en el blog no me aparece nada! D:
en que parte se coloca el codigo ante de /head /skin /body ?¿
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.
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.
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
hola todos los que visitan esta página son todos unos tremendos hijos de puta ecepto yo xd
hola no sabes por las duda como hacer para poner el boton de busqueda debajo del cuadro de texto
muy muy buen tutorial, gracias por el gadget buscador