Olá bloggers, estava estudando e lendo sobre HTML5. E fui fazer alguns experimentos, e com ajuda dos tutoriais do Blogando com Facilidade, consegui fazer uma caixa de busca com reconhecimento de fala.Pouco papo, e mais agilidade. Vamos começar
- Acesse o Blogger e entra no Editor de HTML;
- Procure pela tag:
/b:skin;
- E 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;} - Agora Salve;
- Adicione um Novo Gadget no modo HTML/JavaScript;
- E 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>
E salve - Pronto, fácil, rápido e ágil.
Obs.: Atualmente o reconhecimento de fala somente está ativo e prestando no Google Chrome;