Monday, 25 November 2013

How to Add Voice Search in Website and Blogger blogs

So, you want to add voice search function in your website. You are in right place. Today I will show how to add and customize voice search function in Websites and Blogger blogs. You can also add your own mic image in place of default mic icon. It's really simple to do that.

In my previous post I showed you how to add animation effects on sidebar. It's always good to keep your blog customized. In this post we will see how to add voice search functionality in blogs and website. Previously users comes to your site and when they want to search for anything they just type it in the search box. But with the help of this voice search button your users can speak directly and search for their queries. It will also give your blog a little professional feel. If you want to insert the voice search icon in your blog or site than follow the process given below.

How to Add Voice Search in Website and Blogger blogs

It isn't very difficult to setup voice search in your blog. You will only need to add a line to your search input field and the voice search icon will appear in your blog or website. Currently, only Google Chrome supports this voice search functionality. It means users who don't use Chrome browser will not be able to enjoy this cool search feature. In the browsers other than Google Chrome the search box will appear as normal without any voice search icon. To add voice search function in your website add the code given below in the input field of your search box.
Yes, you will only need to add a little line in your input field. After adding this line in your input field the search input will look like somewhat like below.
<input id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Looking For Something!&apos;;}' onfocus='if (this.value == &apos;Looking For Something!&apos;) {this.value = &apos;&apos;;}' onwebkitspeechchange='this.form.submit ();' placeholder='Type And Hit Enter' title='Search' type='text' value='Looking For Something!' x-webkit-speech=''/>
Don't Worry about the different texts in red color. You will only need to add "x-webkit-speech="true"" in your search input field. If you use Blogger and want to add this voice search function in your Blogger blog than follow the steps given below.
  • First thing first, Sign in to your Blogger blog if you haven't signed in until now.
  • After signing in click on the blog on which you want to add voice search function.
  • Now in the Dashboard click on Template. In the Template page click on Edit HTML which is located just below the live preview of your Blogger blog.
  • Now search for the code given below.
 Now take a look around this tag you will see some lines of codes which will look like the code given below.
<input class='field' id='s' name='q' placeholder='Search Here' type='text' value='' />
Take a slight look at the image below to know what you are supposed to look for.

How to Add Voice Search in Website and Blogger blogs
Take a Look at the Image
Your blog may have different type of search codes but that will look much like the above code. Now add "x-webkit-speech="true"" without quotes just before slash sign. After adding this your search input code will look somewhat like below.
<input class='field' id='s' name='q' placeholder='Search Here' type='text' value='' x-webkit-speech="true" />
Great! You can now save the Template. Take a look at your blog and check how it works. Take a look at the voice search input of my blog.
Voice Search for Google Chrome Users
If you want to customize the look of icon than you can use the element as described below. You can add the codes/CSS in your Templates CSS area.
input::-webkit-input-speech-button {
-webkit-appearance: none;
cursor: pointer;
The text which is written in blue in the above CSS code is very necessary. Without adding "-webkit-appearance: none;" the CSS styles will not work. Now you can customize your Voice Search Icons for your Website or Blogger blog. Blogger blog users are supposed to add the CSS code in their CSS area with the customization menu.
That's All. Hope you like the voice search function for Chrome Browsers.

No comments:

Post a comment