HOW TO ADD VOICE SEARCH TO BLOGGER’S BLOG (WITH PICS)

Wouldn't it be cool if people could search posts in your blog by just speaking rather than having to type it? Well, if you have a search box that in your blog, you can add Google voice search by adding 1 line of code.

Since most people stay away from the coding part of their blog, this could be a start and a great addition to the features offered by your blog. Before we get started, 1 thing that I assume that your blog’s template already has is the search box. So, with that, let’s get started.

1ST STEP – Sign in your blogger account and go to the dashboard.


2nd STEP – Go to Template and click ‘Edit HTML’.
 

3rd STEP – Once a popup with lots of code lines opens, press CTRL + F (for windows) or CMD + F (for Mac)

4th STEP – With the ‘find’ option activated, search for the keyword, method=’.


Typically, there will be just 1 match for the keyword method=’. You can cross check if you’re at the correct place if the code before method=’ or method=” is action=’/search’. For further clarification, refer to the image below.

5th STEP – A line or two below the line that you found, you will find a code line which goes something like this:
<input class='field' id='s' name='q' placeholder='Search' type='text' value='' />

NOTE: This is how the code in one of my test blog looks like. Your blog might have a slightly modified version of this same piece of code. Please refer the image below for further clarification.


6th STEP – You’ll notice that the line mentioned in the 5th STEP closes with />. Just before the />, add x-webkit-speech=’true’.


You are done! Preview your blog and the search field now has a grey microphone on the right side as shown in the image below. Save the changes to the template by pressing the orange ‘Save Template’ button.


Once you’re done, view your blog to check if everything is working fine.

NOTE: This code for speech recognition works only on Google Chrome.

For any problems, let me know in the comments and I’ll help you to the best of my abilities.

If you like what you see, please Share, +1, Like and subscribe to the RSS feed or via e-mail subscription.

3 comments :