Google Start New service insert the voice search . So i have tell you How to Add Voice Search in Website  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.
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.

How to Add Voice Search in Website

To add voice search function in your website add the code given below in the input field of your search box. 

x-webkit-speech="true"

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.

How to Add Voice Search in Blogger 

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.
method=

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='' />

Oh!!......

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.