9/30/2017

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





قبل أن نشرع في الموضوع قم بماعينة الأداة عبر الإنتقال للصفحة المعنية ثم إضغط على أيقونة البحث الموجودة في القائمة الأفقية.



طريقة تركيب الأداة

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css

  • 
     /* Start dropdown navigation - ba88 */
    #searchicon{display:inline-block;float:left;position:relative;background:none;}
    #searchbar{display:none;margin:0 auto;width:100%;text-align:center;background:#fff;position:relative;overflow:hidden;}
    #searchicon i{font-size:19px;color:#333;text-align:center;cursor:pointer;width:50px;height:50px;position:relative;display:flex;justify-content:center;align-items:center;}
    #searchicon:hover{color:#999999;}
    table.gsc-search-box td.gsc-input{padding:0;margin:0;}
    td.gsc-search-button{width:1%;padding:0;margin:0;}
    .gsc-search-box input.gsc-input{padding:0;margin:0;border:0;width:100%;height:50px;background:#2f2f2f;color:#c9511d;font-weight:600;font-size:1.5em;display:block;text-indent:20px;font-family:inherit;}
    .gsc-search-box input.gsc-search-button{background:#c9511d;border:0;color:#ffffff;padding:5px 15px;margin:0;font-weight:600;font-size:1.5em;cursor:pointer;display:block;width:100%;height:50px;font-family:inherit;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;}
    .gsc-search-box input.gsc-search-button:hover{background:#2f2f2f;}
    @media screen and (max-width:800px) {#searchicon {float: left;}}/*nexus10 */ 
    

    التعديل على الكود
    المحدد بهذا اللون خاص بلون نافذة البحث والذي بعده لون النص عند كتابة كلمات البحث
    المحدد بهذا اللون خاص بلون زر إبحث والذي بعده لون الكلمة
  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js

  • 
    <script type='text/javascript'>
    //<![CDATA[
    jQuery.noConflict(),jQuery(document).ready(function(a){var s=a("#searchicon i"),e=a("#searchbar");a("#searchicon").on("click",function(c){"searchicon"==a(this).attr("id")&&(e.is(":visible")?s.removeClass("fa-search-minus").addClass("fa-search"):s.removeClass("fa-search").addClass("fa-search-minus"),e.slideToggle(300,function(){}))})});
    //]]>
    </script> 
    

    الخطوة المهمة
    الآن سنقوم بتركيب الزر المسؤول عن فتح صندوق البحث وفي نفس الوقت نقوم بتركيب نموذج البحث أسفل القائمة الأفقية لذلك ينبغي عليك أن تعرف الموضع المناسب للأداة في قالب مدونتك.
  • ستقوم بالبحث عن كود القائمة الرئيسة الخاصة بك ثم تضيف الكود التالي أسفل </ul> في نهاية كود القائمة أي يكون الزر خارج القائمة
  • 
     <div class='searchicon' id='searchicon'><i class='fa fa-search'/></div> 
    
    - إحتمال أن ينزل الزر أسفل الأقسام وذلك لأن طول المحتوى <ul> يحتوى على نمط الطول width: 100%; لذلك عليك حذفه.
    - إذا كان قالب مدونتك متجاوب مع شاشات العرض لاتقم بوضع الكود داخل <ul> لأنه سيختفي داخل القائمة المنسدلة عند عرض المدونة على نموذج الهاتف
  • قم بالبحث عن 'outer-wrapper' جرب أن تضع الكود التالي فوقه أو أسفله
  • 
     <div class='clear' id='searchbar'>
            <form action='/search' class='gsc-search-box' id='searchform' method='get' role='search'>
              <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
                <tbody>
                  <tr>
                    <td class='gsc-input'>
    <input autocomplete='off' class='gsc-input' id='searchBox' name='q' placeholder='أدخل كلمات البحث...' size='10' type='text'/>
                    </td>
                    <td class='gsc-search-button'>
    <input class='gsc-search-button' id='searchButton' type='submit' value='إبحث'/>
                    </td>
                  </tr>
                </tbody>
              </table>
            </form>
    </div> 
    
    - 'outer-wrapper' هو الحقل الذي يجمع داخله جسم الموضوع والقائمة الجانبية ففي الغالب يكون بهذا الإسم إذا وجدت الكود المطلوب جرب وضع نموذج البحث أسفله أو فوقه حتى تلاحظ أن الأداة لا تحتوى على أي تشوه عند الفتح والإغلاق.
    - إذا أشكل عليك الأمر قم بوضع رابط مدونتك في التعليقات وسنساعدك على تخصيص الاداة .