راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

أكتب ما تود البحث عنـه .....

إعلان
إعلان

آخر الأخبار

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






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





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

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


نذهب الى المظهر و نضغط على 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>



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

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

و شكرا

hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان