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
ESTILO 1
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU_X8JbD_1a-OkD039hponV0lQVqYtyI5EhsTsQN6f5COJ770rUP1dMGFGCBvVI1jBRaZccgJy1B2dKfLGQbofGo2LuM4jSEwo3tEc57JW4fNKxjFN_XuRfO7izMXogT7H_IX-tu3S0nA0/) 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/AVvXsEixzXP0crHw5sr5s2ND7lmQFQS-HCYoXhKU8RDJmhrkedLiY2pBw5V9jRMz-AimvCGBSFeemUkboHZz5AF8fZBC7ju3gykIcgI-6ed3uy-5ljK2JA4lzTfq1OH5ZruyAsMGGoqdwvY1ZeWh/) 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/AVvXsEjCL8daSc2O-KFUE_42kYGBDjgCajkf7Mv15ugdoEy-tEV_VNiJO5kMTGpJGL7fBD5eAyoLCQ2rNOlXDue20B5RFA0b7-jVI3N88Zln8drU55MSjZmIns3JLDCvCktbR3XZo_X51kl2RFgN/) 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/AVvXsEjGeFU7FStAAEz4xe9FbcCGXyvA7i7Ut6-X_sXe6v_YwwPMPW-MOw237zVAQ5-a3VLJCnzcou8YljfDFpOPkb-poPxznUOEQj8KktStPTrZ3f-5rRBbVBUO9wbyAPnZ21-FpJUqpfQyuWfK/) 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/AVvXsEjbFZG9EOYhnO1R74PRJSZYWwtIpX2sdnnXiU-iAgs-NltieXsqSroqOLuCBGdWOllmfbHPap-5XwBxzRikmZacnLI4O1xH94qExdShx1x0pTmDPVWrwzqnwNxfb2rDWykosDq5siHDeUt3/) 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/AVvXsEiNUJ0eX1jzGeQq13GuGQltKMy2Rkt5RsS3YFlkUUtdpOC56pRCL8E-MKVFwksdEggVU2HTMX6TzDmiP4oT2BPxWrc1jjDx28mxNSoX_N5LzPW33zQSlSw-Tq7zGFdQzANcnvnsE-tG9HRO/) 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>
Nenhum comentário:
Postar um comentário