CÓMO AÑADIR UN BUSCADOR PERSONALIZADO EN TU BLOG

CÓMO AÑADIR UN BUSCADOR PERSONALIZADO EN TU BLOG

Activar este buscador en blogger es muy fácil. Simplemente debes agregar un gadget al diseño de blogger y colocar 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: #e27231;
    -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='Busca lo que quieras' type='text'/>
    <button id='search-button' type='submit'><span>Buscar</span></button>
  </form>
</div>

Si observas muy bien puedes realizar algunas modificaciones. 

Lo que esta en naranja es el color del botón buscar y lo que esta en verde y celeste son los textos que aparecen en el cuadro de buscar, también puedes modificarlo a tu gusto.