6 modelos de caixas de busca prontinhas pra colocar no seu blog

Há muitos blogs que usam um pequeno retângulo para pesquisar no blog, mas a forma de plana não atrai a atenção, especialmente aos visitantes, muitos visitantes e até mesmo eu quando estou navegando através de alguns sites e blogs e não presto atenção ao retângulo para a caixa de pesquisa, então vamos aprender a personalizar essas caixas de busca ao seu gosto.

Para começar a usar este novo gadget, vá para o  layout >  e clique  em Adicionar um Gadget  e 
selecione  HTML / JavaScript e dentro da caixa branca cole o código abaixo de sua preferencia:

Modelo 1

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdDFLIGwTHXCm6t0d-EIBZOUAg_Dj3OyuuwqkKO0CymGmMtuY1y0Wvz18x3BDwa7Juk-K792LqcEgCY9UhZQ4yfJwJIeTu9sOZBAkaVd9jFP3ga0ki2wCXFHxxIOSSMTeq-gKZyPGhGwKn/) 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>

Modelo 2

 <style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87v2IxWB8UmZIBMbJCFPQximEvU_0OzlAtPafrCV9drzcDY_oSNLv7j43D46XBVLHXi6m6YwK5aS9Pm6HaBgaueazMhFVT4qrh4n5tWtIpwqZZuflp_3EIP8sYsEro-JpRGLbJqsOxNxX/) 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>

Modelo 3

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6avnIf1lEB8gal0IvhOZ6XBBxqo4NFzEg-3ykIERMnTPubrCyNAtERFzAWN1r9_DWiDo__6po5ZFrqBD7-GZC_437r1IGhSIApbAWubAUOREqjzgnMLfeeCvpgCc1yKyDtFxPcCZQTwd-/) 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="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Modelo 4

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNZyHNQfv58wR1c6Hv7ERvqlYfsvxy_Xy9s7Z8sSjN6iDyjximu154EJTBmaHqr94M5mdUbl3nQv7d8XIqeTvzTUGNyX0-zbYRonkNlIC744umRIVpnQwEVIv3I-zut4ITsuLVgyPEYwa/) 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="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Modelo 5

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJ5T6k5YSIOoLmqpYpjOY-jxGRuQ9N2q89WQ-QgcwYctXGpdQqQoXusKF_TFF0zd1Aaf0zyjxuYehBumKM2cuy39ZE8oAR0E13IHWYSB6aADSYGEZIzNMUVxxkzl3sceLavelv2lvKIOw/) 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="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Modelo 6

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_zCiEgEwlbCUWnXVMG88zjenaJwLqYyOgYiHG8BbsTpjucIC2wFcwI0NXsL6IIQd9j4043OBnxFaWZrkYmfBNQwwZcHyFgtgo4a21-DY9HSD4wY0bHZ_SiZ5he8HjIrDrLXllaJmgPQW/) 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>

Depois de ter escolhido o modelo de sua preferência, salve e pronto!
Até a próxima.