Make your search box advance by adding a voice search icon.
Just add below codes as mentioned…
External CSS
Go to Meta Header under System and add below font-awesome stylesheet
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
CSS
Go to Css Theme under System and add below css
.searchContainer {display: inline-flex; flex: 1 1 300px; position: relative; border: 1px solid #ccc; border-radius: 5px; overflow: hidden;}
.searchIcon {padding: 0.5rem;}
.searchBox {border: 0; padding: 0.5rem 0.5rem 0.5rem 0; flex: 1;}
.searchButton {background: #538AC5; border: 0; color: white; padding: 0.6rem; border-radius: 0;}
JavaScript
Add below javascript where you will add search box
<!-- Voice Search by www.Wapmash.xyz -->
<script> function startDictation() { if (window.hasOwnProperty("webkitSpeechRecognition")) { var recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = "En-IN"; recognition.start(); recognition.onresult = function(e) { document.getElementById("transcriptt").value = e.results[0][0].transcript; recognition.stop(); document.getElementById("voicesearch") }; recognition.onerror = function(e) { recognition.stop(); } } }</script>
HTML
Now add below Search box html code
<div class="searchContainer"><form id="voicesearch" method="get" action="/site-search.html"> <i onclick="startDictation()" class="fa fa-microphone searchIcon"></i> <input class="searchBox" type="search" name="to-search" id="transcriptt" value=":to-search:" placeholder="Search..."> <input type="submit" value="Search" class="searchButton"></form></div>
Note: Voice search only work when you activate SSL ( https:// ) on your site.
Any inquires feel free to comment below.
Sir, thanks very much but what’s SSL ( https:// ) on my site,
And how can i activate SSL ( https:// ) on me site.
your site with https://
eg. https://example.com
Ok, thanks more tutorials
Thanks
Maine ek search box pahale se hi apne site par lagaya hai uske saath isko kaise laga sakte hai
Please reply.
add the external css, css, javascript as mentioned and html code me jo form action hai (action=”/site-search.html”), sirf isse change kro jo pahle me hai
Nice