Añadir colores, modificar tamaño y propiedades del texto son unas de las opciones que hay si optas por colocar en tu blog el Buscador que proporciona Blogger como gadget "Cuadro de Búsqueda".

En una entrada anterior expliqué de forma sencilla como eliminar la publicidad de Google en el buscador.

Siguiendo con esa entrada añado nuevos elementos para personalizarlo, hacer que haga juego con la decoración del blog y contestar a LadyMarian.


0. Guardar siempre plantilla. ¡¡¡Nunca aventurarse a cambiar elementos sin una copia previa!!!!!

1. Escritorio - Diseño - Elementos de página - Añadir un gadget y lo seleccionamos:




2. Decidimos donde cada cual quiere buscar la información:



3. Ya añadido el gadget a nuestra plantilla queda algo similar a:



4. Ir a Diseno - Edición HTML - Tildar "Expandir plantillas de Artilugios"



5. Apretamos a la vez las teclas Ctrl+F y buscamos el código:
6. Una vez encontrado, ( ¡¡¡¡ojo!!!!!! se coloca ANTES), debemos copiar el siguiente código:

a) Si sólo quieres eliminar la frase ”con la tecnología de Google” coloca sólo


.gsc-branding-text, .gsc-branding-img-noclear {

display:none;

}


b) Si además quieres cambiar las propiedades del botón "Buscar", añade al código anterior lo siguiente:


input.gsc-search-button {

color: #FFF;



border: 1px solid #ff0084;

}


* Aquí varias el color, el fondo y el borde del botón.

* También es posible modificar las propiedades del texto añadiendo nuevos códigos (pej: font-weight:bold; font-size: 13px. Colocar una imagen de fondo (background: url [aquí-tu-imagen] no-repeat), añandiendo otros atributos como “height” y “width” (un botón debe tener aproximadamente 60×20 píxeles).

* Para hacer más ancho el botón se puede añadir las opciones "padding" tal y como se muestra en el ejemplo:



input.gsc-search-button {

padding-top:10px;

padding-bottom: 10px;

}


c) Si quieres transformar la caja del buscador se añade:


input.gsc-input {

color: #ff0084;

}


* Aquí puedes cambiar el color del texto, y también el fondo, pero no el borde.

* Si deseas agrandar el ancho del buscador el código sería:


input.gsc-input {

padding-top:7px;

padding-bottom: 7px;

}



Ejemplo: Mi buscador, situado en la columna de la derecha, tiene el siguiente código...


.gsc-branding-text {

display:none;

}

.gsc-branding-img-noclear {

display:none;

}





input.gsc-search-button {

color: #B40404;

font-weight:bold;

font-size: 13px;

border:2px ridge #8A0808;

padding-top: 1px;

padding-bottom: 1px;

}





input.gsc-input {

padding-top: 7px;

padding-bottom: 7px;

color: #000000;

font-size: 17px;

font-weight:bold;

background: #F35D5D;

}




Web donde consultar el cuadro de colores para los fondos y bordes de tu buscador.

Recordar que en este truco, (y siempre), se pueden hacer tantas "Vistas Previas" como se deseen mientras decidimos colores, tamaño...
Una vez dado con aquello que nos guste sólo restará "Guardar plantilla".


Fuente:
Claudia


(Un apunte personal más para no olvidar)


********Ampliación para modificar el buscador:

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


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 + "_form"'>

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

- Lo más sencillo se explicó al inicio y era:


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:

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 { }


Las solapas. Hay de dos tipos y en ambas podríamos establecer bordes, color y fuente de los textos, colores de fondo,...


#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 colores y fuentes...:


#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 { }





Fuente directa:VG





► Buscador interno simple:

<div align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/><input id="search-btn" value="Buscar" type="submit"/></form></div>


Diseño ~> Elementos de la página ~> Añadir Gadget ~> HTML/JavaScript y pegar el siguiente código:

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" value="" type="text" id="searchBox" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q" /> <input id="searchButton" value="Buscar" type="submit" /></form>

Donde 150 es la anchura de la barra de búsqueda que se puede modificar así como el color.




► Supongamos que el buscador no aparece, en su lugar aparece "Cargando..." :

Motivos:
1. Fallo en la plantilla de algún elemento fundamental.
2. Se borra algo mientras cambiamos la plantilla.
Aclarar que Blogger añade códigos, líneas a su libre albedrío.

Si no existe la línea y el buscador no carga la solución es insertarla después de <head>


<b:include data='blog' name='all-head-content'/>


Se acabó.







26 comentarios:

L.N.J.

Hola cielo, no sabes la alegría que me has dado verte por mis locas escrituras; y es que fuiste la primera mujer que te recuerdo en ella, con esa alegría que te caracteriza.

Sé que este mundo de los blogs lleva mucho tiempo, y cuando vengo a saludarte, no te preocupes si no tienes tiempo para venir a verme. Entiendo que somos muchos y lleva su tiempo.

Lujo, tan sólo decirte que para lo que me necesites, me tienes. De veras, bueno, para lo de los blogs no, que por más que te leo, no entiendo. Pero si quieres algo, tienes mi correo.

Volveré, y me liaré más todavía jeje......

¿ Sabes como es un abrazo grande ? , pues imaginatelo porque me gustaría darlo y tomar un cafelito contigo.

Vales mucho.

ADELFA MARTIN

Amiga...cada dìa te vuelves mas "china" para mi, pero no por eso te quiero menos...

abrazos

LadyMarian

Gracias!! Muchas gracias!
Bueno, está muy bien explicado. Sólo queda estudiarlo un poco... y un poco de suerte nunca viene mal, no?
Besos

DIANA

Querida Lujo...

Pasando aqui a saludarte y ponerme al dia con tus post.

Besos!

Diana

Emy

Holaaaa Lujo, todo muy bien explicado pero en cuanto hay más de dos comas me pierdo jajaja.

Tengo uno de mis blog que si te fijas el espacio bajo del cabezal el que explicases en tu anterior poss apareció arriba ósea al contrario y no me preguntes como fue porque ni yo lo se…. Jajaja….. pero bueno no me quedo mal esta diferente jaja,

Muchos besos tesoro.

joselop44

Como simepre. Se aprende mucho al seguirte.
Un abrazo

Any

Tengo que probar todos estos truquetes en el blog de prueba (antes de meter la pata en mi blog).
Besos mi Lujo querida, como anda mi ejército amigo?

Nancy

Yo te pasé a dejar un gran apapacho... Estás a un súper nivel en esto de la tecnología y los códigos para los blogs.
Besitos y apapachos

Lujo

Hola Hola Lou
Mi niña, no dudes que te leo. Tienes una chispa especial y compones con magia.
Cuando expones logras que el lector se lleve una buena vibración. Algunas veces veo unos comentarios con tanto nivel que me tiro para atrás.
Veo que experimentas con las plantillas y los cambios de imagen(-^o^-) . Ya sabes que el contenido de un blog es lo importante...en tu caso es mágico.
Nos vemos pronto (^_-)
Abrazotes gigantes y cariñosos!!



Hola Hola Adelfa
Gracias Cielote lindo. Es que si no apunto en algún lado las cosas que voy aprendiendo y me las explico a mi manera acabo perdiéndome.
Eres un sol de primavera!!
Abrazotes enormes!


Hola Hola LadyMarian
Es indudable que cuando te metes en algo en lo que no estás acostumbrada como los códigos, necesitas suerte.
En mi caso, suelo pensar que lo que hoy no entiendo....es posible que lo comprenda dentro de una semana o un mes....
El blog es para divertirse y hacer lo que tengas ganas cuando lo desees.
Espero que te resulte de utilidad.(^_-)
Abrazotes hipervitaminados


Hola Hola DIANA
Miles de abrazotes enormes para ti también!!.Sabes que visitar tu blog es fantástico.


Hola Hola Emy
Me he vuelto loca mirando tu perfil y viendo cuál era la "platilla peleona".
Donde te has encontrado "el efecto mágico" es en la Tekka. Es una de las que tienen la cabecera súper blindada y los experto a lo más que llegan es a tres columnas.
De todas formas esa nueva parte se puede aprovechar para hacer la cabecera en forma de imagen.......(es una idea).
Siento no poder decirte mucho más....., no soy una experta y estoy muy lejos de ser un blog de ayuda.
Soy una persona como tú que empieza a aprender con estos temas.
Abrazotes enormes!!!


Hola Hola Joselop
Mil gracias a ti!! Eres un sol!!
Abrazotes enormes!!

Lujo

Hola Holaaaa Any
Prueba los trucos si tienes ganas y piensas que pueden ser de utilidad. Lo más importante es que te guste o disfrutes con lo que haces, el resto tiene poca importancia.(-^o^-)
Tu ejército esta muy bien. Ayer fueron a una librería cercana a buscar el último cómic de su héroe favorito y después merendaron tarta con dulce de leche. Ya sabes que eres su mito a seguir y empiezan a interesarse por las costumbres de tu país.(-^o^-) (^_-)
Miles de abrazotes gigantes!

Lujo

Hola Holaaaa Nancy
Mi niña, ya quisiera yo hacer las maravillas que haces con tus dibujos. Te cuento un secreto...con el Paint sólo sé hacer lo mínimo. Estoy a años luz de tener tu arte.
Créeme, no sé de códigos...sólo plasmo a mi manera mi experiencia en el blog. Es una forma de no olvidarlo...
Sabes que soy fan de tus dibujos e historias.
Abrazotes gigantescos!!

Josue Nistal

Hola tengo una duda muy grandota

fijate que mi "buscador" no encuentra nada de lo que kiera buscar, no se porque pasa eso

si me pudieras ayudar te lo agradeceria mucho

http://topalternativa.tk

aka esta...

Gracias

Lujo

Hola Josue
He investigado sobre el tema y mis pesquisas no han dado el resultado deseado.
Estuve mirando tu blog, el buscador.
Según un comentario de Oloblog parece que ese problema también los tienen otros compañeros.
Sólo se me ocurre que te hagas con el buscador personalizado de Google. Es el único que he visto en webs. com o un buscador interno vía CSS.
Espero que te oriente un poco la respuesta.
Siento el retraso en la respuesta pero quería cerciorarme de todas las posibilidades.
Saludos!

wivith

Hola Lujazo!!!!!:
Muchas gracias por tu ayuda con el tema del buscador de recetas.
Echale un vistazo a ver....¡Por fi!.
Estoy de "probatinas"!.

Pochoncicos.

Lujo

Hola Wivith,
Tu buscador funciona perfectamente. Lo he estado probando y los resultados que ofrece están dentro de la normalidad.
Te doy la enhorabuena. Eres un AS con el blog.
Abrazotes enormes!!
Buen finde!

Ana

Holitas, ¿como estás, guapa?, bueno me paso para decirte que ya he modificado mi buscador, aún me falta ponerle el fondo, quiero ponerle el mismo fondo gris de mi main wrapper pero, de momento, se me está resistiendo lo de ponerle ese fondo, pero ¡¡caerá tarde o temprano!! jajajaja, ¿donde hay que poner exactamente lo de
background: url [aquí-tu-imagen] no-repeat;?

Gracias de nuevo por tus ayudas y sobre todo por tus palabras de ayer, no se si recibiste mi comentario pero te agradecí enormemente lo que me dijiste, hasta te lo he agradecido en mi blog, jajajajaja, ainssss
Un besote grandote y que tengas un buenísimo fin de semana

Lujo

Hola Ana
Voy por partes para no liarme, ¿ok?

1. Por lo que he visto en tu blog buscas un fondo para la parte donde escribes "la palabra clave en la búsqueda".
Una forma de enfrentarte a estas dudas es pensar que estás poniendo datos en el CSS. Sólo añades características.

2. Contestando a tu pregunta sería en la zona:
input.gsc-input {

En este caso sustituyes o añades background: color el que sea por

background: url(aquí-tu-imagen)no-repeat;

Supongo que ya tienes el modelo elegido, así que colocar la url será sencillo.

3. Recuerda que con padding lo puedes hacer más grande o pequeño.....el resto es cuestión de jugar con los números y negritas (bold, italic, normal) para colocarlo al gusto de cada cual.

4. Mi niña, publico todos los comentarios. No hay nada que agradecerme, sólo te dije lo que pensaba y me aconsejaron.
LadyMarian tiene razón en lo que dice. Su punto de vista es muy bueno.
Gracias por tus palabras. ¡¡Eres un sol!!

5. Si hay algo de lo que escribo que no te queda claro, dímelo (^_-). Si sé la respuesta no dudes que te diré....si no es así...pues no la sé. (-^o^-) (^_-)

Perdona mi lío mental a estas horas del sábado ;P
Miles de abrazotes!!!

Ana

¡¡YA ESTÁ!!, OEEEEE OEEEE, OEEEEE, el problema ahora es que, al ponerlo en gris se ve un poco oscuro, así que, lo mismo lo vuelvo a cambiar, ¡¡soy un culo de mal asiento!!, jaja, antes no me había salido porque no había puesto en el sitio correcto lo de
background: url(aquí-tu-imagen)no-repeat;

Te decía lo de mi comentario porque ayer, te volví a escribir y me temo que no le debí dar a "Publicar un comentario", ya que el comentario no ha aparecido, ¡¡estoy tonta!!, bueno, da igual , repito mis gracias por tus palabras que me sirvieron de mucho y debo pensar un poco más en mi y menos en los demás

Muchísimos besotes

Lujo

Muchas Felicidades Ana. ¡Eres una Crack!
No te preocupes por los colores y tonos. Ya encontrarás el adecuado.(-^o^-)
No sé que dominio tienes del Photshop, pero con él se pueden hacer múltiples combinaciones.
Si lo que buscas son texturas...recogí unas direcciones que puede te sirvan:
http://blogdelujo.blogspot.com/2010/01/texturas-patterns-backgrounds-fondos.html
Ya sabes que los blogs se construyen poco a poco, y sobre todo que esté a tu gusto.


Mi niña, a la única que le tiene que gustar el blog es a una misma. ¿Te imaginas ver constantemente algo que te entristece??.....Pues eso, al que no le guste "él se lo pierde".
Mil abrazotes enormes!!!

Ana

De momento lo voy a dejar en gris, al igual que la zona de las entradas del blog, he cambiado el tamaño de las letras , así se ve bien, me gusta
No uso Photoshop, todo lo que hago lo hago con el Paint Shop Pro, no se si lo conoces, para mi es como el Photoshop pero, más fácil de usar, todos los marcos de las imágenes de las recetas , el marco en el que estoy con mi perro en el blog, los montajes de mi perro y otro tipo de montajes que hago, los hago con ese programa, y eso que tengo una versión antigua, además también se puede trabajar con imágenes animadas, o sea gifs animados y ese tipo de cosas, vale para fotos y demás, a mi me gusta mucho, a base de practicar y de tutoriales por Internet fui aprendiendo a manejarlo poco a poco y con quebraderos de cabeza, jajaja, de todas maneras la gente hace maravillas con el Photoshop
Voy a mirar esa página que me has puesto de tu blog, a ver si veo algo japonés u oriental, que es mi debilidad, jajajaja
Hasta pronto, vas a acabar aburrida de mi, jejeje

Karla

Hola!, buen blog; es posible agregar el borde que quieras en el campo de entrada de texto, si se agrega la declaración !important, después del valor del borde, por ejemplo:

input.gsc-input {
border: 1px solid #0a0a0a !important;
}

=) Saludos y que tengas un estupendo día!

Lujo

@Karla

Holaaaaa
Si ahora, (que yo sepa hasta hace unos meses no lo admitía), Amén.
Ya sabes que el sr. Blogger es muy suyo para algunas cosas.


Muuuchas gracias!!!!
Abrazotes!
Buen finde!

Nagato

como se ase para poner una imagen en ves de la palabra buscar

y no se desaparece el con la tecnologia de gogle uso la nueva plantilla.

Lujo

@Nagato
En el buscador de Google, por ahora no se ponen imágenes.
El tipo que indicas es otro tipo de buscador más simple.
Saludos

Jorge Ángel Aussel

Ayer abrí mi página y el código para personalizar el botón sigue funcionando pero el código para personalizar el cuadro de búsqueda no. ¿Blogger habrá cambiado los códigos? Te agradecería mucho si encontrás alguna solución al problema.

Gracias.

Lujo

@Jorge Ángel Aussel
Hola,
Google cambió códigos y políticas el 1 de marzo. Entre ellas está lo que comentas.
Siento no poder dar una solución reciente ante algo acontecido que depende del sr. Google&Blogger.
Te deseo grandes éxitos en tu carrera profesional y web.
Saludos

Publicar un comentario en la entrada

(-^o^-) (^_-) (#^_^#) (ÖoÖ) (*^o^*) (>_<) ( ̄へ ̄)(;_・) (ô_Ó) (O_O) (ˇ~ˇ) (ToT)(Q____Q) ಠ_ಠ (。◕‿◕) [(--)]ZZzzz

- Si el comentario es anónimo hay muchas posibilidades que no se publique.

 


UP