Categories: تطوير المواقع

كود البحث فى موقعك بشكل مميز

اضافة كود خدمة البحث فى موقعك بشكل مميز

1- الكود الاول تضع فى المكان الذى تريد ان يظهر بيه

<form method="get" id="search" action="<?php bloginfo('url'); ?>/">
  <input type="text" required  <?php the_search_query(); ?> name="s" id="s" onClick="this.value=''" onBlur="this.value=!this.value?' ابحث هنا .... ':this.value;"/>
</form>

2- الكود الثانى تضعه فى ملف CSS3 فى موقعك

/* search */form {
 position: relative;
 display: inline-block;
 margin: 20px auto;
}
input {
 outline: none
}
input[type="text"] {
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
 box-sizing: content-box;
 background: white;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
 height: 20px;
 border: 1px solid rgba(0,0,0,0.2);
 width: 170px;

 padding: 3px 23px 3px 8px;
}
input[type="reset"] {
 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAGFBMVEUAAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+hAPa4AAAAB3RSTlMAQNCwkKDgPaU3lgAAAEZJREFUeNplj9EKACAIA2dm+/8/bkj4sI6wDsIpRCRFBprNxx4bD12LrwRSDxRZkCcoCqVDIW1v+9Q+W6sOOhNkY9iQtsIFhO0DtcbsWN0AAAAASUVORK5CYII=');
 width: 14px;
 height: 14px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 border: 0;
 text-indent: -999px;
 position: absolute;
 right: 8px;
 top: 7px;
 cursor: pointer;
}
 input[type="text"]:invalid {
 outline: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAIVBMVEW/v7+/v78AAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v79QUkolAAAAC3RSTlOLYAAJeoMjRhpOcbsbtd4AAABJSURBVHjaVc1JDsAgDATB9uAF8v8Hx0QcSN9KssZI5eClDj18PRsFlmlQDcfUGd6A3EgYP1xncQ+sa5qYOk9jRQt1Y0izhU5bL2o2AW3ZQKeJAAAAAElFTkSuQmCC) 10px 6px no-repeat;
}
input[type="text"]:invalid + input[type="reset"] {
 visibility:hidden;
}
/*End search */

Share
Tags: cssphpالبحثكود
محمد فتحى

مدون و مطور و يب ومؤسس موقع روبابيكيا

Recent Posts

  • اخر الاخبار
  • هواتف

كل ما تريد معرفته عن سلسلة هواتف Mate 20

كشفت شركة هواوي الصينية عن 4 هواتف ذكية ضمن سلسلة هواتفها الذكية الجديدة Mate 20، تعمل بمعالج الشركة الجديدة المُصنع…

3 أسابيع ago
  • اخر الاخبار
  • هواتف

كل ما تريد معرفته عن هواتف iPhone XR و iPhone XS و iPhone XS Max

كشفت شركة أبل الأميركية النقاب عن 3 هواتف آيفون جديدة، على مسرح ستيف جوبز بولاية كاليفورنيا. ,وتضم والمعالج A12 Bionic…

شهرين ago
  • اخر الاخبار
  • هواتف

تسريب مواصفات الحاسب اللوحي Galaxy Tab S4

قام المدون Evan Blass صاحب حساب التسريبات الشهير على موقع تويتر evleaks بنشر صور قال انها للحاسب اللوحي Samsung Galaxy…

4 شهور ago
  • اخر الاخبار
  • هواتف

كل ما تريد معرفته عن الهاتف p20 pro و Huawei p20

قامت شركة Huawei بالإعلان عن هواتفها الجديدة p20 pro و Huawei p20، بكامرات قوية تشبه كاميرات DSLR. تعاونت هواوي مع…

7 شهور ago
  • اخر الاخبار
  • هواتف

تسريب مواصفات الهاتف +LG G7و LG G7

كشفت بعض التسريبات على شبكة الانترنت عن المواصفات المتوقعة لهاتف ال جي القادم تخت مسمي +LG G7و LG G7. (المزيد…)

8 شهور ago
  • اخر الاخبار
  • هواتف

سامسونج تكسف عن الهاتف Galaxy J7 Prime 2 بكاميرا سيلفي 13 ميجابيكسل

كشفت شركة سامسونج اليوم في الهند عن هاتفها Galaxy J7 Prime 2 مزود بكاميرا سيلفي. الهاتف Galaxy J7 Prime 2…

8 شهور ago