Criar Caixa de Pesquisa Com Reconhecimento De Voz No Blogger

Crie uma caixa de pesquisa em HTML5 com reconhecimento de voz no seu blogger e dê a opção para seus usuários buscarem seus posts através da fala.

Uma caixa de pesquisa é algo fundamental em seu site, pois algo que seus leitores não estejam encontrando, eles podem digitar o que procuram e pesquisar. Como a web e o mundo estão em constante evolução a função de buscar através da fala se tornou também essencial.

Pensando nisso esse código deixa  seu site com um ar de evoluído, permitindo a pesquisa também por voz. Vamos criar essa caixa com um código bem simples e funcional.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.


Tutorial

1- Acesse seu blogger, no menu lateral clique em "Modelo", depois em "Editar HTML".

2- Clique no código, pressione "CTRL+F" e pesquise por  </b:skin>.

3- Logo ACIMA da tag pesquisada 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtPSiTTqjCaKoWWFiKmPdURcQHsafkaFpIx2lgTHBab8cNrJv8PNSN0dLcQs5hYASC41I9nG6qB7ov-XSv1oqlw5Dekb9fI1tD59BNs7BTTXl9YaOhKMDfJKskiN_mZwKBm2zudvuXTpU/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/AVvXsEhtPSiTTqjCaKoWWFiKmPdURcQHsafkaFpIx2lgTHBab8cNrJv8PNSN0dLcQs5hYASC41I9nG6qB7ov-XSv1oqlw5Dekb9fI1tD59BNs7BTTXl9YaOhKMDfJKskiN_mZwKBm2zudvuXTpU/h80/buscar.png) 3px 2px no-repeat;}
4- Clique em "Salvar Modelo".

5- Vá em "Layout", depois na parte que você deseje que fique a caixa de pesquisa clique em "Adicionar um gadget"e escolha por "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>
6- Clique em "Salvar" e veja como ficou em seu blog.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Comentários

 
Copyright ©2015 Canal Do MatheusBR Todos os Direitos reservados | Designed by Sinistro de BTN