Caixa de pesquisa com AutoLimpante

Você já deve ter reparado em algumas caixas de pesquisa que trazem
dicas de tela dentro do box de busca, que desaparecem ao serem
acionadas e retornam quando o cursor sai do campo.

O problema é confundir os campos de pesquisa com aqueles usados para
assinatura de newsletter.

Essas dicas de tela, ajudam a conduzir o visitante ao local correto e
não interferem na busca, pois desaparecem ao ser acionado o campo do
formulário.

Para instalar uma caixa de pesquisa com dica de tela no seu blog
ancorado no Blogspot é super fácil, basta o código abaixo que o Widget de Pesquisa Autolimpante estará na sua barra lateral:

<style>
#pesquisa {
width: 264px;
padding:0.15385em 0.23077em;
margin:0.23077em 0 0 0;
line-height:2.07692em;
white-space:nowrap;
background:#eaeaea;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
</style>
<center>
<div id="pesquisa">
<form id="cse-search-box" action="/search">
  <div>
    <input value="" name="cx" type="hidden"/>
    <input value="UTF-8" name="ie" type="hidden"/>
    <input name="q" size="31" type="text"/>
    <input value="Pesquisar" name="sa" type="submit"/>
  </div>
</form>
</div></center>
<center><span style="font-size: 80%; color: rgb(51, 51, 51);"> Widget
 <a href="http://ufo-nordeste.blogspot.com/2009/09/
caixa-de-pesquisa-autolimpante.html">UFO Nordeste</a></span></center>
<script src="http://dl.getdropbox.com/u/1815091/Pesquisa/pesquisa%20%281%29.js" 
type="text/javascript"></script>

Obs: Não retire os créditos!