6 ELEGANTES CAIXAS DE BUSCA PARA BLOG

                                                       

Olá Pessoal, hoje vou ensinar a vocês como colocar uma caixa de busca  em seu blog. Essa caixa é muito importante pois ela facilita a navegação dos seus leitores em seu blog, é muito inconveniente quando entramos em um blog que não contêm caixa de busca, eu mesmo já entrei em blogs assim e quando quis pesquisar sobre algo não encontrei a caixa de busca isso fez com que eu saísse do blog sem achar o que estava procurando. Por isso hoje vou compartilhar com vocês esse seis lindos modelos de caixa de busca, vamos lá.

Os códigos são bem simples e podem ser adicionados onde desejar, mas recomendo nos gadgets, para isso acesse o Painel do Blogger, vá Layout e clique em adicionar Gadget e escolha Html/JavaScript cole o código referente ao modelo desejado e salve.   

                   

ESTILO 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQz4XZXNm3XqLK8r4peSXnQEtlxXcZF29DoRbTWQdq6iyHhjEQnMiU4JkKeJ-EcOvg52E_F8w_CqtfWHHz7VQrqdbgkRNinAo0PuOqKfjX8fny15uPO2KDTcHVFHwd9QNqAuNLPsUFXHT5/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Buscar..." onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

ESTILO 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT0u3HyWA4sarmhTxHq3g1ASAnNShLd-fc_wryAVVuFgtBQuOi240B9eNdpfcm4q-fQdkfHe24ijAxSJSItCp3aTaugM5DEfH67tREUHlEEr_l8RntVD9z8i0jCuv85oVn5uIEfLBDaY4o/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Buscar..." onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

ESTILO 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2yHem_BF71CCtp2kfph8YbF2qtd_b8caCUo-e0HUoT63X4PVlKopVjh21u93k3oqhqB9kRC4EOuFiRLO3_Ma6t3GFrUVE7yHgkp-jPMIeYiWnjXYi7pHBBM9tcsxl1t8q539skYfZZST/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Buscar..." onfocus='if (this.value == "Buscar...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Buscar...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

ESTILO 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxb0viLJQdOf-epyw6yLEHNoBZMSc2Mj7hG0POeUHvg0KJL66c-UN6QB_34eeeW5_KK6tI1xYrPdTNPjVIdq_vfhHk9ZIK0zVLfquKKNYzgPUXN4n9QmGe6rlV0R0CDwPxqGEJNzcaU6G/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

ESTILO 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFkHiiGT0Hvr1cLVHQCoo2c5CDJXqVB5E8H4uTi1rnZqc9QWfjejQdRBWOye_cIdzpXzKS636jaZYcM_pnwIa9OGsHdUdrJD2uhzrU3PBnRQoZZxdjNcaZmcWTvu8S-eFnHbPipF9RUz-/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

ESTILO 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Rd980GSvivlNcnl_0F91mBKrd8rJm31gS-bQwpD4aLDAo-DWuLGxLgHYeYWKVwFxO5456thcD-wId9iUnvz9-C7Oj7F_LMKOpy5v9HtLO5guymvrVdQ3kjdfVBYxRW4WlvuZ5tFojnwz/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

O que achou das caixas de busca? Tem alguma dúvida ou sugestão? 

Comente e diga-nos o que achou.