السلام عليكم متتبعي مدونة سمارت ويب ، اليوم ساشارك معكم مربع بحث احترافي مثل مدونة المحترف ومبدعي التصميم والعديد منها ، وساشرح لكم طريقة تركيبه ، هيا لنبدأ ...
معاينة : من هنا
طريقة التركيب
طريقة التركيب
1- توجه إلى قالب .
2- ثم تحرير HTML .
3- ابحث عن هذا الوسم </head> .
4- ثم ضع هذا الكود فوقه :
2- ثم تحرير HTML .
3- ابحث عن هذا الوسم </head> .
4- ثم ضع هذا الكود فوقه :
<style>.search-wrapper { position: fixed; z-index: 9999; width: 100%; height: 100%; background: rgba(52,52,52,0.7); bottom: 1000px; transition: 0.6s;}.search-form { transition: .6s; font-family: food-font; position: absolute; top: 50%; background: transparent; right: 50%; margin-right: -250px; margin-top: -65px; width: 500px; text-align: center;}.search-form .search-bar { width: 430px; height: 40px; font-family: food-font; padding: 4px; font-size: 14px; float: right; border-radius: 2px; border: 0;}.search-form .searchsubmit { width: 60px; height: 40px; FLOAT: RIGHT; margin: 0 3px; border: 0; background: #3395DC; color: #fff; font-family: food-font; font-size: 15px; border-radius: 2px; cursor: pointer;}.close-search { background: none; border: 0; color: #fff; font-size: 30px; padding: 10px; transform: rotate(0); cursor: pointer; transition: 0.8s;}.close-search:hover { transform: rotate(360deg); transition: 0.5s;}</style><script>$(document).ready(function(){ $("span.search-button").click(function(){ $(".search-wrapper").css("bottom", "0px"); $("button.close-search").css("display", "block"); }); $("button.close-search").click(function(){ $(".search-wrapper").css("bottom", "-1000px"); $("button.close-search").css("display", "none"); });});</script>
5- بعد ذلك ابحث عن هذا الوسم : <body>
6- وألصق هذا الكود فوقه :
<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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' placeholder='ابحث في الموقع' type='text'/>
<input class='searchsubmit' type='submit' value='بحث'/>
</form>
</div>
7- بعد الإنتهاء ضع هذا هذا في اي مكان في القالب يحلو لك (للتذكير : هذا الكود هو المسؤول عن إظهار مربع البحث ) :
<span class="search-button"><i class="fa fa-search"></i></span>
ملاحظة : لم أضع لكم ستايل للكود المسؤول عن إظهار مربع البحث ، أي كود أيقونة البحث ، اذا لم تكن لديك دراية باكواد CSS ولا تعلم كيف تعطيها ستايل ، فيمكنني مساعدة ، عبر التواصل على حسابي على فيسبوك أو وضع تعليق به رابط المدونة ووسيلة للتواصل معك ، وشكرا
Unknown - سمارت ويب
