كيفية اضافة صندوق البحث الصوتي على موقعك او مدونة بلوجر

كيفية اضافة صندوق البحث الصوتي على موقعك او مدونة بلوجر

شرح طريقة اضافة صندوق البحث الصوتي speech voice recognition على بلوجر blogger للتعرف على كلام الزوار وتقديم لهم نتائج البحث من موقعك , ميزة رائعة لتسهيل عملية البحث على مدونتك وايضا نافعة للسيو الداخلي الخاص بموقعك التى تنصح بها محركات البحث ومنها جوجل

ما ستشاهده فى الحلقة :
- طريقة اضافة صندوق البحث الصوتي Speech recognition الخاص بجوجل على بلوجر
- طريقة تخصيص صندوق البحث الصوتي ليتلائم مع مدونتك على بلوجر
- طريقة اختيار نوع لغة صندوق الباحث الصوتي ومنها العربية على موقعك

الكود المستخدم :

الكود المستخدم : <!-- CSS Styles --> <style> .speech {border: 1px solid #DDD; width: 100%; padding: 0; margin: 0} .speech input {border: 0; width: 80%; display: inline-block; height: 30px;} .speech img {float: right; width: 40px } </style> <!-- Search Form --> <form id="arabes1" method="get" action="https://www.aboalkasim.com/search"> <div class="speech"> <input type="text" name="q" id="transcript" placeholder="Speak" /> <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" /> </div> </form> <!-- HTML5 Speech Recognition API --> <script> function startDictation() { if (window.hasOwnProperty('webkitSpeechRecognition')) { var recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = "ar-AR"; recognition.start(); recognition.onresult = function(e) { document.getElementById('transcript').value = e.results[0][0].transcript; recognition.stop(); document.getElementById('arabes1').submit(); }; recognition.onerror = function(e) { recognition.stop(); } } } </script>

الشرح فيديو :