Tutorial: Como poner un buscador interno estilo Google en tu blog

¡Comparte el tutorial!

Tweet

Si te gusta que tu blog esté siempre con estilo y sea llamativo entonces este buscador interno para tu blog te va a a gustar.


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

Puedes ver el resultado final en este blog [enlace]

Dificultad:

Fácil

Paso 1:

Coloca el siguiente código en un Gadget HTML/JavaScript:

<style type="text/css">
/* Boton y borde del buscador */
#search-btn {
width:70px;
height: 31px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIthjoLUYEI57_3N_uCWtbSSYl3MEDyrXdPWVuyt2kl2w0WVes5C7-thidr00PxoxTbYjGodgeNoe5Ux9suZoNImW6Ge-LDqIORgB-mIL9MYErUFaRmNoD044rAnHJ1ai16yV4ilhblAKB/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 igual que aquí:

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/AVvXsEiIthjoLUYEI57_3N_uCWtbSSYl3MEDyrXdPWVuyt2kl2w0WVes5C7-thidr00PxoxTbYjGodgeNoe5Ux9suZoNImW6Ge-LDqIORgB-mIL9MYErUFaRmNoD044rAnHJ1ai16yV4ilhblAKB/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>

El width:250px; en rojo es para el ancho de la caja, si deseas que sea más grande o más pequeña entonces modifica esa cantidad a tu gusto.

Fin del tutorial