Caixinhas de busca para blogs

Olá caros leitores! Antes de mais nada, Feliz Ano Novo à todos! Eu pretendia fazer uma postagem desejando-lhes o melhor para 2009 ontem, porém com a chuvinha que deu por aqui fiquei sem internet :(. E vamos agora à primeira postagem do ano! (lol)

Como muitos de meus leitores gostaram da dica de como montar uma caixa de pesquisa em blogs montei um modelo de caixinha simples, porém bonito e funcional. Os quatro modelos abaixo podem ser instalados muito fácilmente - basta clicar no modelo escolhido. Escolha e divirta-se! ;)

<input value="CAIXA DE BUSCA por http://mestreblogger.blogspot.com" type="hidden"/> <style type="text/css"> .moldura { color: #6d6845; border: 8px solid #330066; background-color: #330066; width: 248px; } .caixa { color: #666666; font-family:'trebuchet ms',helvetica,sans-serif; border: 1px solid #000000; background-color: #ffffff; font-size:100%; font-color: #cccccc; align:center; } .botao { color:#0000000; font-family:trebuchet ms,helvetica,sans-serif; font-size:100%; background-color:#cccccc; border: 1px solid #000000; } </style> <div class="moldura"> <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"> <input onfocus="if(this.value=='Sua busca aqui...')this.value='';" maxlength="255" value="Sua busca aqui..." id="b-query" onblur="if(this.value==''){this.value='Sua busca aqui...'}" size="26" class="caixa" name="q"/> <input value="OK" class="botao" type="submit"/></form> </div>

<input value="CAIXA DE BUSCA por http://mestreblogger.blogspot.com" type="hidden"/> <style type="text/css"> .moldura { color: #6d6845; border: 8px solid #6d6845; background-color: #6d6845; width: 248px; } .caixa { color: #666666; font-family:'trebuchet ms',helvetica,sans-serif; border: 1px solid #000000; background-color: #ffffff; font-size:100%; font-color: #cccccc; align:center; } .botao { color:#0000000; font-family:trebuchet ms,helvetica,sans-serif; font-size:100%; background-color:#cccccc; border: 1px solid #000000; } </style> <div class="moldura"> <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"> <input onfocus="if(this.value=='Sua busca aqui...')this.value='';" maxlength="255" value="Sua busca aqui..." id="b-query" onblur="if(this.value==''){this.value='Sua busca aqui...'}" size="26" class="caixa" name="q"/> <input value="OK" class="botao" type="submit"/></form> </div>

<input value="CAIXA DE BUSCA por http://mestreblogger.blogspot.com" type="hidden"/> <style type="text/css"> .moldura { color: #6d6845; border: 8px solid #cc6600; background-color: #cc6600; width: 248px; } .caixa { color: #666666; font-family:'trebuchet ms',helvetica,sans-serif; border: 1px solid #000000; background-color: #ffffff; font-size:100%; font-color: #cccccc; align:center; } .botao { color:#0000000; font-family:trebuchet ms,helvetica,sans-serif; font-size:100%; background-color:#cccccc; border: 1px solid #000000; } </style> <div class="moldura"> <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"> <input onfocus="if(this.value=='Sua busca aqui...')this.value='';" maxlength="255" value="Sua busca aqui..." id="b-query" onblur="if(this.value==''){this.value='Sua busca aqui...'}" size="26" class="caixa" name="q"/> <input value="OK" class="botao" type="submit"/></form> </div>

<input value="CAIXA DE BUSCA por http://mestreblogger.blogspot.com" type="hidden"/> <style type="text/css"> .moldura { color: #6d6845; border: 8px solid #993300; background-color: #993300; width: 248px; } .caixa { color: #666666; font-family:'trebuchet ms',helvetica,sans-serif; border: 1px solid #000000; background-color: #cccccc; font-size:100%; font-color: #000000; align:center; } .botao { color:#0000000; font-family:trebuchet ms,helvetica,sans-serif; font-size:100%; background-color:#cccccc; border: 1px solid #000000; } </style> <div class="moldura"> <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"> <input onfocus="if(this.value=='Sua busca aqui...')this.value='';" maxlength="255" value="Sua busca aqui..." id="b-query" onblur="if(this.value==''){this.value='Sua busca aqui...'}" size="26" class="caixa" name="q"/> <input value="OK" class="botao" type="submit"/></form> </div>

Caixa de pesquisa de seu blog

O formulário de busca sobre o qual falaremos aqui é o mesmo que aparece na barra do Blogger no topo do blog. No entanto você pode querer ocultar a barra do Blogger ou simplesmente deixar esta busca mais visível adicionando-a num novo elemento de página na barra lateral. O procedimento para isto é bem simples.

1. Entre no painel de sua conta do blogger em http://www.blogger.com/ ou http://www.draft.blogger.com/ .

2. Entre na página de edição de seu blog Layout.

3. Agora, clique Adicionar um Gadget.

4. Nas opções de gadgets para instalar, escolha HTML/Javascript.

5. Então cole neste elemento de página o seguinte código:

<form action="/search">

<input value="partner-pub-8388769928851076:mvc0johxlvb" name="cx" type="hidden"/>
<input value="ISO-8859-1" name="ie" type="hidden"/>
<input name="q" size="28"/>
<input value="Pesquisar" name="sa" type="submit"/>
</form>

Este é o modo mais simples. O campo de busca aparecerá assim:

Agora vamos adicionar o grande efeito que é muito interessante e pouquíssimos blogs tem. Isto será um texto que aponta o lugar onde o visitante deve digitar a busca. Quando clicado em cima, o texto de amostra desaparece. Explicado em palavras é meio difícil de entender. Veja o exemplo abaixo.

Para conseguir o efeito, utilize este código:

<form action="/search">
<input name="cx" type="hidden" />
<input name="ie" type="hidden" />
<input name="q" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" onfocus="if(this.value=='Digite sua busca aqui')this.value=''; "value="Digite sua busca aqui" size="28"/>
<input name="sa" type="submit" value="Pesquisar" /></form>

O trecho que foi adicionado para conseguir o efeito está marcado com fundo cinza. O trecho que você deve modificar está escrito em verde. Agora modifique todos os trechos Digite sua busca aqui pelo texto que aparecerá na caixa. Por ex.: Sua busca aqui... ou Pesquisar blog. Deixe como quiser. Lembre-se de deixar o mesmo texto nos três lugares, como demonstrado acima.

Agora, uma opção adicional. Caso você queira, você pode modificar o botão Pesquisar por uma imagem qualquer. Sim, é isso mesmo! E é bem simples também. Veja no código abaixo:

<form action="/search">
<input name="cx" type="hidden" />
<input name="ie" type="hidden" />
<input name="q" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" onfocus="if(this.value=='Digite sua busca aqui')this.value=''; "value="Digite sua busca aqui" size="28"/>
<input name="sa" type="submit" value="Pesquisar" /></form>

O trecho acima marcado define o botão de enter. Substitua todo o trecho marcado pelo seguinte:

<input type="image" src="http://ra606a.blu.livefilestore.com/y1puZOyb7_6YKWR3s7ODnkSP0k0H8-vfexl0-9rHkE-5CVvWFDMpIVhHYfdLA4zjVYh2ZQNZR-nmrI/bot_9.gif" />

Modifique todo o trecho em verde para o endereço da imagem que servirá de botão. O código deverá, então, aparecer assim:

<form action="/search">
<input name="cx" type="hidden" />
<input name="ie" type="hidden" />
<input name="q" onblur="if(this.value==''){this.value='Digite sua busca aqui'}" onfocus="if(this.value=='Digite sua busca aqui')this.value=''; "value="Digite sua busca aqui" size="28"/>
<input type="image" src="http://ra606a.blu.livefilestore.com/y1puZOyb7_6YKWR3s7ODnkSP0k0H8-vfexl0-9rHkE-5CVvWFDMpIVhHYfdLA4zjVYh2ZQNZR-nmrI/bot_9.gif" /></form>

E a visualização, será esta:

E aí você tem uma bela caixa de pesquisa. Aproveite! :)