Como adicionar caixa de busca com Reconhecimento de Voz

Chat


Como adicionar caixa de busca com Reconhecimento de Voz

Olá Galerinha, hoje eu vim com mais um código fantástico, desenvolvi agora a pouco uma nova caixa de busca, a novidade é que ela vem com a fantásticas tecnologia do HTML5 que permite que as buscas sejam feitas por voz também. A caixa de busca tem um estilo bem elegante e moderno, como já disse, faz buscas com a fala também, o botão de busca é bem simples e bonito. A Caixa de Busca não tem efeitos impressionantes, fiz algo leve, bonito e moderno, além de só carregar uma imagem (a do botão de buscar). Veja a Demonstração: http://demo3.blogandocomfacilidade.com/

Vamos ao Tutorial:
1º – Acesse o painel do seu Blog e clique na Guia Modelo.
2º – Em seguida segure as teclas CTRL+F e procure por:
]]></b:skin>
3º – E ACIMA dela cole o seguinte código:
#busca-html5 {font-size: 13px;width: 80%;border: 1px solid #BFBFBF !important;margin: 0 0 0 0;padding: 5px 5px;height: 20px;
font: normal 100% Arial,Helvetica,sans-serif;color: #2f2f2f;background: #FAFAFA;float: left;border: none;display: inline;outline: none;}
input#buscar-busca-html5 {display: inline;margin: 0 0 0 0;height: 32px;width: 35px;border: 1px solid #4189C1 !important;color: white;border: none;cursor: pointer;margin-left: 8px !important;background: #58A9E8 url(https://lh4.googleusercontent.com/-QE1imp0WR7E/ToaJ-T4s_tI/AAAAAAAACJM/OIwx673LHVc/h80/buscar.png) 3px 2px no-repeat;text-indent: -9999px;}
input#buscar-busca-html5:active {background: #71b8ef url(https://lh4.googleusercontent.com/-QE1imp0WR7E/ToaJ-T4s_tI/AAAAAAAACJM/OIwx673LHVc/h80/buscar.png) 3px 2px no-repeat;}

4º – Em Seguida clique em Salvar Modelo.
5º – Depois clique na Guia Layout.
6º – Na lateral do seu Modelo, clique em Adicionar Gadget.
7º – Selecione o Gadget tipo “HTML/Javascript”,
8º – E no Conteúdo do Gadget, cole o seguinte código:
<div id="search"><form action="/search" id="form-busca" method="get">
<input id="busca-html5" name="q" type="text" value="" x-webkit-speech="true" />
<input id="buscar-busca-html5" type="submit" value="BUSCAR" /></form></div>

9º – E por último, dê um título do seu gadget e clique em Salvar.
ATUALIZAÇÃO 04/10/2011:
A versão Agora funciona também no HTML do Blog, alteramos alguns códigos no Passo 8 e agora você pode adicionar também no modelo estático do seu template, basta apenas adicionar o código do passo 8 no local desejado de seu template.


Comentários