How ToJavaScriptMake Web StoriesQuiz GeneratorFAQ Schema GeneratorTable Maker3schools TranslateMore Tools..
Apu
Apu 7/17/2022

How to add voice search in Blogger

Hello šŸ™‹‍♂️ , in this article, I'm going to show you how you can add a voice search widget in Blogger. By using this voice search feature, the users can search their query in your blog by their voice. They don't need to write their query manually. This voice search šŸ” feature will save the time of your users. So without wasting any more time, let see how to add voice search widget to Blogger blog and WordPress.

Voice search widget demo.

Before you add this voice search widget to Blogger, I want to show you how this voice search looks on your WordPress or blogger blog. The demo is given below.


How to add voice search to Blogger sidebar.

If you don't have any coding knowledge, then it's easy to add the voice search widget to Blogger sidebar, footer or header by adding a Gadget in the layout section of your blogger blog. Now you're ready to follow the below steps šŸ‘£.

  1. Go to Blogger and log in to your account (if needs).
  2. Click on the Layout section.
  3. Blogger layout section image
  4. Then , click on the Add a Gadget link/button where you want to add this voice search tool. (Sidebar, Footer, Header etc.)
  5. Click on Add a Gadget button
  6. From the drop down, select the HTML/javascript widget.
  7. Add the HTML/javascript widget
  8. Now copy the below code and paste the copied code in the content area. Please please please... click on the save button.
  9. Paste the code and click on the save button
<style>
  #search-form {
    max-width: 300px;
    .adding: 0 7px;
    margin: 0;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #search-form input {
    width: 80%;
    border: 0;
    outline: none;
    background: transparent;
  }

  #search-form img {
    float: right;
    width: 40px;
  }
</style>
<form id="search-form" method="get" action="/search" target="_blank">
  <input type="text" name="q" placeholder="Search Here.." />
<img onclick="vSearch()" src="https://i.imgur.com/Qeh3TLJ.png" />
</form>
<script>
function vSearch() {
if(window.hasOwnProperty('webkitSpeechRecognition')) {
let recognition = new webkitSpeechRecognition(); recognition.lang = 'en-US'; recognition.start(); recognition.onresult = function (e) {
document.querySelector('#search-form input').value = e.results[0][0].transcript; recognition.stop(); document.querySelector('#search-form').submit();
}; recognition.onerror = function (e) {
recognition.stop();
};
}
}
</script>

By default, the English language is set . You can set the language according to your need by changing the marked text.

en ----- English
bn ----- Bengali
hi ----- Hindi
in ----- Indonesia
............

Conclusion

In this article, I have tried to teach you how you can add a voice search widget to Blogger. I am sure that my efforts did not fail. Anyway, have a nice day.

Share

How to add voice search in Blogger

0
Hello šŸ™‹‍♂️ , in this article, I'm going to show you how you can add a voice search …
asked
0 answers

Write an Answer

Related Posts
Write an answer
back