Caixa de busca HTML5

Yo galera, venho trazer meu primeiro tutorial aqui na up tutoriais, 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/AVvXsEjX8bLy3u1ajNd89f_VcwgpgHNwFkG3ih_9f5GN5LGG66O4wZDXx7ZbtjVL9nuL55cHve9nZOo0qBaS2c_YzxXd0-AHRIRndupMzWcFe0EeAEKm7Nshmczbp8rrpqIoGPXq-4NarU5kZWg/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/AVvXsEjX8bLy3u1ajNd89f_VcwgpgHNwFkG3ih_9f5GN5LGG66O4wZDXx7ZbtjVL9nuL55cHve9nZOo0qBaS2c_YzxXd0-AHRIRndupMzWcFe0EeAEKm7Nshmczbp8rrpqIoGPXq-4NarU5kZWg/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>