TUTORIALES DE BLOGGER: Personalizar caja de busqueda

Hola, hola!! Cómo está yendo la semana?? La mía un poco, bastante caótica, entre una cosa y otra no he podido hacer todo lo que quería, será que algunas veces me exijo demasiado y mi cuerpo se pone de huelga. Por si tenía poco con un cerebro rebelde e independiente... ahora también se está rebelando mi cuerpo. He tenido días tontos... por eso no terminado de contestar e-mails y comentarios... Nadie es perfecto, qué le vamos a hacer.

Vale de lamentos y penitas, esto no puede ser!!! Pero bueno, pese a las adversidades... aquí estoy, un jueves más, con otro tutorial!! De todos modos a ver si mi VALENTÍN lee esto, le doy un poco de penica (aunque ha tenido paciencia conmigo estos días) y cae algo... que no sea ir a ver La Jungla de Cristal el viernes.

También podéis presionarle en los comentarios diciéndole: Iker, no le obligues a ir a ver Jungla de Cristal y lleva a May a ver una peli de verdad o a comer tiramisú del bueno bueno!! :)

Hoy aprenderemos a poner un buscador algo diferente al predeterminado por blogger. Es muy sencillito (pese a que veáis un montón de códigos raros) y podéis conseguir un buscador como el que yo tengo a la derecha.

En esta página tenéis, aunque sea en inglés, las instrucciones para colocarlo. Pero bueno, os echaré una manica explicando paso a paso qué es lo que tenéis que hacer... y cómo modificarlos.

No os asustéis, va a aparecer mucho código pero, en realidad, es muy poquito lo que tenéis que cambiar del código original (solo las partes que veis resaltadas con color). Esta entrada es para mirarla y seguirla paso a paso. Si la leéis por encima quizá os volváis locos, pero si seguís los pasos con tranquilidad, seguro que os va a quedar perfecto. Os lo prometo.

Estos buscadores se instalan añadiendo un GADGET HTML en vuestro menú de diseño. Tan sencillo como eso. Los pasos que debemos seguir son los siguientes:

Copiamos el siguiente código:

Lo pegamos en el Gadget HTML
Guardamos
Lo colocamos donde queramos.

Así de fácil. Con esto conseguiremos el buscador de color azul (el primero que sale en la foto), eso sí, en inglés... Lo podemos dejar así, pero si queréis podemos ir un poquito más allá y cambiar algunas cosillas para conseguir un buscador algo más personal.

Ahora os voy a explicar un poquito qué son las letras y números resaltados. Aunque yo os voy a dar las explicaciones por partes, todas las modificaciones tenéis que hacerlas sobre el mismo código, el código que está justo arriba.

Para comprobar cómo os queda el buscador, solo tenéis que guardar el gadget y darle a vista previa. Así veremos cómo está quedando el resultado. Si no nos convence, volvemos al GADGET y seguimos trasteando.

Esta modificación nos va a permitir cambiar el color del botón de buscar y cambiar el texto de Search y Search TechFrost por el texto que más nos guste.

Relative:

Este código permite que nuestro buscador, de forma automática, adapte su tamaño, al lugar en el que lo colocamos. Así que esto no lo tocaremos.

Width: 100%

Este es el tamaño del buscador. En principio podéis dejarlo así, para no complicar las cosas.

background-color: #4d90fe

Este es el color de la cajita donde pone Search. Podemos cambiar el color por el que más nos guste. En esta página podéis encontrar todos los colores del mundo y sus correspondientes códigos. Para cambiarlos solo tenéis que dejar este símbolo # y colocar, justo después, el código del color que más os guste.

Search TechFrost:

Este es el texto que aparece dentro de la cajita del buscador. Podemos ponerlo que queramos. Escribiremos dentro de las comillas.

Search:

Este es el texto del botón. Lo podemos cambiar por buscar.

Ejemplo código modificado:

Este apartado va a aparecer en todas las modificaciones que haga, las resaltaré con colores. Así veréis los cambios que voy haciendo y el resultado que obtenemos. Simplemente es una ayuda.

Podemos ir un poquito más allá y cambiar el color del texto del botón de buscar. En el ejemplo anterior el color del texto es el que viene predeterminado por la página de la que hemos pegado el código. Ahora vamos a trabajar sobre la siguiente parte del código:

Para cambiar el color del texto volvemos a la página donde aparecen los códigos de color, buscamos el color que nos guste, y lo copiamos en la parte resaltada con azul.

Puede ser que cuando escribamos algo en nuestro botón de buscar (donde hemos puesto el color) no nos quepa. Entonces cambiaremos el tamaño de la fuente, la haremos un poquito más pequeña para que entre, perfectamente, en nuestro botón. Cambiamos la parte resaltada en verde. Por defecto son 14px, pero podemos poner el tamaño que queramos, 12px, 10px...

Ejemplo código modificado:

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 16px;
color: #3A3A3A;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #F64BA9;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;

Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.

También podemos modificar el color de la cajita de búsqueda, el lugar donde nosotros escribimos lo que estamos buscando.Vamos a trabajar sobre la siguiente parte del código:

#search-text {
  font-size: 14px;
  color: #ddd;
border-width: 0;
  background: transparent;

El color verde nos indica el tamaño de la fuente del texto que hemos escrito dentro de la cajita. Podemos poner el texto más grande o más pequeño. Colocamos el tamaño que queramos y siempre escribimos después px. No borréis el punto y coma nunca.

El color morado nos indica el color del texto. Para cambiarlo vais a la página de antes, elegimos el color y lo pegamos detrás de #

El color amarillo nos señala el color del fondo de la cajita. En este caso es transparente, sin color. Pero podemos poner el color que nos de la gana. Para hacerlo, borraremos transparent y en su lugar colocaremos # seguido del código de color que queramos.

Ejemplo código modificado:

#search-text {
  font-size: 12px;
  color: #3A3A3A;
border-width: 0;
  background: #FDDCEE;

Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.

De todos modos yo os recomiendo que, en la cajita donde escribimos lo que buscamos lo mejor es que pongamos un fondo blanco o transparente y un color de fuente gris o negro. Este sería el código que tendríamos que poner para conseguirlo:

#search-text {
  font-size: 12px;
  color: #D0D0D0;
border-width: 0;
  background: #FFFFFF;

Otra opción es colocar un fondo, como tengo puesto yo en mi buscador. Para ello volvemos a esta parte del código, a la parte que corresponde al botón de buscar.

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
    font-size: 14px;
    color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
    background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;

Antes hemos visto que podemos modificar el color sustituyendo el código BACKGROUND-COLOR por el código del color que queramos. También existe la opción de poner un fondo. Para ello haremos lo siguiente:

Buscar una imagen
Guardarla en nuestro ordenador
Subirla a algún lugar: album picasa, dropbox...
Una vez subida pincharemos con el botón derecho la imagen y copiaremos la URL.

Os recomiendo hacer esto, guardar y subir la imagen, porque si copiamos, directamente, la dirección URL de la imagen... puede suceder que la persona que haya subido la imagen o la web en la que esté desaparezca, entonces nos quedaremos sin fondo en el buscador. Aunque podemos volver a colocar otro. Esto os lo dejo a vuestra elección, es solo una recomendación.

Una vez que tengamos la URL copiada vamos al lugar del código anterior donde pone Backround-color, borramos -color y, justo después de

los dos puntos ponemos lo siguiente:

URL(pegamos la URL DE LA IMAGEN)repeat;

De esta manera ya tendremos un estampado en nuestro botón de buscar.

Nos tendría que quedar algo así:

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 16px;
color: #5D5D5D;
text-align: center;
line-height: 42px;
border-width: 0;
background:URL(pegamos la URL DE LA IMAGEN)repeat;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;

Ejemplo código modificado:

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 16px;
color: #5D5D5D;
text-align: center;
line-height: 42px;
border-width: 0;

background: url(https://lh6.googleusercontent.com/-NXPMSNZrKyI/URxb0252QiI/AAAAAAAAEj8/wJpCLQhf8JQ/s200/3194771.png)repeat;

-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;

Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.

También podemos cambiar el color y el estilo de la línea del buscador. Es muy fácil. Tenemos que ir a esta parte del código:

#search-form {
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;

Border es el código utilizado para nombrar el borde de nuestro buscador.

1px es la anchura de la línea. Si queremos que la línea sea más ancha pondremos un número mayor, aunque no os lo recomiendo.

Solid: la linea es sólida, sin puntitos. Si queremos poner puntitos cambiamos solid por dotted.

#search-form {
height: 40px;
border: 1px dotted #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;

#999 es el color de la línea. En la página que os he indicado más arriba, podéis elegir un color y cambiarlo. Así conseguiréis el color de línea que queráis.

#search-form {
height: 40px;
border: 1px dotted #DDDDDD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;

Otra opción es quitar las líneas. Para ello pondremos lo siguiente:

#search-form {
height: 40px;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;

Ejemplo código modificado:

#search-form {
height: 40px;
border: 1px dotted #DDDDDD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;

Así es cómo queda:

Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.

Esto ya es la guinda del pastel. Podemos cambiar el tipo de fuente del buscador. Para ello os recomiendo que vayáis a esta página.

Elegís la letra que más os guste.
Pincháis sobre ella y automáticamente os copiará un código. No hace falta que le deis a copiar y pegar
Ahora vais a la siguiente parte del código y pegamos con el ratón el código de la fuente justo debajo de WIDTH:

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
font-size: 16px;
color: #5D5D5D;
text-align: center;
line-height: 42px;
border-width: 0;

background: url(https://lh6.googleusercontent.com/-NXPMSNZrKyI/URxb0252QiI/AAAAAAAAEj8/wJpCLQhf8JQ/s200/3194771.png)repeat;

-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;

Así es cómo queda:
Al pegar el código anterior en el Gadget HTML nos quedará el cuadro de búsqueda de la siguiente manera.

Y esto es todo.

Personalizar caja de busqueda

No hay comentarios: