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

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

قبل البدء في شرح تركيب هذه الاضافة نضع لكم رابط معاينة مباشر للاضافة 

معاينة

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

مميزات الاضافة

1. متجاوبة مع جميع الاجهزة والهواتف المحمولة
2. شكل جديد وحصري للاضافة
3. صندوق منزلق لرؤية الكلام الذي تبحث عنه 
4. تصميم عصري بتقنية الماتريل ديزاين 
5. الوان مريحة لبعين تستطيع تغيرها 
6. الاضافة تعمل على جميع القوالب  
7. والمذيد من المزايا استكشفها بنفسك

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

طريقة تركيب الاضافة 

1. قم بتسجيل حسابك ثم اذهب الى منصة بلوجر dashboard
2. انتقل الى المظهر >> اضغط على تحرير HTML 
3. قم بالضغط على Ctrl + F للبحث داخل الاكواد
4. اضغط على Ctrl + C لنسخ الاكواد
5. واضغط على Ctrl + V للصق لاكواد
6. اصغط بعد ذلك على حفظ المظهر

هذه هي خطوات الاضافة تركيب تابع الشرح حتى النهاية لتفهم التفاصيل وطريقة تركيب الاضافة بدون اخطاء 

طريقة تركيب الاضافة 

قم بالبحث عن الوسم /b:skin و قم بوضع الكود التالي فوق

  .speksear img{
padding:2px;
background:linear-gradient(to top,#2193b2,#000000,#3a37e8);
border-radius:50px;
margin-top:7px!important;float: left; width: 45px;margin-left: 1%;}
#transcript{text-align:center;font:size:10x;font-weight: bolder}
.speech {
    position: absolute;
    left: 0px;
display: none;
    top: 100%;
z-index:9999;
}
.speech input {
    border: 1px solid #e1e1e1;
    padding-right: 10px;
    height: 50px;
}
 .speksear:hover {background:red;}

بعد ذلك قم باضافة كود الجافا سكربت المسؤول عن عمل الاداة قم بوضع الكود التالي فوق الوسم /body 

<script>
  function startDictation() {

    if (window.hasOwnProperty(&#39;webkitSpeechRecognition&#39;)) {

      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = &quot;ar-AR&quot;;
      recognition.start();

      recognition.onresult = function(e) {
        document.getElementById(&#39;transcript&#39;).value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById(&#39;abdoshweb&#39;).submit();
      };

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

    }
  }
</script>

بعد ذلك قم بوضع كود جافا اخر فوق الوسم /body وهذا الكود مسؤل من اظهار الصندوق المنزلق الذي تظهر عليه النص الذي بحث عنه عن طريق البحث الصوتي

<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

$(".speksear").click(function(){
$(".speech").slideToggle();
return false;
});


});

//]]>
</script>

و الان نقوم باضافة الكود الاساسي للاضافة الكود التالي تقوم باضافته في المكان الذي تريد ان تظهر فيه الاضافة وافضل مكان الهيدر غالبا ما يكون الكلاس او الايدي الخاص به هو header-top  لو كنت تستخدم قالب سكويز الايدي الخاص بالهيدر هو top-bar لو كنت تستخدم قالب سيو بلس الايدي الخاص بالهيدر هو sp-header ممكن يكون الايدي او الكلاس في قالبك مختلف عن الثلاثة السابقة فهذا يعتمد على المطور ولقد ذكرت قالب سكويز وسيو بلس لانهم اكثر القوالب المستخدمه كذلك تستطيع اضافة وضع الاضافة في القائمة الرئيسية للمدونة غالبا ما يكون اسم الكلاس او الايدي الخاص بالقائمة الرئيسية هو main-menu هذا مجرد اقتراح ممكن ان يختلف اسم الكلاس او الايدي كما ذكرنا سابقا فهذا لامر يعتمد على مبرمج القالب.

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

الكود التالي هو الكود الذي  تحدثنا عنه وهو المسؤول عن مكان ظهور الاضافة 

<a class="speksear" href="#"><img onclick="startDictation()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr6R95APiaexUXMlgI6d-gXn2lTcvhS_VzwyiAC561U7QLzamKO0JmgtRlrL3DZ26ck6L1hZeS1uqzgljhaH1c7lr8HAOfc5FfzZ8yx8R6O06jO8_Mdd7Euv2bGNYs4yCDBUU3lmeN6VQd/s50/spik.png" /> </a>
<form action="/search" id="abdoshweb" method="get">  <div class="speech">	<input id="transcript" name="q" placeholder="تحدث الان ..." type="text" />  </div></form>
		

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

شرح التعديل على الاضافة

تستطيع التعديل على هذه الاضافة من حيث المظهر بحيث تتكون خلفية الزر من لون متدرج على ثلاثة الوان مختلفة من الاعلى الى الاسفل الون الاعلى يحمل الكود #2193b2 قم بتغيره بالون الذي يناسبك او اتركه كما هو ان كنت لا تريد تغير اللون.

اللون الثاني ويحمل الكود #000000 قم بتغيره بالون الذي يتناسب مع الوان قالبك  اخيرا اللون الثالث والاخير يحمل الكود #3a37e8 كذلك قم بتغيره او اتركه كما هو حسب ما تراه مناسب .

المعرف float:left هو المعرف الخاص بمكان الاضافة و يحتوي على قيمتين وهي lleft و right اي بمعني يسار ويمين لوضع الزر على اليمين قم بتغير القيمة right بالقيمة left وان كنت تريدها في اليسار اتركها كما هي موجودة . كذلك تستطيع لون البودر الخاص بالصندوق المنبثق وهو الخط المحيط بالصندوق و هو يحمل اللون الرمادي وكود اللون هو #e1e1e1 قم بتغيره بالون الذي يتناسب مع قالبك او اتركه على اللون الرمادي

ان كنت لا تريد الخلفية متدرجة وكنت تريد جميع الخلفية بالون واحد قم باستبدال جميع الالوان السابقة بالون واحد من اختيارك .

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