Buscador personalizado para el blog

Incluir un cuadro de búsqueda personalizado, para facilitar al visitante la búsqueda de un tema determinado en el blog.

Para insertarlo en un Gadgets entramos en

• Diseño ▶ Añadir un Gadget  ▶ HTML/Javascript y copias el código.

<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 30px;
    width: 190px;
    border: 1px solid #E6E4E5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #ffffff;
    overflow: hidden;
}
#search-text {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: #FFFFFF;
}
#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #000000;
    outline: none;
}
#search-button {
    position: absolute;
    top: -1px;
    right: 20px;
    height: 35px;
    width: 100px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 12px;
    font-syle: bold;
    color: #ffffff;
    text-align: center;
    line-height: 22px;
    border-width: 0;
    background: #F160A8;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 2px 10px 10px;
    cursor: pointer;
    border: 1px solid #000000;
}
</style>
<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Search...' type='text'/>
    <button id='search-button' type='submit'><span></span>Buscar</button>
  </form>
</div>

Una de las mayores ventajas de este cuadro de búsqueda, es lo fácil que es de añadir y personalizar.

background: #F160A8: para cambiar el color de fondo del botón de buscar.

Ver tabla de colores hexadecimales.