Como poner un buscador personalizado en tu blog

Bienvenido al turorial de como colocar un buscar personalizado en tu blog, es muy facil, ¡tan solo sigue los pasos!

1. Estos buscadores se instalan añadiendo un gadget html en vuestro menú de diseño, así de simple y tan solo consta de un paso:

• Copiamos el siguiente código

• Lo pegamos en el gadget html, guardamos y lo colocamos donde queramos.

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

2. Si quereis modificar color, texto... seguid los siguientes pasos:

Relative: 

Este código nos permite que el buscador  de forma automática adapte su tamaño, así que no lo tocaremos, ya hace el trabajo por nosotros.

Width: 100%

Este es el tamaño del buscador al igual que antes, lo dejaremos tal cual esta.

background-color: #4d90fe 

Este sera el color de la cajita donde pone search, Podemos cambiar el color por el que queramos, tenéis un ejemplo en la imagen al principio de este tutorial, si buscáis otro tenéis los códigos por google.

Search TechFrost: 

Este sera el texto que aparecerá dentro de la cajita del buscador, ¡pon lo que quieras!

Search: 

Este es el texto del botón, puedes ponerlo a tu gusto.

Por ultimo decir que se pueden cambiar infinidad de cosas, tales como fondo del botón de búsqueda cambiar la imagen del propio botón, tipo de letra, tamaño, color... esto es solo una pequeña ayuda para colocarlo en vuestro blog.

¡Espero que os sea útil!