Caixa de Busca em HTML5 com Reconhecimento de Fala

► +A +/- -A
Olá pessoal, hoje venho trazendo um tutorial bem legal, neste tutorial, ensinarei como colocar uma caixa de busca em HTML5 com reconhecimento de fala.

Mas oque é este reconhecimento de fala, e um impressionante
efeito que reconhece " Quase Tudo Oquê você fala " mas não fique desanimado pois a caixa muito bonita. A caixa tem efeitos muito legais. Clique aqui para ver a imagem da Caixa de Busca em HTML5 com Reconhecimento de Fala.
Ou visite nosso blog de teste e visualize a caixa de busca:
http://blogdeteste1tecnoblog.blogspot.com/
Mas vamos começar o tutorial:


Vamos ao tutorial:
1. Acesse o painel do seu Blog e clique na Guia Modelo.
2. Depois segure as teclas CTRL+F e procure por:



]]></b:skin>


3. E ACIMA do código citado acima adicione o código abaixo:




#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. ( Elementos da pagina )
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 agora é só dar o titulo do gadget e clicar em salvar. 


                                            Caixa de Busca em HTML5 com Reconhecimento de Fala por: Iago Melanias - Blogando com Facilidade
► Postagens Relacionadas:

4 Comentários

Renan disse...

Muito legal este recurso, é muito bom no meu blog, combina muito, valeu!

24 de outubro de 2011 15:14
Caio Vinicius disse...

Que bom Renan, Obrigado pelo comentário e volte sempre!

24 de outubro de 2011 16:17
Guihgo disse...

Nossa, muito obrigado !!

Valeu mesmo !!

Não tinha achado isso em lugar algum !!

28 de março de 2012 18:25
Caio Vinicius disse...

Obrigado pelo comentário Guihgo, Até mais Amigo :D

28 de março de 2012 19:25

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!