TUTORIAL: COMO PONER UN BUSCADOR INTERNO ESTILO GOOGLE EN TU BLOG

Vídeo  

no disponible

Teoria  

Te mostramos paso a paso como colocar un buscador interno con el estilo de Google

Coloca el siguiente código en un Gadget HTML/JavaScript:
copiamos todo el código en rojo
<style type="text/css">
/* Boton y borde del buscador */
#search-btn {
width:70px;
height: 31px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-AZkx2j_GDlg3J5mTH30rqyE0MEs61y6o4lhozcxeH76UAz4XsUJEo26Cffc0g_nFOlNeneZAw0xNl_A1dXmTS1fg1qIQHwCw9Ss15EP5yLlsva8MJtBCmfjfvx4NTdq1EZbnJR7Vi2T-/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:250px;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 */
</style>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Buscas algo en especial?...&quot;;}' onfocus='if (this.value = &quot;Buscas algo en especial?...&quot;) {this.value = &quot;&quot;;}' type='text' value='Buscas algo en especial?...'/>
<input id='search-btn' type='submit' value=''/></form>

Si no queda bien, o queda desalineado
Entonces prueba colocando este código en lugar del anterior:
<style type="text/css">
/* Boton y borde del buscador */
#search-btn {
width:70px;
height: 31px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-AZkx2j_GDlg3J5mTH30rqyE0MEs61y6o4lhozcxeH76UAz4XsUJEo26Cffc0g_nFOlNeneZAw0xNl_A1dXmTS1fg1qIQHwCw9Ss15EP5yLlsva8MJtBCmfjfvx4NTdq1EZbnJR7Vi2T-/s1600/ico-search.png) no-repeat #4d90fe center;
font-size:0;
position: relative;
top: 0px;
padding: 11px;
margin: 0px 0px 0px 4px;
border: 1px solid #3079ED;
}
#search-box {
float:left;
width:250px;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 */
</style>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Buscas algo en especial?...&quot;;}' onfocus='if (this.value = &quot;Buscas algo en especial?...&quot;) {this.value = &quot;&quot;;}' type='text' value='Buscas algo en especial?...'/>
<input id='search-btn' type='submit' value=''/></form>