Caixa de Busca em HTML5 com Reconhecimento de voz

Yo galera, apedido de uma amigo meu, venho trazer esse tutorial muito bom que é a caixa de Busca em HTML5 com Reconhecimento de voz, a principio é muito fácil de usa-lo e também  dá outro nível para o seu site pois a aparência dele é muito boa. Qualquer dúvida deixe um comentário.

1ºAcesse o seu modelo, vá em Editar HTML e Procure por:

</b:skin>

2º E acima cole 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/AVvXsEhCkA9Ae1cl4pPiNlXEGTdNUuLl-W5rQ_Z9W8d-oc2zyylX9H6IpGpbtJGxzDge1uJcvtitpyVyJPz2C6UcXjKT8YI6t00R6Q7wRuHHVmmuWffWwifj-bWzdNwZVFnTsOOgc3XYAvrOzrs/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/AVvXsEhCkA9Ae1cl4pPiNlXEGTdNUuLl-W5rQ_Z9W8d-oc2zyylX9H6IpGpbtJGxzDge1uJcvtitpyVyJPz2C6UcXjKT8YI6t00R6Q7wRuHHVmmuWffWwifj-bWzdNwZVFnTsOOgc3XYAvrOzrs/h80/buscar.png) 3px 2px no-repeat;}

3º Salve

Agora crie uma pagina Html/JavaScript e cole o código abaixo:

<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>