Caixa de pesquisa [5 Modelos] [004]

Hi bunnie's! Hoje decidi rebolar alguns modelos lindos para caixa de pesquisa, os créditos vão para o blog The Moon Reverse, ok? O modelo funciona para todas as caixinhas de pesquisa, desde que sejam a aplicada no gadget, se for a caixa de pesquisa padrão do blog ele não ira funcionar. Pois bem vamos ao tutorial?

1. Vá em Layout e abra um novo  Gadget Java/Script  e dentro cole:

Códigos

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="Seu texto da pesquisa!" />
<input class="searchbut" type="submit" value="Vai" />
</form>

A onde esta escrito "Seu texto da pesquisa!" troque por algo que ache melhor, onde esta escrito "Vai" é o que fica aparecendo no botão de pesquisa. Agora que colocou no gadget, salve e vamos para o passo dois do tutorial.

2. Escolha um dos modelos abaixo, assim que achar um de seu agrado vá até o HTML do seu blog e procure por   ]]></b:skin>, assim que achar cole o código acima dele:

Modelo 1

Códigos

.search { /* Não apague, geral da caixinha */
float: center;
margin-top: 3px;
margin-bottom: 1px;
}
.searchbar {
width: 199px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
background: #f9f9f9;
border: #f0f0f0 solid 1px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
font-size: 9pt;
letter-spacing: .1em;
text-transform: lowercase;
color: #ccc;
text-shadow: 1px 1px 0 #ffff;
box-shadow: inset 1px 1px 0 #fff;
outline: none;
}
.searchbar:hover { outline: none;}
.searchbut { /* Botão da pesquisa */
margin-left: -8px;
background: rgb(255,232,236);
border: #ffcfd7 1px solid;
box-shadow: inset 0 12px 0 #ffeef1;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
font-size: 9pt;
letter-spacing: .1em;
color: #fff;
text-shadow: 1px 1px 0 #ffcfd7;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
}s

Modelo 2

Códigos

.search { /* Não apague, geral da caixinha */
float: center;
margin-top: 3px;
margin-bottom: 1px;
}
.searchbar {
width: 194px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
background: #ede7ec;
border: #ddd2dc solid 1px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
font-size: 9pt;
letter-spacing: .1em;
text-transform: lowercase;
color: #d2c3d1;
box-shadow: inset 1px 1px 0 #f3eff3;
outline: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.searchbar:hover { outline: none;}
.searchbut { /* Botão da pesquisa */
margin-left: -5px;
background: #e6ebef;
border: #d0dbe4 1px solid;
box-shadow: inset 0 12px 0 #eef2f5;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
font-size: 9pt;
letter-spacing: .1em;
color: #fff;
text-shadow: 1px 1px 0 #d0dbe4;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

Modelo 3

Códigos

.search { /* Não apague, geral da caixinha */
float: center;
margin-top: 3px;
margin-bottom: 1px;
}
.searchbar {
width: 194px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
background: #ffedf0;
border: #ffd9df solid 1px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
font-size: 9pt;
letter-spacing: .1em;
text-transform: lowercase;
color: #ffc1ce;
box-shadow: inset 1px 1px 0 #fff;
outline: none;
}
.searchbar:hover { outline: none;}
.searchbut { /* Botão da pesquisa */
margin-left: -5px;
background: #f8f8f8;
border: #ebebeb 1px solid;
box-shadow: inset 1px 1px 0 #fff;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
font-size: 9pt;
letter-spacing: .1em;
color: #dedede;
text-shadow: 1px 1px 0 #fff;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}

Modelo 4

Códigos

.search{ /* Nesta parte não mude NADA */
float: center;
font-family: silkscreen;
font-size: 8px;
}
.searchbar{
width: 170px;
background: #fff;
box-shadow:  0 0 0px #ffc8a2;
font-family: Verdana;
font-size: 12px;
font-style: italic;
color: #ebebeb;
text-shadow: 0px 0px 0px #fff7f2;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
border: 1px solid #ebebeb;
}
.searchbut{
width: 50px;
background: #ffadb5;
box-shadow: inset 1px 1px 0px #ffbec4, 0 0 0px #ff8590;
text-shadow: 1px 1px 0px #ff4d5d;
color: #fff;
border: 1px solid #ff6674;
margin-right: 5px;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 5px;
padding-right: 5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Modelo 5

Códigos

.search{ /* Nesta parte não mude NADA */
float: center;
font-family: silkscreen;
font-size: 8px;
}
.searchbar{
width: 180px;
background: #ffdbc1;
box-shadow: inset 0 0 22px #ffc8a2, 0 0 4px #ffc8a2;
font-family: Verdana;
font-size: 12px;
font-style: italic;
color: #ffbd8d;
text-shadow: 1px 1px 2px #fff7f2;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
border: 1px solid #ffc194;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.searchbut{
width: 50px;
background: #ffa6ae;
box-shadow: inset 0 0 22px #ff8f99, 0 0 4px #ff8f99;
text-shadow: 1px 1px 0px #ff4d5d;
color: #fff;
border: 1px solid #ff9ca5;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px
}

Agora é só salvar! XoXo~