Personalizar caixa de pesquisa

Boa tarde, leitores.

Ontem não postei, pois fui ao cinema com alguns amigos assistir dezesseis luas, estava muito na expectativa  por esse filme, não havia lido o livro, mas uma das pessoas que foram comigo sim, disse que era muito interessante. Mas como explicar quanta decepção? O filme me provocou sono do início até o fim, a única parte que realmente achei interessante ocorreu nos últimos 10 minutos de filme.

Decepções a parte, já tem mais de uma semana que me pediram alguns tutoriais, já era para ter postado, mas deu erro ao salvar aí perdi a postagem inteira, hoje resolvi postar o mais simples, já que eu deixei minhas lições de casa para última hora e tenho que fazê-las ainda.

O tutorial peguei no CB de como personalizar a caixa de pesquisa.

1. Crie um gadget HTML/Javascript com este código:

<form action="/search" class="search" method="get">

<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />

<input class="searchbut" type="submit" value="" />

</form>

Você pode substituir  Digite o que procura  pela frase que desejar.

2. Vá em editar HTML, procure por ]]></b:skin> e acima dele cole este código:

.search{

float: left;

font-family: Century Gothic !important; /* Fonte do campo de texto*/

}

.searchbar{

height: 20px; /*Altura da caixa*/

width: 190px; /*largura da caixa*/

border-radius:15px;

background:#fff;

text-align:center;

color:#ff048c !important; /*cor do texto*/

font: 12px Century Gothic !important; /*fonte do texto*/

}

.searchbut{

background: url('Url da imagem do botão');

width:30px; /*Largura do botão*/

height:30px; /*altura do botão*/

border: 0;

padding:7px;

}

É só personalizar como quiser.

MetalKisses.