Buscadores personalizados para blogger

Hola buenas, hoy os traigo un tutorial acerca de cómo instalar buscadores personalizados en blogger, para que quede más bonito en nuestro blog. 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:

<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}
#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#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;
}
</style>
<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Search TechFrost' type='text'/>
    <button id='search-button' type='submit'><span>Search</span></button>
  </form>
</div>

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

<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
}
#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}
#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: #F64BA9;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}
</style>
<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='¿Qué buscas?' type='text'/>
    <button id='search-button' type='submit'><span>Buscar</span></button>
  </form>
</div>

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.

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: 

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

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 ¿veis como no ha sido tan difícil?. Espero que no haya cundido el pánico. Sé que sois capaces de hacerlo. Solo tenéis que buscar un ratito y hacerlo. Si os ha gustado este post ya sabeis lo que teneis que hacer darle a "me gusta" y compartir en las redes sociales, si además os quereis suscribir por correo no os voy a decir que no jajaj, yo por si acaso os dejo el link aquí abajo
Este tutorial ha sido extraído de: creativemindly tiene posts increíbles, os recomiendo que visiteis su web.