JMiur [E]

12 de julio del 2007 / 1 de junio del 2009 ... casi dos años. Una eternidad para cualquier producto web. Es el caso del gadget con el buscador Ajax de Blogger. Casi dos años accesible sólo via Blogger Draft lo que significa que no estaba terminado, que algo debía estar fallando o que había quedado traspapelado u olvidado debajo de una pila de seguidores. Recién ahora apareció el anuncio y ese gadget se ha agregado como elemento estándard (más información).

En realidad, lo curioso no era sólo que una empresa cuyo caballito de batalla es un buscador no tuviera un buscador integrado en sus blogs; lo curioso es que siempre funcionó bien (bien en téminos de Blogger) y, por lo que se ve, nada ha cambiado; el código sigue siendo el mismo. Lo vengo usando desde entonces y si bien es cierto que a veces tardaba un poco en conectarse, es un buscador que me gustó de entrada por dos motivos: porque muestra los resultados en la misma página y porque es fácilmente configurable con CSS lo que no es poco decir. Acostumbrados a tanto iframe y tanto script predigerido, es un soplo de aire fresco.

Lo agregamos desde Diseño | Elementos de la página | Agregar gadget, seleccionando Cuadro de búsqueda:


En la ventana, podemos marcar o desmarcar las distintas opciones que nos permiten definir dónde se harán las búsquedas. Cada una de ellas, aparecerá en una solapa diferente y todas ellas mostraran resultados preliminares en la misma página:


Este blog: es el buscador interno
Acceso desde aquí: busca en las entradas visibles, enlaces dentro de esas entradas, listas de sitios o listas de enlaces
Internet: es un buscador genérico
Listas de blogs y enlaces: agrega la posibilidad de buscar en todos los sitios agregados al blogroll

Una vez que definimos esto, lo agregamos y lo ubicamos donde queremos que se muestre.


Por defecto, leerá los datos de nuestra plantilla y se adaptará a las características gráficas de nuestro sitio. Veremos el cuadro de búsqueda y nada más. De manera automática, se añadirá un DIV oculto sobre el área de posts que es donde se mostrarán los resultados:
<div id="uds-searchControl">
.......
</div>
Eso quiere decir que tendremos dos áreas que podremos personalizar, el cuadro de búsquedas y el cuadro de resultados.


Si vamos a la plantilla y expandimos los artilugios veremos el código comenzando con algo así:
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'>
<b:includable id='main'>
<!-- el título igual que cualquier otro widget -->
.......
<!-- el código en si mismo -->
<div class='widget-content' style='width:95%'>
<div expr:id='data:widget.instanceId + &quot;_form&quot;'>
<span class='cse-status'><data:loadingMsg/></span>
</div>
</div>

<!-- y aquí comienza lo interesante -->
<!-- override gsearch.css -->
<style type='text/css'>
#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:<data:linkColor/>;}
#uds-searchControl .gs-result .gs-title a:visited, #uds-searchControl .gs-result .gs-title a:visited * {color:<data:visitedLinkColor/>;}
#uds-searchControl .gs-relativePublishedDate, #uds-searchControl .gs-publishedDate {color: <data:dateColor/>;}
#uds-searchControl .gs-result a.gs-visibleUrl, #uds-searchControl .gs-result .gs-visibleUrl {color: <data:urlColor/>;}
#uds-searchControl .gsc-results {border-color: <data:borderColor/>; background-color: <data:backgroundColor/>;}
#uds-searchControl .gsc-tabhActive {border-color: <data:borderColor/>; border-top-color: <data:activeBorderColor/>; background-color: <data:backgroundColor/>; color: <data:textColor/>;}
#uds-searchControl .gsc-tabhInactive {border-color: <data:borderColor/>; background-color: transparent; color: <data:linkColor/>;}
#uds-searchClearResults {border-color: <data:borderColor/>;}
#uds-searchClearResults:hover {border-color: <data:activeBorderColor/>;}
#uds-searchControl .gsc-cursor-page {color: <data:linkColor/>;}
#uds-searchControl .gsc-cursor-current-page {color: <data:textColor/>;}
</style>

<!-- el ícono para editar el elemento -->
<b:include name='quickedit'/>
</b:includable>
</b:widget>
En esa parte de STYLE, Blogger dice "override gsearch.css" y eso es lo importante y lo que lo hace distinto a tantos otros gadgets. Las características gráficas son genéricas y se cargan desde una hoja de estilo externa (gsearch.css). Para que se adapte a nuestro sitio, Blogger sobrescribe algunas propiedades y por eso lo hace allí, justo después de cargar el gadget.

Por defecto, sólo cambia algunos datos para igualar los colores de nuestra plantilla pero, nada impide agregar o modificar más definiciones.


Empecemos con el cuadro del buscador que es el más sencillo. Hay cuatro definiciones importantes:
input.gsc-input {
/* es el cuadro donde se ingresa el texto a buscar */
}
input.gsc-search-button {
/* es el botón "Buscar" */
}
.gsc-branding-text {
/* es el texto inferior "con la tecnología de" */
}
.gsc-branding-img-noclear {
/* es la imagen con el logo de Google*/
}
Configurar el cuadro de resultados requiere paciencia, tiene muchas definiciones y es bastante confuso pero veamos si es posible encontrar cada parte o por lo menos, aquellas más importantes.

El bloque total, el rectángulo oculto donde se muestran los resultados del buscador se llama uds-searchControl así que podemos usarlo si es necesario modificar su ancho y sus márgenes:
#uds-searchControl { }
En la parte superior se muestran las solapas con las opciones que hayamos seleccionado y ese rectángulo podemos modificarlo mediante:
#uds-searchControl .gsc-tabsArea { }
Difícilmente sea necesario hacerlo, más importante son las solapas. Hay de dos tipos y en ambas podríamos establecer bordes, color y fuente de los textos, colores de fondo, etc:
#uds-searchControl .gsc-tabhInactive { /* son las solapas inactivas */ }
#uds-searchControl .gsc-tabhActive { /* es la solapa activa */ }
A la derecha de estas se muestra un botón que permite volver a ocultar los resultados y tiene dos definiciones:
#uds-searchClearResults { }
div.gsc-clear-button { }

Todo lo demás se encuentra dentro de un rectángulo que tiene un borde visible y un padding que separa el contenido de esos bordes:
#uds-searchControl .gsc-results { }
Los resultados en si mismos tienen cuatro definiciones a las que podemos agregarles fondos, cambiar colres y fuentes, etc:
#uds-searchControl .gs-result .gs-title, 
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * { /* es el título de cada una */}

#uds-searchControl .gs-relativePublishedDate, #uds-searchControl .gs-publishedDate { /* es la fecha */}

#uds-searchControl .gs-result a.gs-visibleUrl, #uds-searchControl .gs-result .gs-visibleUrl { /* es enlace inferior */}

#uds-searchControl .gs-result .gs-snippet { /* es el resumen de las entradas encontradas */}
En esta última, se resalatan las palabras buscadas, eso se hace con una etiqueta B así que podríamos agregar algo así si quisiéramos que resaltarán de otro modo:
#uds-searchControl .gs-result .gs-snippet b { }

En la parte inferior, lo que veremos es un área de paginación llamada:
.gsc-results .gsc-cursor-box { }
En ese área, las páginas se muestran como enlaces numerados definidos por:
#uds-searchControl .gsc-results .gsc-cursor-box .gsc-cursor-page { }
y la página actual está resaltada:
#uds-searchControl .gsc-results .gsc-cursor-box .gsc-cursor-current-page { }
a la derecha, el enlace "más resultados" nos abrirá el buscador de normal:
#uds-searchControl .gsc-results .gsc-cursor-box .gsc-trailing-more-results { }

118 comentarios:

Theemilio_crazy  

Buena Entrada Gracias... Te quiero preguntar algo. si es posible poner lo que tu tienes abajo lo de Estadistica, Enlaces, Directorios, asi mismo como tu lo tienes o si hay alguna entrada o algo... Gracias por todo.

Responder
Paramatma  

Don JMiur pense que me ibas a hechar un enlace a mi blog porque ayer justamente te preuntaba sobre esto, jejeje ilusiones!!!

Muy buena entrada justamente lo que queria!!

Responder
JMiur  

Theemilio_crazy: No he hecho ninguan entrada al respecto todavía, es algo que tengo pendiente.

Gocase: Es el buscador que te recomendé ver ayer salvo que ayer aún estaba en Blogegr Draft y hoy lo colocaron accesible desde todos lados. Te lo recomendé porque lo vengo usando desde que salió y siempre me gustó.

Responder
Unknown  

Nunca le he dado bolilla a eso, no sabía para qué estaba allí...un desburre más :D...que tengas un día bello!!!

Responder
Enrique Palacios  

Hola JMiur. Hace algún tiempo busco una forma de implementar en mi blog el número de veces que cada post es visto. Estuve buscando en Google y vi que en Wordpress existe un plugin llamado "CountPosts" que realiza esa función...

Quisiera saber si conoces algo parecido para Blogspot


Te agradezco anticipadamente

Kike

Responder
susana  

Es que lo explicas todo!!gracias!
Hace unos días te hice una consultilla para el blog:
www.susanaaguilera.com
Tengo otra duda...como ves he cambiado lo de entradas anteriores y siguientes por unas flechitas...Cómo puedo hacer para subirlas más arriba, mas cerca de la entrada? Es que no hay manera...
Y he puesto que cuando pases por una etiqueta se subraye en negro pero me lo hace tb a las fotos, sabes como puedo quitarlo a las fotos?
Gracias de antemano!
Perdona por ser tan pesada con tanta pregunta...
Saludos!

Responder
JMiur  

KI:
No conozco nada semejante para Blogger. No recuerdo haber visto algo así.

Susana:
Para las flechasde anterior/siguiente, podrías eliminar el margen inferior de las entradas que es lo que lo separa:

.post {
border-bottom:1px dotted #FFFFFF;
margin:0.5em 0 1.5em;padding-bottom:1.5em;}

cambia por margin:0.5em 0; y elimina eso de padding-bottom:1.5em; En todo caso, si quieres cierta separación le agregas esa propiedad con un valor má pequeño.

Para el subrayado, lo que debes hacer es cambiar las propiedades, en lugar de colocar eso aquí:

a:hover { background-color:#444444; color:#FFFFFF; }

agrega esto:
#sidebar-wrapper a:hover { background-color:#444444; color:#FFFFFF; }

La primera afecta a TODOS los enlaces en cambio, la segunda, sólo afecta a los enlaces de la sidebar.

Responder
Bonzu Pipinpadaloxicopolis III  

Explicado hasta el último detalle.

Responder
La Capsula  

Veo que tu formulario de contacto es de la página http://www.webformdesigner.net/

te felicito.

Responder
Roberto Martínez  

Hola.
Excelente el articulo. Llevaba mucho tiempo buscando un buscador para Blogger. Hice un medio apaño con uno de Google, para, al menos, que se pudiese buscar, pero este es fantástico. Además, está perfectamente explicado.
Un saludo

Responder
JMiur  

Este buscador funciona bien, hace mucho que esta disponible y no requiere adaptaciones pero, es bueno saber que pueden hacerse.

Raúl: Sí, el formulario de contacto es de allí aunque hasta hace poco el servicio ya no aceptaba crear más cuentas gratuitas.

Responder
Hugo.V13  

Muy bien explicado ^^! Gracias!

Pero tengo una duda... por que no puedo ver la segunda página (apretando el número 2 o los demás) cuando los resultados de búsqueda son mas de 4?

Ni en tu blog ni el mio puedo u.u! Pero sí en uno de pruebas... =S!

Bueno esop...


Saludos! ^^

Responder
Viktor Lecter  

Pero el: input.gsc-input no lo encuentro en ningún lado, es que mis widgets son un tanto pequeños y necesito modificar el tamaño a la caja de entrada de texto y no veo como modificarla.

Gracias por el post, alguna vez me pregunté como hacias eso del buscador pero nunca te pregunté porque te molesto mucho a veces como la vez esa te te jodí con lo del troll ese que me molestaba, ja, ja, ja.

Responder
JMiur  

Balthazar!:
Me gustaría saberlo, sólo puedo usar esa paginación con resultados de Internet. No tengo idea qué puede estar ocurriendo, esa es una aprte que agregaron recientemente pero no veo que haya cambios en el código. Obviamente, algo falla.

Víctor:
No lo vas a encontrar porque no es parte de la plantilla, simplemente agrega los estilos para sobrescribir los que coloca Blogger. Ese y cualquier otro de los acá descriptos.

Responder
Paramatma  

JMiur pasa algo con mi blog, amigos y conocidos q usan IE me informan que al entrar por ese navegador les sale un aviso de que no esta disponible y se cierra, ademas hoy hice la prueba desde mi universidad y asi ocurrio se me cerro despues de una advertencia, me puedes decir que ocurre que problema existe??


Mil gracias de antemano!!

Responder
JMiur  

No veo que opase eso, se abre normalmente tanto en IE7 como en IE8

Responder
Viktor Lecter  

Je, je, je, uups, ¿y como por donde los ubico?, disculpa la ignorancia pero lo intento y no me funciona eso de cambiarle el tamaño a la forma search; :(

Responder
susana  

Gracias!! Me está quedando más chulo!!!

Responder
JMiur  

Víctor:
En el caso de este buscador, lo mejor es colocar eso en la etiqueta STYLE de ese elemento que se muestra cuando expandes los artilugios. Ahí en el post está indicado lo que vés cuando agregas ese elemento. Coloca más dieficiones antes de </style>

Responder
Anónimo  

Gracias por sus explicaciones.
Funciona bien,pero... hay una entrada que la ignora por completo,la publiqué en abril,es "Chavela Vargas 90 cumpleaños" y el buscador no localiza nada de esta entrada ni de su contenido.
Sr.JMiur ?podria averiguarme que provoca este fallo¿

Responder
Galoware  

Nunca postie nada en tu blog, como este es el primero aprovecho para felicitarte por el blog y por tu predispocision y paciencia para ayudar. Realmente notable.
Por otro lado estuve viendo este gadget y por alguna inexplicable razon no me funciona. Digo inexplicable por que busque mucho y nadie parece haber tenido problemas. ¿Se te ocurre alguna obviedad que pueda pasar por alto un niubi como para que nunca se muestren resultados?

Responder
JMiur  

Anna: Lo miré, es raro, no encuentra ninguna palabra de esa entrada. No sabría decirte el motivo. En Google aparece normalmente, lo que queire decir que la página está indexada.

Galoware: No lo veo en tu blog donde tampoco veo entradas.

Responder
Galoware  

Ah perdon, es que en realidad estaba tratando de hacer algo super basico basandome en la plantilla rounded como para empezar a entender y no esperaba que tampoco te pongas a ver mi problema vos mismo. De todos modos ahi puse de nuevo lo que habia empezado a hacer. El search no muestra resultados aparententemente. ¿Hay que esperar que google indexe mi blog o loi busca directamente?

Responder
JMiur  

Algo de eso hay, al ser sólo pruebas, el buscador puede no encontrar nada porque en realidad, es Google quien busca y si el sitio no está indexado, el resultado será nulo.

El caso de Anna es distinto, allí, Google indexa bien y el post del que habla se encuentra facilmente en el buscador normal de Google, lo raro es que el buscador interno no lo registre.

Responder
Chacien  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Chacie:
Hasta donde yo sé, no es posible porque es algo que Blogger coloca de manera automática.

También es cierto que la lógica indica que los buscadores estén arriba y no abajo. Es algo que se usa mucho y es buena idea tenerlos bien visibles.

Responder
mis compritas  

hola jmiur como siempre muchas gracias por tus ayudas a todo quien lo necesita. Tengo un pequeño inconveniente del cual quisiera me ayudaras y es que en mi pagina tengo un buscador pero que tristemente, no encuentra nada del blog interno por el contrario si encuentra en internet todo lo que se busca, pero lo que me interesa es que mis lectores encuentren en mi blog y eso no ocurre para con ninguna de las entradas. que me puedes decir?
mi pagina es www.miscompritas.com

Responder
JMiur  

Me da la impresión que estás usando un buscador genérico ¿Puedes editar el código colocado? Si es así, fíjate si ves esto:

<form class="gsc-search-box" accept-charset="utf-8">

y cámbialo por esto:

<form method="get" action="http://www.miscompritas.com/search" class="gsc-search-box" accept-charset="utf-8">

o sea, le agregas un atributo para decirle DONDE buscar. Si quieres, podrías ponerle otro más para que se abra en una ventana o pestaña separada:

<form method="get" action="http://www.miscompritas.com/search" target="_blank" class="gsc-search-box" accept-charset="utf-8">

Responder
mis compritas  

hola Jmiur he buscado los codigos que digistes y no los encuentro por ningun lado en mi pagina. como vez es bien raro porque recuerdo que los primeros dias de la pagina el buscador funcion{o perfectamente porque solo lo inserte de las opcciones de blogger, pero nunca mas funciono la parte de busqueda interna. lo que quitado y he vuelto a insertar y nada, que crees que pueda ser?
www.miscompritas.com

Responder
JMiur  

Probablemente, se trata de un gadget y por lo tanto, no hay codigo accesible ¿Por que no colocas el elemento Cuadro de búsqueda que es el que comenta esta entrada y el que utilizo? También puedes ver esta otra entrada.

Responder
mis compritas  

Realmente creo que no soy la unica persona en agradecerte, siempre estas muy dispuesto a ayudar y son caracteristicas que son bien escasas hoy en dia. Todos tus comentarios alusivo a mi problema creeme que son de beneficio para mi, pero Jmiur. creo que el problema es un poco complicado y tiene que ver con el (.com) resulta que me he dado cuenta que nada de lo que publico en mis blogs aparece en google, si pones el titulo en google de miscompritas solo te aparece un link y con informaciones viejas o caducas sin sentido, nada de lo nuevo nunca aparece en google. sin embargo en otro blog que tengo, subi la misma plantilla y todo funciona perfectamente solo que este blogs no es (.com)Te pido una vez mas que veas y asi me des tu opinion. A la verdad no quiero que solo se resuelva lo de el buscador interno. Si no que google tome en cuenta todo lo que publico
la pagina con problema como sabes es www.miscompritas.com y la otra que funciona bien con la misma plantilla es http://yurienaquino.blogspot.com/

Responder
JMiur  

Efectivamente es extraño porque por lo que veo, son idénticos así que no es un problema de plantillas.

Si el dominio es nuevo, es posible que aún no esté indexado correctamente y de allí los pocos resultados pero, el buscador interno debería funcionar igual.

¿Puede ser que no funcione en dominios propios? Es una buena pregunta pero no encontré respuestas en la web; seguiré mirando y si alguien puede confirmar esto, sería bueno que agregara un comentario.

Responder
docencia  

Hola!

Te felicito por el post, más detallado creo que no puede ser!! :-D

Quería comentarte unos “problemillas que tango” a ver si me puede ayudar.

En mi blog (formadores-ocupacionales.blogspot.com) use una plantilla de Wordpress adaptada para Blogger.

Con determinados Gadgets, coge el fondo marrón de la plantilla (puedes verlo en el cuadro de “Suscripción por correo” que sale con un marrón terrible para la pagina), así que cuando intento meter el buscador de google me sale igual, todo un cuadro marrón terrible.

He leído que se adapta a la plantilla que tienes, así que supongo que lo hace automáticamente ¿se puede cambiar por otro color el fondo del Gadget por el color blanco? Me vendrían bien ya que además podría aplicarlo al de “Suscripciones por correo”.

En caso contrario, la plantilla ya traía una caja de búsquedas (es el primer Gadget de todos) pero no funciona, no busca nada, ¿podría aprovecharla de alguna manera?

No sé cómo solucionar estos problemas, te estaría agradecido si me pudieras ayudar.

Gracias ¡¡

Responder
JMiur  

En tu plantilla no hay definidos colores de fondo para los gadgets pero si hay una para los formularios y ese es el caso de Suscripciones. Dice algo así:

form {
background:#FAF7F5 none repeat scroll 0 0;
border:1px solid #EEE8E1;
margin:20px 10px;
padding:15px 25px 25px 20px;
}

Allí está background:#FAF7F5 que es el color de fondo. Puedes eliminar esa línea y con eso quedará blanco como el resto.

El buscador tiene uncódigo erróneo y por eso no funciona. Estás colocando mal la URL que es la que va en action. Allí pones un codigo de Blogger y esos códigos no funcionan en los gadgets. No sé exactamente qué dice el código porque sólo veo el código fuente pero se lee esto:

<form id="qsearch" method="get" expr:action="data:blog.homepageUrl + "search/"">

Cambia eso por esto:

<form id="qsearch" method="get" action="http://formadores-ocupacionales.blogspot.com/search">

o sea, en action, coloca la URL de tu sitio seguido de /search

Responder
docencia  

Hola otra vez!

Gracias por responderme tan rápidamente, ¡el consejo funciono de vicio!.. ¡Adiós al color marrón! :-D

Intente por mi cuenta, y para no molestar demasiado, 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 Gatche de “Suscripción por correo” tiene un recuadro muy grande, con líneas interiores).

Muchas Gracias ¡¡¡

Responder
JMiur  

A ver. Son varias cosas, algunas afectan a todos los formularios, por ejemplo, esta dos:

form {
border:1px solid #EEE8E1;
margin:20px 10px;
padding:15px 25px 25px 20px;
}
ahi está el margen y el padding; esos pueden ajustarse

form p {
border-bottom:1px solid #ECE5DD;
color:#9D6D37;
margin:0;
padding:12px 0 5px;
}
aquí hay más padding lo que hace que cada control o caja del formulario se "baje" aún más. Ahí también está el borde que crea esa línea interna.

En el buscador, deberías agregar esto:
table.gsc-branding {display:none;}
para que la parte inferior que es donde está la imagen con la marca, desparezca por completo.

Prueba con eso y seguimos viendo los detalles si es que falta alguno.

Responder
docencia  

Vale, he realizado las siguientes modificaciones para dejar el cuadro de búsqueda a la mínima expresión:

form {
margin: 20px 10px;
padding: 0px 0px 0px 15px;
border: 0px solid #EEE8E1;
background: #FFFFFF;

form p {
border-bottom: 0px solid #FFFFFF;
padding: 12px 0 5px 0; margin: 0;
color: #9D6D37;

También he conseguido quitar las líneas interiores al apartado de “Suscripciones”, “Directorios” y la que envolvía a toda la caja de “Búsquedas”.

Cosillas pendientes:
- ¿Cómo puedo quitar el recuadrito pequeñito que envuelve a la caja de búsquedas?
- ¿Y el cuadro gran de la caja de Suscripciones?
- ¿Dónde modifico el margen del cuadro de traducción? ¿Dónde se encuentran ubicados los márgenes de los demás Gatches ?

¡Gracias! :-D

Responder
JMiur  

Hay una propiedad que parece afectar a todas las tablas y les pone bordes, el formulario de búsqueda está en una tabla:

td {
padding-left: 11px;
padding-right: 11px;
border: 1px solid #E7F0CC;
}
ahi está el borde

El de las suscripciones está directamente en el código del elemento. Si lo editas lo verás:

<form onsubmit="..........
style="border: 1px solid #CCCCCC; padding: 3px; text-align: center;" action="http://feedburner.google.com/fb/a/mailverify">
ahi en el parámetro STYLE esta el borde que lo rodea.

El del traductor no vas a poder modificarlo porque es un IFRAME así que ahí nada puede hacerse con el borde ni con su contenido.

Responder
Tejer Bien  

me Tendrás alguna idea porqué no aparece entre las opciones??

Responder
JMiur  

¿No aparece en las opciones de agregar gadgets? Es la segunda en la lista: Cuadro de búsqueda. Si no la ves, podrías probar ingresando via Blogger Draft.

Responder
docencia  

Buenas tardes JMiur!!

Lo primero de todo quería darte las gracias por las ayudas que ya me brindaste anteriormente y que hicieron que mi blog mejorase notablemente en apariencia, gracias ¡¡

Ahora que estoy de vacaciones quisiera seguir puliendo un poco más el tema, te cuento, son 3 dudas muy puntuales:

1.- El cuadro de búsqueda se ve perfecto en todos los navegadores menos en el Internet Explorer, en el cual la barra de búsqueda queda cortada por el botón. ¿Cómo y dónde arreglo esto? Todavía tengo bastante espacio debajo de dicha barra.

2.- Desde el momento que realice las modificaciones que me recomendaste la ultima vez se incluido un espacio en el margen superior donde empieza el primer post y el primer gachet. ¿Cómo lo quito?

3.- Todavía tengo mucho espacio debajo del cuadro de suscripción, y la verdad, no sé que tocar mas ¿Se pude recortas mas o he llegado al límite?

Te agradezco de antemano todo los esfuerzos que haces ayudarnos, no tiene precio!!

Un saludo¡¡

Responder
JMiur  

Lo del buscador es complicado. Se trata de márgenes y tamaños. Lo primero que se me ocurre es eliminar esto:
form {
........
margin: 20px 10px;
padding:0 0 0 15px;
}
que genera un margen en los formularios. No sé si no podrías disminuir los tamaños del botón u del cuadro porque parecen demasiado grandes para la sidebar. En IE se me hace difícil verificar detalles por eso sólo te doy una idea general. Yo pondría:
margin: 20px 0;
padding:0;

No estoy seguro si el margen superior al que te refieres es el que hay entre el menú y la parte inferior. Si es eso, debes disminuir el padding acá:

#content-wrapper {
clear:both;
float:left;
padding:25px 0 60px;
width:952px;
}

padding 25px es la separación superior, coloca 0 si no quieres ninguna.

Responder
Gabriel Schvartz  

¿Existe alguna manera de modificar el texto del botón "buscar" en el buscador AJAX, y también el texto alternativo que aparece al colocar el cursor sobre el cuadro de búsqueda? :$

Responder
JMiur  

No que yo sepa. El código lo agrega Blogger.

Responder
Carlos Martínez  

Hola, disculpa que siempre deje este tipo de comentarios pero es que soy algo necio :). Se que no hay forma de controlar el buscador con respecto a como realiza las búsquedas, pero he notado que al cambiar la dirección del blog ya no te reconoce los post's que tenias con la dirección antigua, no se si me explico, pues esto es lo que le pasa a mi blog.

Si sabes de alguna forma de solucionar esto me gustaría saber porque siempre entro a tu blog y encuentro una respuesta a todo. Aunque creo que esto ya esta como que medio imposible de controlar, lo del motor de búsqueda.

Responder
JMiur  

Lo siento, Carlos, es un tema que desconozco.

Responder
Valsapena  

Hola, a mi no me funciona "buscar en este blog", sabeis el motivo ?

http://amor-de-ser.blogspot.com

Un saludo.

Responder
JMiur  

Veo que ocurre eso pero, lamentablemene no sé qué responderte.

Responder
PLN  

Hola, mucho gusto. Tengo problemas con el buscador interno del blog. Me pasó con varios, los buscadores empiezan funcionando pero después de publicar algunas entradas dejan de funcionar, o sea no encuentran más las entradas de mi blog. Esto lo solucioné eliminando el blog y creandoló otra vez (con la misma dirección), pero a las pocas entradas publicadas vuelve a ocurrir el problema. Ahora tengo puesto el BUSCADOR DE GOOGLE, que empezó funcionando pero hoy agregué una nueva entrada y ahora sólo encuentra 2 entradas de las 8 que tengo publicadas. En esta última entrada que puse tuve que editarla y publicarla varias veces porque no quedaba bien ( aparecían muchos espacios en blanco entre una foto y el texto que seguía) y también tuve que cambiar entre editor anterior y editor actualizado de blogger 1 ó 2 veces. Después de hacer estas cosas sucedió que el buscador no encontraba todas las entradas. Parece que esa es la causa del problema pero no sé como resolverlo. Veces anteriores, antes de eliminar el blog y volver a crearlo, también tuve que editar y publicar varias veces las entradas para que queden bien e ir cambiando entre editor anterior y actualizado para borrar el link de las fotos. ¿ Sabés cuál puede ser el problema y cómo solucionarlo ?
Mi blog : http://porlanoticia.blogspot.com
Muchas gracias.

Responder
JMiur  

No es mucho lo que puede hacerse. Más que nada, entender que un buscador no listará las entradas sino que buscará, tal como lo hace Google, alguna palabra o palabras en el título o en als primeras líneas de la entrada.

Eso, lo va haciendo cada vez mejor a medida que hay más entradas y estas son indexadas. Jamás dará un 100% de resultados. Por eso, siempre es bueno tener alternativas tales como las etiquetas u otro tipo de organización que permita navegar y "buscar" temas.

Responder
PLN  

Muchas gracias por tu respuesta. Sí, estaba pensando en organizar todo en etiquetas para saltear el problema. Considero que el problema o parte de él puede ser la plantilla, no lo sé. Pero, ya que estamos, conocés alguna plantilla estilo revista que te parezca que funciona bien ( como para hacer un diario digital ). Probé varias y generalmente no funcionaron del todo bien. Gracias nuevamente.

Responder
JMiur  

PLN:
En Blogger todo ese tipo de plantillas es limitada, la que usas, no me parece nada malo, por el contrario. No podría recomendarle ninguna en especial

Todo puede ser pero, no creo que sea un problema de plantillas sino de indexación y de tiempo.

Responder
PLN  

JMiur, hoy tuve la sorpresa de que el buscador encontró más entradas, no todas pero es un avance. Tomo tu parecer sobre mi plantilla como una recomendación ya que tenés más experiencia y conocimientos sobre blogs que yo que soy novato. Gracias y saludos.

Responder
JMiur  

Deberías ver qué pasa cuando haya más entradas y el blog vaya siendo indexado; es una cuestión de tiempo.

Responder
WIÑAYPAQ  

Hola, se puede cambiar de lugar el cuadro de resultados? Es que, en mi blog aparece fuera de la plantilla, exactamente al encima de todo T_T he tratado de moverlo, pero no encuentro la forma.

mi blog es www.prodwin.net

Responder
JMiur  

Como tu plantilla no tiene ninguno de los bloques que por defecto utiliza Blogger, el cuadro de resultados se muestra allí y de esa manera. El DIV se crea automaticamente y se adapta a las características gráficas de la plantilla, obviamente, allí no porque no puede detectarlas.

Responder
Mun2  

Buena JMiur ta el post:)
Pero tengo una Inquietud!!:o
Esta Tecnología de buscador Interno se podría Adaptar a los buscadores que viene con alguna pantalla de la que descargas de sitio Como Btemplas y Demas.
Me encantaría Poder aser eso para no dañar el estilo de mi Blog Templas:D

Responder
JMiur  

Este buscador en un elemento de Blogger mismo así que puede agregarse a cualquier blog. También puden usarse varios de manera simultánea.

Responder
Mun2  

Bueno JMiur Mi Pregunta creo q la hise mal
La Pregunta es Si yo Ya tengo una BlogTemplas Intalada Como Matapat | Demo , como ves en el demo el buscador que trae el tema de por si Esta ubicado en un Lugar Especial en este caso arriba En Cierta posición
la Pregunta es la Siguiente
Se Podría Incorporar El buscador AJAX de Blogger en la Formación de el que ya tenemos, en la misma posición con los mismo que ya tenemos, Solo que utilice La Tecnología de el Buscador Interno
Es Esto Posible?

Responder
JMiur  

Dudo que sea posible, es un gadget y como tal, las posibilidades de configuración son escasas.

Responder
Mun2  

Ok Muchas Gracias

Responder
WIÑAYPAQ  

Hmmmm... Hola JMiur, siguiendo con el comentario 55, cómo puedo ubicar los resultados en un lugar correcto, es decir, dentro de la plantilla :S

Responder
JMiur  

La misma respuesta. Es algo que se posiciona de manera automática.

Responder
Maite  

Gracias por esta entrada, está genial explicada y me lo he pasado genial cambiando los estilos! :D

Responder
JMiur  

Es algo engorroso pero vale la pena :D

Responder
ra.  

Hola JMiur!

la verdad que llevo un rato y no consigo quitar el texto de "con la tecnologia de Google y la Imagen corporativa"

ra.

http://blongh.blogspot.com

n saludo y gracias!

Responder
JMiur  

Tal vez con esto:

.gsc-branding {display:none;}

Responder
Alberto Yaya  

Buenas, el problema que encuentro con este buscador es que no encuentra la totalidad de entradas que tengo en mi blog (más de 3200). Creo que es un problema de indexación de google. Sabes algo al respecto?

Responder
JMiur  

En términos generales, ningún buscador encontrara el 100% de resultados.

Responder
ra.  

listo y funcionando!

Responder
Bilosony2™  

muy buena la explicacion:) Pero si quisiera meterlo en un menu como lo e echo con este buscador en el menu de mi blog. E echo muchos intentos pero hasta ahora no e tenido resultados buenos, tienes alguna idea para poderlo hacer??

Saludos!!

Responder
JMiur  

No veo cuál es el buscador que tienes en un menú. De todos modos, se trata de gadgets y por lo tanto, la personalización está limitada.

Responder
Anónimo  

Gracias por la detallada explicación, le cambie unas cosillas, pero te tengo unas preguntas

es posible cambiar el botón de búsqueda por una imagen, y lo mismo para lo del logo de google.

Responder
JMiur  

El logo es controlado por la clase .gsc-branding; el botón se define input.gsc-search-button. Ambas cosas controlan el CSs pero no puede cambiarse el código HTML.

Responder
Drawer 4 Everyone  

Hola, jefe, mira, yo implemente este gadget en un blog que estoy diseñanado (http://desdelaspalabrasblog.blogspot.com/), y le dé lo que le dé a buscar, nunca hay resultados.

He mirado por todas partes, pero no se que puede ser.

sabes algo? eres mi última esperanza! :((

Responder
JMiur  

Los buscadores internos son similares a los buscadores externos. No buscan en os posts en si mismos sino en aquello que Google tiene indexado así que, para que un buscador funcione, el sitio debe tener entradas suficientes y haber sido indexado correctamente.

Responder
Drawer 4 Everyone  

Y que hago para indexarlo?

Responder
JMiur  

Básicamente tiempo, entradas reales y no de prueba, con contenido, con títulos claros que no se repitan.

No habrá gran diferencia con lo que puedes encontrar en el mismo Google buscando tu blog que es muy nuevo y aún no tiene contenido.

Responder
ARSENAL  

hola tengo un proble con el buscador de mi blog instale muchos pero ninguno puede encontrar nada por ejemplo danzig

mi blog http://arsenaldemusica.blogspot.com/

talves es por q cambien de direccion o algo por el estilo no se si me puedes ayudar porfavor

Responder
JMiur  

Cambiar de biscador n otiene sentido porque sólo son cambios estéticos; todos harán lo mismo. El problema fundamental es que, al no haber textos, el títul osólo no es suficiente apra que el busador encuentre algo ya que no funcionan como lo hace un buscador interno de la PC sino como lo hace un buscador web, buscando en las páginas indexadas por el mismo Google. Al carecer de textos, esa indexación es más compleja.

Responder
Music  

Encontré lo que queria sacar de dudas sobre el buscador, pero no me funciona T_T quiero borrar eso de la "tecnología google" pero en ni un lado encuentro esto: .gsc-branding {display:none;} cuando voy a "edicion html" y no sé como borrar eso. Me encantaria que me responda, gracias.

Responder
JMiur  

No lo vas a encontrar, por el contrario, debes agregarlo al estilo.

Responder
Music  

Con razón, pero de igual modo, no entiendo cómo es eso de agregarlo al estilo, disculpeme por la idiotes, no sé mucho sobre esto.

Responder
JMiur  

Si despliegas los artilugios y buscas el elemento agregado:

<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'>

allí adentro verás la etiqueta style y puedes poner esa definición ahí mismo:

<style type='text/css'>
.gsc-branding {display:none;}
...........

Responder
Music  

Lo logré, me quedo justo lo esperaba, muchas gracias; te agradesco todo lo que brindas en este blog, nos ayuda bastante. Gracias

Responder
JMiur  

No ha sido nada, Music, fue un placer.

Responder
Music  

Hay forma de cambiar el Boton "buscar" por una imagen? en este casi quiero poder una lupa de ver del boton? :)

Responder
JMiur  

El botón ea agregado por el mismo gadget así que todo l oque peudes hacer es modificar las definiciones de estilo de este:

input.gsc-search-button {
.......
}

Responder
Anónimo  

He creado mi propio buscador ¿como puedo hacer que envie los datos a la busqueda de blogger?

Quite el de blogger porque yo lo queria poner en la cabezera junto al menu :)

Responder
JMiur  

El buscador es siempre el mismo, lo que puedes cambiar y supongo que es eso lo que has hecho, es la parte gráfica. Para que funcione y busque en tu blog debes tener esto:

<form action='http://nombreblog.blogspot.com/search' method='get'>
<input type='text' value='' name='q' />
<input type='submit' value='Buscar' />
</form>

Responder
Indeziisoow  

Muy bueno el post. Me ha ayudado. Muchas gracias. :D

Responder
Indeziisoow  

No quisiera molestar pero tengo un problemita. Cuando arreglé el diseño tal y como sale en esta entrada no me funciona el buscador (queda estático y parece una imágen). De antemano, gracias.

Responder
JMiur  

Eso es porque en esas plantilas nuevas todo es estrafalario y absurdo. Simplemente agraga esta regla y seguramente podrás activarlo:

#CustomSearch1 {z-index: 1000;}

Responder
Indeziisoow  

Muchas gracias. Me ha servido de gran ayuda. :D

Responder
Bocha  

JMiur, te comento...

coloque el buscador, y ya edite casi todo el cuadro de resultados...pero me surgió una duda. ¿Como hago para poner el buscador dentro de mi menú horizontal? tengo uno puesto ya, pero no es el de google, es otro...

Alguna idea?

Abran Cancha
www.abran-cancha.blogspot.com

Responder
JMiur  

Este es un gadget así que, primero que ada, deberás moverlo a la sección donde está el menú: upper-wrapper y luego habrá que darle propeidades para que flote a la dercha y se ubique donde ahora está el otro buscador.

Responder
Bocha  

Aprovechando las vacaciones decidí colocar el buscador en mi blog y son varios los detalles que no logre solucionar.

1) No encuentro la manera de sacar la "Cruz" que cierra los resultados de búsqueda. Trate con la propiedad "display: none;" pero no hay caso.

2) Otro problema que tengo es que no me resalta la palabra buscada dentro del parrado de los resultados.

3) Hay una gran distancia entre la caja de resultados y el titulo de los post.

Responder
JMiur  

Hace rato que no lo uso porque estuvo mucho tiempo colapsado y no funcionaba. De todos modos:

Quitar el botón para cerrar la búsqueda no es aconsejable pero, se puede hacer con esta regla:
.gsc-clear-button {display: none !important;}

No recuerdo que tuviera la opción de resaltar la palabra buscada.

Ea separación es el resultado del margen de este elemento asi que bastaría cambiar ese valor:
#uds-searchControl .gsc-results {
...
margin: 0 0 2em;
}

Responder
Bocha  

Termine de editar los resultados de búsqueda :D

Con respecto al botón "Buscar"... me gustaría saber si se puede reemplazar por la imagen de una lupa, y en el caso de que no, saber si se puede eliminar el borde que por defecto tiene.

Un saludo.

Responder
JMiur  

El borde se saca así:
input.gsc-search-button {border:none;}

Responder
mis compritas  

una aclaracion para los comentarios 95 y 59, o mas bien un consejo, sobre de poner el buscador exactamente en un lugar especifico, hay ciertas partes de la plantilla donde creemos que es casi imposible poner un gaddet, por ejemplo en el menu de categorias, o el menu central de la pagina. pero hay una forma para ponerlo exactamente en cualquier lugar de la plantilla sin importar si esta arriva o no de cualquier elemento o gaddet que tengamos actualmente.
El codigo para lograr esto es:

position: absolute;
top: 50px;
left: 600px;

Un ejemplo de como usarlo es: supongamos que cojemos un gaddet y le cambiamos el div id

ejemplo

<div id="buscador">
aqui va todo el codigo del buscador
</div>

En el html de nuestra pagina este div deve tener estos atributos

#buscador {
position: absolute;
top: 50px;
left: 600px;

incluso si le agregan estos atributos al gaddet donde tengan el buscador, estoy seguro que les va a funcionar, y el buscador aparecera en la ubicacion exacta del atributo top: o left:
incluso si queda arriva de una imagen, de un texto, o de un elemento

dime vagabundia estoy en la correcto? es la forma mas eficiente de hacerlo?

Responder
JMiur  

No es tan así. Mejor dicho, puede ser así pero depende de la estructura de las plantillas, de dónde se coloca el gadget, etc.

En términos generales, si un contenedor (el header, por ejemplo) tiene la propiedad position:relative; su contenido (un gadget, por ejemplo), puede ser posicionado de manera exacta dentro de él, cuando tiene agregada la propiedad position:aboslute.

Responder
mis compritas  

Tienes toda la razon, las propiedades que sean necesarias para que el buscador o cualquier otro elemento quede exactamente en una ubicacion, van a depender totalmente del contenedor donde se encuentre.

Eres un genio, Me impresionas!!!!

sabes? me gustan los retos y soy curioso cada vez que veo algo en internet sobre html o javascript quiero probarlo en mi plantilla para aprender a hacerlo por si lo necesito algun dia,

Entré a yahoo.es un dia y ellos tenian una publicidad en formato flash, y lo que vi fué que supuestamente un objeto dentro del flash en este caso un carrito, se salio del flash y se comenso a pasear por toda la pagina

yo supuse que el flash estaba encima de la pagina completa pero solo se notaba el carro porque todo el fondo del flash estaba transparente,
pero que yo sepa las partes del flash aun si son transparentes quedan
negras dentro de una pagina web.

talves sera que ellos utilican algun archivo con extencion .js para provocar ese efecto
pero dime tu que piensas de eso?

Responder
JMiur  

No necesariamente, depende de como sea el archivo SWF; si este es transparente, el color de fondo se controla con la etiquta PARAM. Por eso, es aconsejable que toda etiqueta OBJECT tenga esto:

<param name="wmode" value="transparent" />

Responder
mis compritas  

Mira gracias por tu respuesta, se que talves no lo necesitas pero te dejo esto:

http://dl.dropbox.com/u/15908134/slide%20go%20to%20top.rar

Este es un archivo con extencion .js que te permite agregar un "volver hacia arriva" para ir a la cima de la pagina, te permitira con un solo click "deslizar" la pagina hacia arriva con un buen efecto.

Como se que tienes muchas entradas que tienen muchos comentarios o son bastante largas, talves puedas utilizarlo.

Estos archivos Los subi y los prepare yo mismo con los codigos para insertarlo.
No encontre en ninguna pagina para descargar un archivo como este, asi que talvez un dia lo necesites o te lo pidan.

Responder
mis compritas  

ohhh creo que ya tienes una entrada acerca del deslizador, si me hubiera dado cuenta antes, no hubiera cogido tanta lucha. jajajja

http://vagabundia.blogspot.com/2008/01/ir-al-inicio-pero-con-scriptaculous.html

ok, de todas formas entonces, disculpa por tanta redundancia

gracias por la respuesta es lo unico que puedo darte ahora mismo jejejeje

Responder
Bocha  

Coloque el buscador en este blog http://abran-cancha.blogspot.com/ Y por algun motivo me pone bordes alrededor de los enlaces de los titulos...

Se puede solucionar sin tener que quitar el borde que rodea toda el area de los titulos de los posts, es decir: .gs-result .gs-title, .gs-result .gs-title * {

¿?¿?

Responder
JMiur  

No entiendo a qué enlaces te refieres, el borde es el que has agregado acá:
.gs-result .gs-title, .gs-result .gs-title * {}
y esa regla no afecta a otras. TEndrías que mosrarme a qué te refieres.

Responder
CristJian  

hola JMiur... como puedo hacer que el resultado de la busqueda salga en el main-wrapper??
a mi me salen en el side pero quisiera que aparezcan en el main

este es mi blog: elsentirpopular.blogspot.com

gracias :)

Responder
Bocha  

En esta imagen:

http://1.bp.blogspot.com/-yjaQN3tJXV8/To4ECwuv6PI/AAAAAAAACsI/i197S9Wln1Y/s1600/BLOG.bmp

Dejo claro a que parte me refiero...

Hay un borde que rodea toda la barra verde y ese quiero que se quede. Pero el borde que rodea al titulo de cada post (mirar imagen) lo quiero sacar... como hago?

Responder
JMiur  

Eso no parece el buscador de Blogger sino la búsqueda personalizada de Google. Esa, debes configurarla allí, en tu cuenta. Mira esta entrada.

Responder
CristJian  

muchas gracias JMiur, solucionado el problema ;)

Responder
Anónimo  

Hola vagabundia!, gracias por tu explicacion, oye, quisiera pedirte un gran favor lo que pasa es que ahora me decidí a hacer mi blog de viajes y quiero una plantilla pero modificada por mi mismo aunque no sepa nada de eso del html pero con blogs como el tuyo puedo aprender!, fijate, lo que yo quiero es preguntarte como se hace para que el buscador este ajax de blogger cuando tu hagas enter en o pulses el boton de "buscar" no te baje hasta donde estan los resultados, no se si men entiendas, pero lo que yo veo es que cuando yo hago una busqueda y doy enter, en la "url" me sale esto al lado de la dirección de mi blog: "#uds-search-results", y entonces me baja o me sube hasta donde esta el cuadro de los resultados, no se si me puedas ayudar, pero yo veo que cuando busco en tu blog no pasa eso, y pues me gustaria algo asi como tu buscador es genial me encanta el diseño pero este del css es como un poco dificil y hasta ahora lo que quiero es un blog con un diseño diferente y quiero mejorar el buscador y los demas gadgets, que voy a mejorar con tus articulos.

eso es todo JMUIR muchas gracias por tu ayuda, eres realmente muy inteligente y ademas muy amable y bondadoso al enseñarnos y hacer todo esto mas facil, te agradezco mucho y un saludo desde Bolivar-Colombia

sigo pendiente de tu respuiesta aquí!

JMiur  

EL buscador que utilizo no es este sino la búsqueda personalizada de Google.

Anónimo  

gracias por tu respuesta JMIUR, entonces voy a intentar entender como hacer lo de la busqueda personalizada, te agradezco mucho!

los mejores deseos!

Anónimo  

Hola Jmiur, de nuevo soy yo para pedirte otro favor
lo que pasa es que quiero pregutnarte si es posible depronto hacer que cuando uno haga clic en un resultado de la busqueda no lo envie a otra ventana o pagina externe, sino que sea en la misma pagina, yo entiendo que eso es por algo como por una opcion del buscador que no lo lleve a otra ventana nueva sino que cuando uno haga clic en un resultado entonces lo lleve a esa pagina desde y en la misma pagina donde esta ... que no habra otras.. entonces esa es mi pregunta si deronto tu sabes como hacer eso si se puede y si me puedes por supuesto ayudar, quizá tu sepas como es eso porque me cuesta entender un poquito lo de los codigos del html y del jjavascrit y en fin, tu sabes mas....

Te agradezco por tu inmensa ayuda que estés muy bien y un saludo!!!

JMiur  

Eso dependerá del buscador que uses. El de Blogger al que se refiere esta entrada funciona de ese modo y la Búsqueda Personalizada de Google que te indiqué antes, permiten hacer eso estableciendo la opción correspondiente cuando se crea.

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