Blogger: Caixa de busca com reconhecimento de fala (HTML5)

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

  1. Acesse o Blogger e entra no Editor de HTML;
  2. Procure pela tag:
    /b:skin;
  3. 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;}
  4. Agora Salve;
  5. Adicione um Novo Gadget no modo HTML/JavaScript;
  6. 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;

Comentários