Caixa de Busca Em HTML5 Com Reconhecimento De Fala

Caixa de Busca Em HTML5 Com Reconhecimento De Fala

Olá Pessoal, Estou aqui para Ensinar a Colocar uma Caixa de Busca em HTML5 e com Reconhecimento de Fala (disponível apenas no Google Chrome)

DEMO

Então Vamos lá! e Não se Esqueça de nos Seguir

1 - Acesse em Modelo > Editar HTML e Pressione Ctrl + F e Procure por </b:skin> 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/AVvXsEhkIk-kypxQsx0FsGrF2x9C5Pinr9pVkfYh1hX8M6lPJQ15qNDRWrCF7_Z2TtoDMNLJreniokO2vJ3ueMWi3biZLlwpKBJZsCrDbpFZ0y9p5iWKa7n-O6F4br6vh38HeKyxCH2NcU6cahs/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/AVvXsEhkIk-kypxQsx0FsGrF2x9C5Pinr9pVkfYh1hX8M6lPJQ15qNDRWrCF7_Z2TtoDMNLJreniokO2vJ3ueMWi3biZLlwpKBJZsCrDbpFZ0y9p5iWKa7n-O6F4br6vh38HeKyxCH2NcU6cahs/h80/buscar.png) 3px 2px no-repeat;}

2 - Salve o HTML e Vá em Layout > Adicionar Gadget > 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>

Salve e Pronto! Comentem!

Gostou ? Então Curta a Nossa Página No Facebook..Obrigado. =) [Gąbяiєllą]