Caixa de Busca em HTML5 com Reconhecimento de Fala

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeYAM6dXL89i9Ju1kAGT6tH2X_JKVuGWSJRK7Gpwr0S9c3NX36zHAMnJBmabW3Of__TMVZrLcoIfHDmpwfF45ZVgpPYfJc0s84HXshhudyUf2b4OjF5IUSp1hvn-b8A95dtSDSKG7lvw/h80/buscar.png) 3px 2px no-repeat;text-indent: -9999px;}
input#buscar-busca-html5:active {background: #71b8ef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYeYAM6dXL89i9Ju1kAGT6tH2X_JKVuGWSJRK7Gpwr0S9c3NX36zHAMnJBmabW3Of__TMVZrLcoIfHDmpwfF45ZVgpPYfJc0s84HXshhudyUf2b4OjF5IUSp1hvn-b8A95dtSDSKG7lvw/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