منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


قالب البحث المميز بتقنية css بالهيدر

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف JAR7 في 02/03/16, 01:17 pm

قالب البحث المميز بتقنية css احترافي

القالب يحمل مساحة زووم ويزيد من عرض صندوق البحث

بالاضافة يعمل البحث بصفحة جديدة بدلا من نفس الصفحة

صورة للكود

https://i68.servimg.com/u/f68/16/46/77/76/1437-011.gif

طريقة التركيب يتم اضافة كود css الاتي فوق كلمة </head> يقالب overall_header

الرمز:

  <style>
body
{
margin: 0px 0px 0px 0px;

}
.nn2{
 background-color:#EDEDED;
 background-repeat:repeat;
 height:35px;
 width:100%;
        border-bottom: 1px solid rgb(206, 204, 204);
}
    
.LeftTopHeaderSearch {
    float: left;
    padding: 5px;
    margin: 0px;
}

.LeftTopHeaderSearchinput {
    background-color: #FFF;
    color: #AAAAAA;
    padding: 0px 6px;
    margin: 0px;
    border: none;
    border-radius: 0px 4px 4px 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    font-family: "Droid Arabic Kufi", Tahoma, Calibri, Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold;
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
    height: 28px;
    width: 140px;
}

.LeftTopHeaderSearchinput:focus {
    -moz-transition: width 0.5s ease-out;
    -webkit-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
    width: 170px;
}

.LeftTopHeaderSearchbutton {
    float: left;
    background-color: #FAFAFA !important;
    color: #C9C9C9 !important;
    padding: 0px 3px !important;
    margin: 0px !important;
    border: none !important;
    border-radius: 4px 0px 0px 4px !important;
    -webkit-border-radius: 4px 0px 0px 4px !important;
    -moz-border-radius: 4px 0px 0px 4px !important;
    font-family: "Droid Arabic Kufi", Tahoma, Calibri, Verdana, Geneva, sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    width:40px !important;
    height: 28px !important;
}
</style>


ونبحث عن {JAVASCRIPT} ونضيف تحته مباشرتا
الكود الاتي

الرمز:
<div class="nn2">

<div class="LeftTopHeaderSearch">
<form action="search" target="_blank">
<input type="hidden" name="ie" value="Windows-1256" >
<input type="hidden" name="sitesearch" value="" >
<input type="hidden" name="hl" value="fr" />
<input class="LeftTopHeaderSearchinput" type="text" placeholder="إبحث في المنتدى" name="search_keywords" size="30" >
<input class="LeftTopHeaderSearchbutton" type="submit" name="go" value="بحث" >
</form>
  
</div></div>

علما سيكون البحث بهذه الطريقة اعلى الواجهه

اذا تريدة اسفل الواجهه تضيف الكود هنا اسفل الكود الاتي

الرمز:

<!-- BEGIN switch_logo_right -->
 <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
 <!-- END switch_logo_right -->
 </tr>
 </table>




JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف عضوة مبدعة في 02/03/16, 01:31 pm

يعطيك آلف عافيه ع هالموضوع
وسلمت الآنامل المتألقه 

عضوة مبدعة
عضو نشيط


الجنس : انثى
عدد المساهمات : 82
التقييم : 3
تاريخ التسجيل : 27/02/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف JAR7 في 02/03/16, 11:13 pm

منور الموضوع



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف المصمم الليلي في 02/03/16, 11:54 pm

شكرا جزيلا لكي

المصمم الليلي
عضو نشيط


الجنس : ذكر
عدد المساهمات : 192
التقييم : 8
تاريخ التسجيل : 27/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو http://arab-ibda3.0wn0.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف JAR7 في 03/03/16, 12:19 am

منور الموضوع



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف AmEr 3OshA8 في 04/03/16, 11:18 am

شكرا ع الكود الاكثر من رائع



AmEr 3OshA8
عضو نشيط


الجنس : ذكر
عدد المساهمات : 143
التقييم : 24
تاريخ الميلاد : 11/12/1995
تاريخ التسجيل : 27/02/2016
العمر : 20
الموقع : قلبى
العمل/الترفيه : السباحه طبعا
المزاج : تأليف بن شرابى (أمير حروفه تلاطم بعضها..كثر الزين ما تعرف وين تناظر أدب واحترام ونظام واتباع..يستاهل لقب المبدع الشاطر)

معاينة صفحة البيانات الشخصي للعضو http://www.ahlawarsh.net/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف JAR7 في 06/03/16, 06:13 am

منور الموضوع



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2195
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف Black Love في 19/03/16, 08:35 pm

شششكرآ على الكود #بلآك
  



Black Love
عضو نشيط


الجنس : ذكر
عدد المساهمات : 96
التقييم : 15
تاريخ التسجيل : 19/03/2016
الموقع : المغرب ~~♥
العمل/الترفيه : مصمم جرافيك و مككود وسسباح ايضا هع ♥
المزاج : ~~ ححلو النهردهه هع ♥

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: قالب البحث المميز بتقنية css بالهيدر

مُساهمة من طرف Mr.Yakoub في 13/04/16, 08:15 pm

دُمتَ بِهذآ الع ـطآء أإلمستَمـرٍ

يُسع ـدني أإلـرٍد على مـوٍأإضيعكًـ

وٍأإألتلـذذ بِمـآ قرٍأإتْ وٍشآهـدتْ

تـقبلـوٍ خ ـآلص احترامي

لآرٍوٍآح ـكُم أإلجمـيله

Mr.Yakoub
الاشراف العام


الجنس : ذكر
عدد المساهمات : 548
التقييم : 3
تاريخ التسجيل : 28/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى