Buscador Interno estilo Google

Seguro que muchos de ustedes han visto que con el nuevo diseño de Google su buscador tambien ha cambiado de diseño y algunos han quedado fascinados con dicho diseño y han querido agregarlo en sus blogs de Blogger, pues bien hoy les enseñare como agregar un buscador interno con el estilo del buscador de Google.

Para agregar este truco primero debes agregar los estilos arriba de ]]></b:skin> :

/* Boton y borde del buscador */
#search-btn {
width:70px;
height: 31px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd_O-pdncAakBprwTG1o9UWq8cbXAwQ5qTN8xYklvOHcRJLf6EgkYSNMji3q79G6GeZzeNh8zzerTfMpjaMMY1p5rjQGXpj8f7cX2pm5mqDBBJuO2xibzywH_85IUyjPJPX2CWQtw8WvQZ/s1600/ico-search.png) no-repeat #4d90fe center;
font-size:0;
padding: 1px;
margin: 0px 0px 0px 12px;
border: 1px solid #3079ED;
}

#search-box {
float:left;
width:300px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
}
/* Fin del codigo */

Ahora solo queda añadir el cuerpo del buscador y esto lo haces pegando en un Elemento HTML/JavaScript lo siguiente:

<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value=''/></form>

Con width:300px; puedes ajustar el ancho del buscador de acuerdo a tu blog.