Menambahkan Tombol Search By Voice Di Search Box

Search by Voice
Google kini tengah menjadi topic pembicaraan di berbagai forum tentang bagaimana Google menyajikan jawaban-jawaban yang cepat dan relevan dengan pertanyaan-pertanyaan yang diketikan ke dalam kotak pencarian di internet. Terlebih setelah diluncurkannya algoritma hummingbird oleh Google baru-baru ini.

Google terus mengupdate dan memperbaiki algoritmanya untuk memberikan hasil pencarian yang benar-benar relevan dan cepat seiring dengan terus berkembangnya teknologi. Apalagi kini semakin berkembangnya gadget dan smart phone yang semakin canggih yang hampir 50% lebih dari pengguna internet memakainya.

Dengan semakin berkembangnya pengguna internet yang menggunakan smart phone, maka Google kini menambahkan fungsi "Search by voice" pada kotak pencariannya. Artinya kini Anda bisa menanyakan hal-hal yang ingin diketahui dengan "berbicara" pada Google.

Untuk itu kini saya akan memberikan cara untuk menambahkan tombol "Search by voice" pada search box di blog Anda. Anda tidak perlu merubah search box blog Anda, hanya menambahkan kode untuk menampilkan tombol pencarian suara (microphone) pada kode search blog yang telah ada.

search by voice

Nah seperti itulah contohnya, jika Anda menggunakan headset dengan microphone Anda bisa coba klik icon "mic" pada search box seperti itu untuk mencoba penelusuran dengan suara.

Ternyata caranya cukup mudah, Anda tinggal menambahkan kode x-webkit-speech="" pada input kode html kotak search blog. Sebagai contoh form search box seperti di atas seperti kode di bawah ini.
<form action="/search" method="get" target="_blank">
<input name="q" size="30" type="text" x-webkit-speech="" />
<input type="submit" value="Search" />
</form>

Nah kode yang berwarna merah itu yang menampilkan fitur "Search by voice" pada kotak pencarian blog. Namun fitur ini baru berlaku pada Google Chrome, jadi jika Anda menggunakan browser lain tidak akan melihat tombol "Search by voice" ini.

Namun setelah saya cek kode tersebut belum bisa valid HTML5, jadi bagi Anda yang peduli dengan validasi HTML5 perlu dipertimbangkan lagi untuk memakai kode ini. Nanti jika kode ini sudah valid HTML5 akan saya update lagi.

Sumber kode: http://www.bloggerhacking.com/2011/09/add-voice-input-search-box-in-blog.html

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments