Cuadro de Búsqueda por Voz y Texto de Google

En algún comentario me han pedido que publique el código del cuadro de búsqueda por voz, que por estos tiempos tengo en la parte superior de la sidebar.

Esto es una imagen, no vayas a buscar :)

Este cuadro de busque funciona con la voz y con el texto escrito, solo necesitas un micrófono y haciendo clic en el icono de micrófono encontrado en el buscador puedes comenzar a hablar.

Lo bueno de este tipo de búsqueda por voz, es que puedes buscar frases largas, podrás buscar sin utilizar el teclado y ademas conocer como se escriben algunas palabras desconocidas.

Es decir, puedes buscar en Google mientras te estas bañando!! :) Solo debes gritar! jaja

Bueno, dejémonos de risas y vamos al código de este Gadget, pero antes debes ver la demostración justo aquí:

Bonito cuadro de búsqueda! Para tener esta lindura :) en tu blog ve a Blogger.com - Diseño - Añadir un gadget - HTML/javascript y pega este precioso código allí:

<form _lpchecked="1" action="/search" class="search-form" id="searchform" method="get">
<fieldset>
<input id="s" name="q" onfocus="if(this.value=='Buscar...')this.value='';" onwebkitspeechchange="transcribe(this.value)" type="text" value="Buscar..." x-webkit-speech="" /> 
<input class="sbutton" id="search-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-M5ap7jfNO4a_LD5PKeeBD-7-Y7C5io5IlK-AccLniy4PHAEMIntFdHkNTluWaI0vQJkt-xcmDj2_dbdveufnZxMqaEcsDLUAlDcxDXTzNlFH68Acp6UzqhLCGWRaJRjxNvmDUyn-D_w/s1600/search%5B1%5D.png" style="border: 0; vertical-align: top;" type="image" />
</fieldset>
</form>
<style>
#searchform fieldset {
float: left;
color: #888;
border: 1px solid #DFDFDF;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
width: 98%;
margin: 3px;
}
#searchform fieldset:hover {
border: 1px solid #41B7D8;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
}
#searchform {
margin: 0 10px 10px 0;
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
#s {
float: left;
color: #888;
background: none;
border: 0;
width: 80%;
padding: 0.6em;
}
#searchform .sbutton {
cursor: pointer;
padding:8px;
float:right;
}
</style>

Después de haber guardado ese hermoso código :) que te deje arriba, tendrás un cuadro de búsqueda que nadie mas en la red tiene. Mentira, lo que si tendrás es una herramienta versátil y muy funcional; algo que no puede faltar en tu blog.

Es preferible que falte el contenido, a que falte esta caja de búsqueda... (Otra mentira). Pero hablando seriamente, una opción para buscar en tu blog debe ser infaltable, ya que muchos llegan directamente al cuadro de búsqueda para utilizarlo, y que mejor que utilizar esta que te he dejado. (Por favor, no seas mal amigo. No utilices otra...jeje)

Bien, ve entonces e instalalo en tu blog. Me cuentas como quedo, y si falla alguna característica solo me avisas y yo tratare de acomodarla.