3 Modelos de caixa de pesquisa simples

Olá pessoal! Hoje trouxe 3 modelos de caixa de pesquisa simples para vocês. Pois modelos de caixa de pesquisa eu só trouxe um vez.

Esse modelos não fui eu quem fiz os créditos vai estar no final do post.

Vamos lá!

Bom para colocá-las nos seu blog é só ir em Layout>> Adicionar um Gadget>> HTML/JavaScript e colar o código do modelo da caixinha escolhida.

Modelo 1

<style>
.search{
float: left;
}
.searchbar{
background: #f1a9a9;
height: 25px;
width: 222px;
border: none;
-webkit-box-shadow: inset 0px 0px 2px #dce8ea;
-moz-box-shadow: inset 0px 0px 2px #dce8ea;
-ms-box-shadow: inset 0px 0px 2px #dce8ea;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border: 1px solid #d87878;
font-family: 12px Open Sans;
text-shadow: 1px 1px 0px #f1a9a9;
float: left;
margin: 5px;
color:#d87878;
text-align: center;
}
</style>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='' type="text" value="Procure + Enter" />
</form>

Modelo 2

<style>
.search{
float: left;
}
.searchbar{
background: #cfc2dc;
height: 25px;
width: 222px;
border: none;
-webkit-box-shadow: inset 0px 0px 2px #dce8ea;
-moz-box-shadow: inset 0px 0px 2px #dce8ea;
-ms-box-shadow: inset 0px 0px 2px #dce8ea;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border: 1px solid #ac93c9;
font-family: 12px Open Sans;
text-shadow: 1px 1px 0px #ac93c9;
float: left;
margin: 5px;
color:#fff;
text-align: center;
}
</style>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='' type="text"
value="Procure + Enter" />
</form>

Modelo 3

<style>
.search{
float: left;
}
.searchbar{
background: #efd3dd;
height: 25px;
width: 222px;
border: none;
-webkit-box-shadow: inset 0px 0px 2px #dce8ea;
-moz-box-shadow: inset 0px 0px 2px #dce8ea;
-ms-box-shadow: inset 0px 0px 2px #dce8ea;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border: 1px solid #ee6f9b;
font-family: 12px Open Sans;
text-shadow: 1px 1px 0px #fabdd2;
float: left;
margin: 5px;
color:#fff;
text-align: center;
}
</style>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='' type="text" value="Procure + Enter" />
</form>

Depois de escolhido o seu modelo e ter alterado o necessário. Salve!

Pronto era isso, espero que gostem!

Créditos: Senhorita Liberdade