caixa de busca elegante

Todo blog (ou site) que se preze tem que ter uma Caixa de Busca - como a que você vê na imagem mais abaixo, para facilitar o acesso de seu visitante às informações mais relevantes e de seu (dele) interesse.


Este recurso simples, mas EXTREMAMENTE ÚTIL E ELEGANTE, pode ser implementado, facilmente, em apenas três (3) passos, no seu blog.


Vamos a eles, sem mais delongas!

Passo 1: No PAINEL de edições de seu blog, vá em LAYOUT - (Elementos de Página) - ADICIONAR GADGET, na sua Sidebar (Barra Lateral). Clique e aparecerá uma outra janela (ADICIONAR GADGET). Escolha HTML/Java Script.


Passo 2: Copie e cole o código da caixa de texto abaixo, na caixa que se abriu. Não coloque título.

<script type="text/javascript"> function clickclear(thisfield, defaulttext) { if (thisfield.value == defaulttext) { thisfield.value = ""; } } function clickrecall(thisfield, defaulttext) { if (thisfield.value == "") { thisfield.value = defaulttext; } } </script><br /> <center><form id="searchthis" action="/search" style="margin:0;padding:0;display:inline;" method="get"><input onclick="clickclear(this, 'Pesquisar no blog')" value="Pesquisar no blog" type="text" id="search-box" onblur="clickrecall(this,'Pesquisar no blog')" style="color: #999;" size="20" name="q"/> <input id="search-btn" value="Ok" type="submit"/></form><br/><span style="font-size: 80%">Widget by <a href="http://reidobloguinho.blogspot.com/2010/03/caixa-de-busca-elegante_09.html">Rei do Bloguinho</a></span><br /> </center>

Passo 3: Salve e, ao retornar ao PAINEL, já será possível ver sua Caixa de Busca, com dica auto-limpante (Ao clicar para pesquisar a dica desaparece, ao clicar fora a dica reaparece)!