Agregar buscador personalizado en blogger

Veamos un ejemplo de personalización utilizando tan solo CSS. Para incluirlo, sigue los pasos explicados anteriormente y en el paso 3 sustituye el código por este otro, Éste es el aspecto del cuadro de búsqueda en funcionamiento:

Para póder tener un buscador de este moto, tienen que agregar el siguiente código en Diseño/HTML/Javascript.

<style>

#ba-cuadrobusq .ba-textobusq {

border: 1px solid #DDD;

box-sizing: border-box;

color: black;

font-family: 'Arial', serif;

font-size: 14px;

padding:9px;

width: 200px;

transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

}

#ba-cuadrobusq .ba-textobusq:hover {

box-shadow:inset 1px 1px 8px gainsboro;

}

#ba-cuadrobusq .ba-textobusq:focus {

background-image: -webkit-linear-gradient(white,white);

background-image: -moz-linear-gradient(white,white);

background-image: -ms-linear-gradient(white,white);

background-image: -o-linear-gradient(white,white);

background-color:white;

outline:1px solid #2F5EAF;

color:black;

font-style:normal;

box-shadow:inset 1px 1px 8px gainsboro;

border:1px solid #2F5EAF;

}

#ba-cuadrobusq .ba-enviar {

background:#2F5EAF;

border: 1px solid #2F5EAF;

color: white;

cursor: pointer;

font-family: 'Arial', sans-serif !important;

color: #fff;

cursor: pointer;

line-height: 19px;

padding: 8px 10px;

text-decoration: none;

}

#ba-cuadrobusq .ba-enviar:hover {

background:#2F5EAF;

}

</style>

<form id="ba-cuadrobusq" action="/search" style="display:inline;" method="get"><input class="ba-textobusq" name="q" type="text"/> <input class="ba-enviar" value="BUSCAR" type="submit"/></form>

Si quieren darle personalidad a su gusto, pueden modificar las propiedades CSS, deberán tener conocimientos básicos sobre ese lenguaje.