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

مربع بحث خاص في موقعك يقدم نتائج من داخل تدوينات موقعك شيئ يزيد من جمالية مدونتك و يزيد كذلك من السيو و يكون محبوبا لذى محرك بحث جوجل ، و لاكن ان قمت بإضافة مربع بحث بالصوت ، فكما نعلم فإن مستعملي الهواتف الذكية يزداد مع مرور الوقت و يزداد معها حجم البحث في جوجل وغيرها ، و البحث صوتيا اصبح شيئا يستخدمه العديد من الأشخاص لسهولته و بدون عناء ، لذلك في هذا الدرس من اضافات بلوجر سنتعرف على كيفية اضافة مربع بحث صوتي و كتابي خاص في موقعك  .

وضع مربع بحث بالصوت داخل موقعك على بلوجر (اضافات بلوجر)

فجوجل تشجع على وضع مربعات بحث بالصوت داخل موقعك فهي سهلة لمستخدم ان اراد البحث داهل موقعك ، و هذا طبعا سيجعل موقعك محبوبا لدى محركات البحث و بالأخص جوجل ، ويجعل كذلك المستخدمين و الزوار يجيدون أفضل تجربة داخل موقعك ، و يزيد من فرص عودة الزائر لموقعك الإلكتروني .

»اقرأ ايضا : اضافة نموذج لحساب عدد السعرات اليومية لكل شخص 

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

فهي طريقة سهلة ستجد الأكواد الخاصة بالمربع داخل الموضوع ، إذن فيمكنك ان تضيف مربع البحث الصوتي بطريقتين :

• الطريقة 1 : يمكنك ان تقوم بوضع الأكواد بشكل منفصل فيمكنك ان تقوم بنسخ الأكواد من <style> إلى </style>  وتقوم بلصقها تحت <b:skin><![CDATA[/* ، و بعدها ستقوم بنسخ الكود من <form> الى </form> و تقوم بلصقه في المكان الذي تود ان يعرض فيه مربع البحث الصوتي ، و بعدها ستأخذ الأكواد المتبقية و ستقوم بلصقها في اعلى </body>
• الطريقة 2 : و هي الأسهل و هي ان تقوم بأخذ جميع الأكود ووضعها داخل القالب في المنطقة التي تريد في body  ، او يمكنك بكل سهولة نسخ جميع الأكواد ووضعها في التخطيط عن طريق ؛  اضافة اداة » HTML/JS » لصق الكود ، و هكذا ستجد الإضافة داخل المنطقة التي وضعتها فيها .

أما بالنسبة ان كنت تريد تغيير مربع البحث العادي  داخل موقعك فيجب ان تبحث اولا عن <form> الخاص بمربح البحث القديم ستجده فوق او تحت <header> و ستقوم بحذفه و تبديله بجميع الأكواد في الأسفل ، وهذا حسب كل قالب .

التعديل على مربع البحث الصوتي 

فيمكنك التعديل اولا على رابط موقعي فستجد داخل الأكواد رابط موقعي على هذا الشكل https://www.trayven.site/search انت ستقوم بإستبداله مثل هكذا   رابط موقعك/search ، و يمكنك ايضا تغيير لغة البحث بالصوت فإن كان موقعك أجنبي باللغة الإنجليزية ستقوم بتغيير ar-AR الى en-US
-العربية : ar-AR
-الإنجليزية : en-US
-الفرنسية : fr-FR
»اقرأ ايضا : اضافة خاصية الإشتراك في موقعك 

كود مربع بحث صوتي 

و الآن يمكنك نسخ الأكود بحسب الطريقة الأولى او الثانية و البدأ في التعديل على مربع البحث الصوتي  الخاص بموقعك ، و يمكنك التواصل معنا في حال واجهتك اي مشاكل في التعديل او التركيب .
<!-- css for design --> <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="trayven" method="get" action="https://www.trayven.site/search"> <div class="speech"> <input type="text" name="q" id="transcript" placeholder="البحث الصوتي" /> <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" /> </div> </form> <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('trayven').submit(); }; recognition.onerror = function(e) { recognition.stop(); } } } </script>

شرح كيفية تركيب مربع البحث الصوتي