Blogger

El gadget de búsqueda de 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

Tags: , Wikio

37 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 :)

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!

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!

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..

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 :)

Junio 18, 2009

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

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%'>
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
====================

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 ;)

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 ;)

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);
}

;)

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,,,

Octubre 21, 2009

El borde se puede cambiar usando |important

input.gsc-input

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

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^^

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.)

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ó!!!

Deja tu comentario

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