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 👣.
- Go to Blogger and log in to your account (if needs).
- Click on the Layout section.
- Then , click on the Add a Gadget link/button where you want to add this voice search tool. (Sidebar, Footer, Header etc.)
- From the drop down, select the HTML/javascript widget.
- Now copy the below code and paste the copied code in the content area. Please please please... 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.
