حل مشكله الصوت الرسائل الصوتية في ماسنجر فيسبوك

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

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

كل ما عليك فعله هو فتح موقع Google على الويب من هاتفك المحمول أو سطح المكتب ، ويمكنك العثور على أيقونة الميكروفون الصغيرة في داخل مربع البحث. فقط اضغط على هذا رمز الميكرفون ، يمكنك التحدث الآن ، سوف تجد أن صوتك تم نقله الى نص وتظهر نتيجة البحث لك فورا.
أفضل مافى الموضوع أن الصوت يتعرف عليه محرك البحث جوجل ودون الانتظار حتى يفهم المتصفح كلماتك عبر الكتابه. سيكون هذا هو الخيار الأفضل للإدخال عبر لوحة المفاتيح لأي شخص ليس لديه فكرة عن الكتابة وهو محرك البحث الصوتى. ليس هناك شك في أن البحث الصوتي سيكون أحد أكبر اتجاهات تحسين محركات البحث (SEO) في عام 2019 ومايليها.
طريقة التركيب داخل مدونة بلوجر:
قم بنسخ الكود التالى وضعه داخل أى اضافه بالتخطيط ويفضل أن يكون بالجزء العلوى كأول مايظهر عبر الجوال من مدونتك لكى يكون ظاهر للزائر ويستطيع استخدامه للبحث داخل مدونتك.

<!-- 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="تعلم سيو | Learn Seo" method="get" action="ضع هنا رابط مدونتك/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('تعلم سيو | Learn Seo').submit();
      };

      recognition.onerror = function(e) {
        recognition.stop();
      }

    }
  }
</script>
 

هذا الكود عند وضعه بمدونتك ستكون نتائج البحث من داخل مدونتك فقط وليس عبر جوجل ، وبعد تركيبه سيظهر بالشكل التالى :-
1- على الموبايل 

2- على الديسك توب 

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

تعديل المقال