كيفية اضافة محرك بحث منبثق الاحترافي

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

محرك بحث منبثق
محرك بحث منبثق

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

قبل تركيب الاضافة قم بمعاينتها من هنا.
– قم بالبحث عن الوسم التالي.

]]></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 تعليقات

اضف تعليق