quinta-feira, 20 de novembro de 2008

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! :)

13 comentários:

htmhelen disse...

[…] É fácil, mas, se você é blogueiro, não dê tanto trabalho ao seu leitor. Siga o tutorial do Mestre Blogger e coloque uma caixa de busca. […]

dicacs disse...

Olá,
Mesmo sem ter uma estetica muito boa eu prefiro a do Google.$$Monetizaçao$$

Abraços

Alberto disse...

HTMHelen -

obrigado pelo link, Helen! Fiquei muito contente com isto.

dicacs -

Todos estes efeitos podem ser adicionados em outras caixas de busca como a do FreeFind, NetSearcher, Google, etc. Farei um acompanhamento deste post mostrando como conseguir isto.

htmhelen disse...

@dicacs, eu também prefiro a busca monetizada. Por que $erá? o_O

Alessandro Nicoli de Mattos disse...

Olá,

Eu gostaria de saber como adicionar o logo transparente do google na caixa de texto, como sugerido no Widget deste site: http://www.widgetbox.com/widget/google-web-search.

O widget é ruim, então tentei separar somente o trecho do código do logo, mas sem sucesso. Você saberia me explicar como adicionar este símbolo?

Obrigado,

Alessandro Nicoli de Mattos disse...

Caro Mestre Blogger,

Se ao invés de eu adicionar um texto que desaparece na caixa, eu quisesse inserir um GIF que desaparece? Como ficaria o código?

[ ]s

mramos disse...

ADOREI....TUDO!
OBRIGADA
MARTHA RAMOS

UPGRADE DOWNLOADS disse...

Grato!!

Tô a horas procurando essa caixa de pesquisa simples....sem a tal da google com monetização que não dá em nada....rs

Valeu!

Abraço

andrephelype disse...

oi
eu queria um gadget ou um html que fizesse uma caixa onde quem esta navegando digita um texto e dependendo do que ele digita e direcionado a uma pagina.
por exemplo
nessa caixa eu digito 2 e sou direcionado a pagina x
depois nessa caixa digito 3 e sou direcionado a pagina y
se puder me ajudar, obrigado!!
e desculpe por incomodar

dinheiroqrende disse...

show! gostei da dica. a explicação é muito clara e com certeza será útil para o meu blog.

luzevida disse...

quero te agradecer pois estav a precisando muito deste gadget pois não gosta do da google , te agradeço e se puder visit meu blog é de musicas
http://luzevidacover.blogspot.com/

Deborah disse...

Excelente, era isso que eu procurava....
Obrigada

José David Nunes disse...

Muito boas dicas e já inseri o teu banner no meu blog.
http://www.vidasaudaveljdavinunes.net

Faça o seu comentário!

Obrigado por deixar seu comentário! Para outros assuntos veja também: