كيفية إضافة محرك بحث منبثق الإحترافي يغطي كامل الصفحة
سنقدم لكم في هذه التدوينة واحد من اكثر محركات البحث الإحترافية ، كما ان هذا المحرك بحث يوجد في مدونة المحترف الغنية عن التعريف وهذه المدونة التي كنا قدمنا لكم منها إضافة أزرار التواصل الإجتماعي ، أما اليوم سنقدم لكم محرك بحث المتواجد بها والذي يتميز خفيف جدا وسريع التحميل ، وحتى لا نطيل عليك سنقوم بشرح لك كيفية إضافة محرك منبثق لمدونتك بأبسط الطرق. لكن قبل ذلك يمكنك معاينة هذا المحرك البحث من رابط المعاينة اسفل التدوينة قبل وضعه على مدونتك حتي تفصل ان كنت تريده ام لا.
شرح إضافة محرك بحث منبثق على الصفحة كاملة:
* قبل تركيب الاضافة قم بمعاينتها من هنا. (غير متوفرة حاليا).
* اولا اتجه الى لوحة تحكم مدونتك.
* بعدها الى المظهر (القالب).
* ثم اضغط على سهم جنب كلمة تخصيص.
* بعدها اختر تحرير html.
* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.
* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي.
</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() {
$(".elprof-btn-srch").click(function(){
$(".elprof-srch").css({
opacity: "1",
transform: "translate(0 , 0)"
})
});
$(".elprof-close").click(function(){
$(".elprof-srch").css({
opacity: "0",
transform: "translate(0 , 100%)"
}) });
});
</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>