3 Modelo de Caixinhas de Pequisa (Exclusivo)

|| ||
Olá pessoal! Hoje vim com uma postagem rápida, pois daqui a pouco vou sair para fazer trabalho, um trabalho que estou considerando meio difícil, pois temos que falar dos anfíbios em forma de telejornal, imagine eu repórter. Mas mudando de assunto, no momento não sei o que postar, não teve mais pedidos na ask, mas resolvi trazer 3 modelos de caixinhas de pesquisa feitas por mim (depois ensino a como fazer).


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
Esse é o modelo mais simples.
<style>
.search{
float: left;
}
.searchbar{
background: #ffcccc;
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 #ff7766;
font-family: 12px Open Sans;
box-shadow: inset 1px 1px 0px #fff;
text-shadow: 1px 1px 0px #ff7766;
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="" />
</form>
Modelo 2
Modelo arredondado
<style>
.search{
float: left;
}
.searchbar{
background: #ffcccc;
height: 25px;
width: 222px;
border: none;
border-radius: 15px;
border: 1px solid #ff7766;
font-family: 12px Open Sans;
box-shadow: inset 1px 1px 0px #fff;
text-shadow: 1px 1px 0px #ff7766;
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="" />
</form>
 Modelo 3
Modelo um lado arredondado
<style>
.search{
float: left;
}
.searchbar{
background: #ffcccc;
height: 25px;
width: 222px;
border: none;
border-radius: 0px 100px 100px 0px;
border: 1px solid #ff7766;
font-family: 12px Open Sans;
box-shadow: inset 1px 1px 0px #fff;
text-shadow: 1px 1px 0px #ff7766;
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="" />
</form>
Esses são os modelo.
Para mudar as cores é só mudar o que está em negrito.
background: é a cor de fundo da caixinha
border: é a cor da borda
text-shadow: é a sombra da fonte
color: é a cor da fonte
Para mudar o tamanho da caixinha é só mudar o que está italico
Espero que tenham gostado e se usarem dê créditos ao Sweet.