إبحث في هذه المدونة

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

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

شرح التركيب محرك بحث منبثق على الصفحة كاملة:

قبل تركيب الاضافة قم بمعاينتها من هنا.
- قم بالبحث عن الوسم التالي.
]]></b:skin>
عند ايجاده قم بوضع الكود التالى فوقه.
.search{background:#ff8400;padding:0 5px;display:block;float:right}
.search a.search-btn{padding:0 13px;line-height:60px;color:#fff;font-size:14px;display:block}
a.search-btn i{font-size:16px}
.elprof-srch{font-family:elprof-font;right:0;bottom:0;position:fixed;z-index:99999999999999999999;left:0;top:0;width:100%;height:100%;transform:translate(0,100%);transition:all 0.5s ease-in-out;opacity:0;background:#fff}
input.input-search{border:0;font-family:treexil;background-color:#f6f6f6;box-shadow:0 0 5px 0 rgba(0,0,0,0.11);width:400px;display:inline-block;padding:0 7px;color:#656565;font-size:15px}
.search-elprof{top:40%;position:absolute;width:100%;text-align:center}
i.fa.fa-times.elprof-close{position:absolute;right:3%;top:3%;font-size:27px;color:#ff8400;cursor:pointer}
.search-elprof span{font-family:treexil;display:block;margin-bottom:10px;color:#656565;font-size:15px}
- اعد البحث عن الوسم التالي.
</body>
عادة ما يتوجد في اخر القالب، عند ايجاده قم بوضع الكود التالى فوقه.
<script src='https://code.jquery.com/jquery-1.12.4.min.js'/>
<script>
$(document).ready(function() {
$(&quot;.elprof-btn-srch&quot;).click(function(){
$(&quot;.elprof-srch&quot;).css({
opacity: &quot;1&quot;,
transform: &quot;translate(0 , 0)&quot;
})
});
$(&quot;.elprof-close&quot;).click(function(){
$(&quot;.elprof-srch&quot;).css({
opacity: &quot;0&quot;,
transform: &quot;translate(0 , 100%)&quot;
}) });
});
</script>
- اعد البحث مرة اخرى عن الوسم التالي.
<body
بعد ايجاده قم بوضع الكود التالى أسفله.
<div class='elprof-srch'>
<i aria-hidden='true' class='fa fa-times elprof-close'/>
<div class='search-elprof'>
<span>اكتب ما تود البحت عنه و اضغط Enter</span>
<div class='form-srch' style='display: block;'>
<form action='/search' id='searchbox' method='get'>
<input class='input-search' name='q' placeholder='البحث ...' size='15' type='text'/>
</form></div></div></div>
- الأن مع الكود المسؤول عن إظهار محرك البحث في المدونة، وهذا الكود قم بوضعه فى المكان الذى تريده فى مدونتك، او قم بوضعه في اداة HTML/JavaScript من تخطيط.
<li class='search'>
<a class='search-btn' href='javascript:void(0);'>
<i class='icon-search fa fa-search elprof-btn-srch'/></a>
</li>
بعدها قم بحفظ القالب و شاهد محرك البحث الجديد فى مدونتك.
هذا كل شئ، اتمنى ان ينال الموضوع اعجابكم وتنال الاضافة رضاكم، وفي اخير اقول لكم سلام.

هناك 4 تعليقات:

  1. اخي اريد مساعدتك كيف اضع الكود الاخير في مدونتي https://joarab.blogspot.com.eg/

    ردحذف
    الردود
    1. مرحبا بك اخي .
      اخبرني في اي مكان تريد وضع زر في مدونتك ؟؟؟؟

      حذف
  2. اخي اشكرك على الموضوع الرائع

    انا اريد ان استبدل الزر القديم بالجديد

    اين يكون عادة

    ردحذف
    الردود
    1. مرحبا بك صديقي و لا شكر على واجب لكن انا لا افهم ماذا تقصد ؟؟
      يرجى توضيح حتى استطيع مساعدتك :)

      حذف