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

مرحبا بكم اصدقائي فى حلقة مميزة على قسم انشاء مدونة بلوجر احترافية , اماسنقدمه لكم فى هذه التدوينة هو اداة رائعة ومميزة يمكنك اضافتها على مدونتك بلوجر , الاضافة هي صندق بحث الصوتي Speech Recognition على مدونتك , حيث صندوق البحث الافتراضي لبلوجر او اي موقع فى العادة يتطلب من الزائر كتابة الكلمات المفتاحية التى يريد البحث عنها .

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

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

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

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

الاكواد :

<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>

<form id="arabes1" method="get" action="https://th-pro-info.blogspot.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>

<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>

لتحميل الاكواد فى ملف TXT من : هنا

ان اعجبك الدرس شارك مع اصدقائك

بلوجر