Estilos prontos para caixa de pesquisa

Kon'nichiwa ♥

Tudo bem, anginhos?

Trouxe 5 estilos prontos para caixa de pesquisa. Vocês podem conferir a live preview clicando aqui.

Vamos aos códigos?

1. No Blogger, vá em Modelo> Editar HTML.
2. Clique em 'Prosseguir'. Tecle Ctrl F e procure por:

]]></b:skin>

3. Logo acima dessa tag, cole um dos códigos abaixo:

Estilo 01

.search{
margin-left: 30px;
font-family: Tahoma;
}
.searchbar{
height: 18px;
width: 140px;
margin-left:0px;
margin-top:-45px;
margin-bottom:-18px;
color: #ccc;
border:solid 1px #ddd;
padding:3px 5px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #f5f5f5;
}
.searchbut{
background: #FAEBD7;
color:#fff;
padding:0 5px 2px 5px;
height:26px;
margin-top: -20px;
margin-right: -35px;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
border: 0px solid #000;
-webkit-transition-duration: .70s;
}
.searchbut:hover {
background:#FFDAB9;
-webkit-transition-duration: .70s;
}

Estilo 02

.search{
margin-left: 30px;
font-family: Tahoma;
}
.searchbar{
height: 18px;
width: 140px;
margin-left:0px;
margin-top:-45px;
margin-bottom:-18px;
color: #f5f5f5;
border:solid 2px #f5f5f5;
padding:3px 5px;
background: #000;
}
.searchbut{
color:#000;
padding:0 5px 2px 5px;
font-family: helvetica;
height:26px;
margin-top: -20px;
margin-right: -35px;
background: transparent;
border: 0px solid #000;
}

Estilo 03

.search{
margin-left: 30px;
font-family: helvetica;
}
.searchbar{
height: 18px;
width: 140px;
margin-left:0px;
margin-top:-45px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-bottom:-18px;
color: #6495ED;
border:solid 1px #6495ED;
padding:3px 5px;
background: #f5f5f5;
}
.searchbut{
background: #D9D9D9;
color:#4682B4;
padding:0 5px 2px 5px;
height:26px;
margin-top: -20px;
margin-right: -35px;
border-radius:25px;
border: 0px solid #000;
-webkit-transition-duration: .70s;
}
.searchbut:hover {
border-bottom: 1px solid #4682B4;
-webkit-transition-duration: .70s;
}

Estilo 04

.search{
margin-left: 30px;
font-family: arial;
}
.searchbar{
height: 10px;
width: 140px;
margin-left:0px;
margin-top:-45px;
margin-bottom:-18px;
color: #dcdcdc;
border:solid 1px #dcdcdc;
padding:3px 5px;
background: #f5f5f5;
}
.searchbut{
background: #f5f5f5;
color:#dcdcdc;
font-family: arial;
font-size: 10px;
padding:0 5px 2px 5px;
height:15px;
margin-right: -35px;
border: 0px solid #000;
}

Estilo 05

.search{
margin-left: 30px;
font-family: arial;
}
.searchbar{
height: 25px;
text-align: center;
width: 140px;
margin-left:0px;
margin-top:-45px;
margin-bottom:-18px;
color: #dcdcdc;
border:solid 2px #fff;
padding:3px 5px;
background: #5151A4;
}
.searchbut{
background: transparent;
color:#5151A4;
font-size: 25px;
padding:0 5px 2px 5px;
height:28px;
margin-top: -20px;
margin-right: -35px;
border: 0px solid #000;
}

4. Agora vá para Layout. Adicione um novo gadget de HTML/Javascript e cole:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="GO" />
</form>

5. Salve.

Créditos - Sweet Poison.