Tutorial - Caixa de Pesquisa

 

Yoo!

Sei que já postamos um tutorial sobre caixa de pesquisas por aqui, mas algumas pessoas me perguntaram como é que eu personalizei essa que temos aqui no Kawaii. Deixarei abaixo o tutorial edepois, quem sabe eu poste alguns modelos prontos.

O tutorial não é extenso, é até pequeno em consideração aos outros. A explicação do código eu deixei em uma imagem, você verá o link na hora que estiver lendo o tutorial.

Espero que gostem ~ 

1. Vá até Design > Editar HTML e procure por ]]></b:skin>. Acima da tag que você acabou de achar, cole o seguinte:

.search{

float: left; 

}

.searchbar{

height: 20px;

width: 200px;

border-radius: 2px;

border: 1px solid #8d8d8d;

background:#bcbcb9;

text-align:center;

color:#2f2f2e !important;

font: 10px verdana !important;

text-shadow:0 2px #fff;

}

.searchbut{

background: url('LINK DA IMAGEM DO BOTÃO');

width:39px; /* largura da imagem /*

height:33px; /* altura da iamgem /*

border: 0;

padding:10px;

}

- Caso precise da explicação do código, clique aqui. Não coloquei ela já na postagem por ser grande.

2. Depois de personalizar como você quiser, coloque o seguinte código em um gadget de HTML/JavaScript:

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

<input class="searchbar" id="s" name="q" placeholder='Perdido?' type="text" value="" />

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

</form>

Você pode trocar o 'Perdido?', pelo que quiser.