U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

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






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





اقدم لكم محرك بحث احترافي بشكل منبثق يغطي واجهة القالب بشكل كامل
و طبعا هذه الاضافة مهمة جدا و تعطي لقالبك مظهر احترافي جدا
يتم تركيبها بعدة خطوات بسيطة في المكان اللذي تريد ان يظهر الزر به

طريقة التركيب


نذهب الى المظهر و نضغط على Ctrl + F و نضع في مستطيل البحث /head و نضغط على Enter
نضع الكود التالي فوقه



 <style>button.tipr-zome{text-align:center;float:right;background:#2368a1;border-radius:4px;color:#FFFFFF;border:1px solid transparent;cursor:pointer;padding:0;width:30px;font-size: 10px;height:30px;margin:0.2em;text-decoration:none;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}#postedit-font-btn{position:relative;display:inline-block;left: 336px;}button.tipr-zome:hover {background: #d3d5d6;color: #1c629c;}@media screen and (max-width : 480px) {#postedit-font-btn {position: relative;display: inline-block;left: 0px;}</style><style>.search-wrapper {    position: fixed;    z-index: 999999;    width: 100%;    height: 100%;    background: rgba(1, 18, 31, 0.68);    bottom: 1000px;    transition: 0.6s;}.search-form {    transition: .6s;    font-family: &#39;Cairo&#39;, sans-serif;    position: absolute;    top: 50%;    background: transparent;    right: 50%;    margin-right: -250px;    margin-top: -65px;    width: 500px;    text-align: center;}.search-form .search-bar { width: 420px;border-radius: 36px; margin-right: 6px; height: 40px; font-family: 'Cairo', sans-serif;  padding: 4px;font-size: 14px; float: right;border-radius: 0px; border: 0; border-radius: 30px;}.search-form .searchsubmit { width: 62px; height: 48px;FLOAT: RIGHT;margin: 0 0px; border: 0; background: #3395DC; color: #fff;    font-family: 'Cairo', sans-serif; font-size: 20px; border-radius: 0px; cursor: pointer; border-radius: 32px;}.search-form .searchsubmit:hover {background: #082c46;}.close-search {    background: none;    border: 0;     margin: 64px;   color: #fff;    font-size: 30px;    padding: 22px;    transform: rotate(0);    cursor: pointer;    transition: 0.8s;}.close-search:hover {    transform: rotate(360deg);    transition: 0.5s;}</style><script>$(document).ready(function(){    $(&quot;span.search-button&quot;).click(function(){      $(&quot;.search-wrapper&quot;).css(&quot;bottom&quot;, &quot;0px&quot;);      $(&quot;button.close-search&quot;).css(&quot;display&quot;, &quot;block&quot;);    });    $(&quot;button.close-search&quot;).click(function(){      $(&quot;.search-wrapper&quot;).css(&quot;bottom&quot;, &quot;-1000px&quot;);      $(&quot;button.close-search&quot;).css(&quot;display&quot;, &quot;none&quot;);    });});</script>








 بعد ذلك ابحث عن هذا الوسم : <body> او هكذا body>  او  <body
 وألصق هذا الكود فوقه :




<div class='search-wrapper'>  <button class='close-search'><i class='fa fa-times'></i></button><form action='/search' class='search-form' method='get'><input class='search-bar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' placeholder='ابحث في الموقع' type='text'/>  <input class='searchsubmit' type='submit' value='بحث'/></form></div>


 بعد ذلك ابحث عن هذا الوسم :   ]]></b:skin>
 وألصق هذا الكود فوقه :



.search-button {  position: relative;    float: left;    display: inline-block;    width: 45px;    height: 45px;    z-index: 20;    color: #f2f2f2;    font-size: 16px;    line-height: 42px;    cursor: pointer;    margin: -1px 0;    padding: 0;    transition: color .3s;    background: rgba(0,0,0,0.2);    text-align: center;    border-radius: 0px; !important;}
.search-form .searchsubmit {    width: 62px;    height: 48px;    FLOAT: RIGHT;    margin: 0 0px;    border: 0;    background: #3395DC;    color: #fff;    font-family: food-font;    font-size: 20px;    border-radius: 0px;    cursor: pointer;}



و اخيرا اختار مكان مناسب لوضع الزر الخاص بعمل الاضافة هذا الكود المسؤل عن اظهار مربع البحث
مثلا فوق رسائل المدونة الالكترونية





<span class="search-button"><i class="fa fa-search"></i></span>



انا وضعت زر البحث فوق رسائل المدونة الالكترونية طبعا عند وضعه بالمكان المناسب مثلا على شريط الرئيسة
سيكون اجمل و افضل 

و قم بالحفظ و مبروك عليك الاضافة 

و شكرا
الاسمبريد إلكترونيرسالة