الخميس، 5 سبتمبر 2019

احصل على هذة الاداة من هنا

سكريبت البحث عن الكلمات بالمواضيع



السلام عليكم
ورحمة الله
وبركاته

تدوينتنا اليوم عبارة عن سكريبت
يمكنك من البحث بالنصوص داخل التدوينة
عن طريق صندوق
لذا لن أطيل عليكم وأترككم مع الئرح





طريقة التركيب
  1. قم بتحرير القالب ثم ابحث عن b:skin
  2. ثم قم بلصق الأكواد التالية فوقه
  •   #search_para
  • {
  •  color:grey;
  • }
  •  #search-isw input {
  •     background: white;
  •     border: 1px solid #e6e6e6;
  •     padding: 4px 7px;
  •     font-family: unset;
  • }
  • .highlight
  • {
  •     color: black;
  •     background: #fde87b;
  •     padding: 0 0px;
  • }
الان ننتقل الى أهم خطوة لذلك فقط ركز قليلا وستفهم 
  1. ابحث عن الوسم /body
  2. وضع فوقه الأكواد التالية
  • <script>
  • document.addEventListener( 'DOMContentLoaded',function(){
  •  var searchpara=document.getElementById("search_para").innerHTML;
  •  searchpara=searchpara.toString();
  •  document.getElementById("search").onclick =function ()
  •  {highlight_word(searchpara)};
  • },false);

  • function highlight_word(searchpara)
  • {
  •  var text=document.getElementById("search_text").value;
  •  if(text)
  •  {
  •   var pattern=new RegExp("("+text+")", "gi");
  •   var new_text=searchpara.replace(pattern, "<span class='highlight'>"+text+"</span>");
  •   document.getElementById("search_para").innerHTML=new_text;
  •  }
  • }
  • </script>
  1. الان افتح تبويب جديد بالمتصفح
  2. ثم افتح أي تدوينة بمدونتك
  3. ثم قم بالضغط على فحص المعلومات وتطبيق الشرح كما بالصورة

  1. ستجد الوسم الحامل لنص الموضوع كالذي يشير اليه السهم بالصورة
  2. الان ستعود الى القالب وتبحث عنه
  3. ثم تضيف اليه الأيدي التالي id="search_para"
  • <div class="post-text" id="search_para">

  1. الان قم باضافة كود صندوق البحث فوق صورة الموضوع مثلا 
  • <div id="search-isw">
  • <input type="text" placeholder="ابحث عن كلمة ..."id="search_text"/>
  • <input type="button" value="بحث" id="search"/>
  •     </iv>
  •       </div>
اذا لم تفهم كيف تضيف كود صندوق البحث فيمكنك ترك تعليق به رابط موقعك بصندوق التعليقات

هناك تعليق واحد


EmoticonEmoticon