كيفية إنشاء محرك بحث متجاوب بملء الشاشة انيق واحترافي

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

كيفية إنشاء محرك بحث متجاوب بملء الشاشة انيق واحترافي

نحن نعلم أن حقل البحث في وضع ملء الشاشة ببطء إلى اتجاه لأنه يحسن بشكل كبير وتجربة البحث لمستخدمي الجوال نظراً لأن شاشات الجوال صفيرة جداً من خلال توفير تراكب ملء الشاشة فإنك تسهل على المستخدمين الكتابة والبحث على موقع الويب الخاص بك والتنقل بين بين صفحات مدونتك بكل يسر وسهولة "

كيفية إنشاء محرك بحث ملء الشاشة

ادخل مدونتك الخاصة بك

إذهب إلى قائمة القوالب >>> ثم تحرير HTML ثم ابحث عن الكود هذا </head> ثم الصق الإضافة فوقه مباشرة ثم حفظ النموذج


<style type='text/css'>
#search-box{position:relative;width:100%;margin:0}
#search-form{height:40px;border:1px solid #999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#fff;overflow:hidden}
.search-form{margin:0;padding:0}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent}
#search-box input[type=&quot;text&quot;]{width:96%;padding:11px 0 12px 1em;color:#333;outline:none}
#search-button{position:absolute;top:0;right:0;height:42px;width:80px;font-size:14px;color:#fff;text-align:center;line-height:42px;border-width:0;background-color:#2EB0EC;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;cursor:pointer}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8}
.search-form-label,.search-text{position:absolute;left:0}
.search-form-label{bottom:100%;width:100%;display:block;color:#ff2e12;font-size:40px;font-weight:100}
.search-text{top:46%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;font-size:8vw;color:#fff;text-align:center;outline:0;position:fixed}
#search-form:after{content:&quot;f002&quot;;font-family:FontAwesome}
.keluar{height:100vh;width:100%;position:absolute;top:0;left:0;bottom:0;right:0;background:transparent;border:0}
</style>

الإضافة الثانية إذهب إلى التخطيط ثم قم بإنشاء أداة ( القطعة الجديدة ) ثم أختار JavaScript ثم ضع الرمز التالية بداخلها ثم حفظ النموذج

<div id="search-box">
  <form action="/search" id="search-form" method="get" target="_top">
    <input placeholder="ابحث هنا" onclick="document.getElementById('popup_searchBox').style.display = 'block';" id="search-text" name="q" placeholder="" type="text" />
  </form>
</div>
<div id="popup_searchBox" style="display:none;">
  <button class='keluar' onclick="document.getElementById('popup_searchBox').style.display = 'none';">Close</button>
  <div id="popup_searchBox_Data">
    <!-- Search Box -->
    <div class="search-form-wrapper" style="display: block;">
      <form action="/search" class="search-form" method="get">
        <input class="search-text" placeholder="ابحث هنا" name="q" type="text" value="" />
      </form>
    </div>
    <!-- Search Box -->
  </div>
</div>

أرجو أن تكون الإضافة مفيدة لكم لاتنسى مشاركة أفكارك بإستخدام قسم التعليقات أدناه

هذا كل شيء شكرا لكم على المتابعة و بقاؤكم معنا

رؤيا للتقنيات

كيفية إنشاء محرك بحث متجاوب بملء الشاشة انيق واحترافي

كيفية إنشاء محرك بحث متجاوب بملء الشاشة انيق واحترافي

Default