Colocar una Barra de Búsqueda en el Blog

Pasos(5)

1)Holii amigos bueno este es un tutorial para colocar una busqueda en sus blog bueno vamos a "Diseño" y añadir un nuevo gadget, HTML/javacript lo añadimos.

2)Luego copiamos este codigo:

<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 que esta sub rallado es lo que van a cambiar para perzonalizarlo.

3) Modificación sencilla.

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.

5)Tamaño y color de la fuente

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.

Bueno esto a sido todo espero que les haya ayudado Adiós!