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

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

زائر
زائر
تمت المشاركة في الثلاثاء يناير 26, 2016 3:57 am
قالب البحث المميز بتقنية css احترافي

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

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

صورة للكود

https://i.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 في الأربعاء فبراير 24, 2016 2:24 am عدل 1 مرات

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

avatar
بصمة خالدة
الجنس : ذكر

الاسد

عدد المساهمات : 23062

نقاط النشاط : 26540

السٌّمعَة : 90

بلد العضو :

العمر : 37

معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
تمت المشاركة في الثلاثاء يناير 26, 2016 7:39 am

سلمت يداك لكي الف شكر

تقبلي مروري

التوقــيـــــــــــــــــــــع

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

زائر
زائر
تمت المشاركة في الثلاثاء يناير 26, 2016 6:30 pm
منور الموضوع

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

avatar
عضو نشيط
الجنس : ذكر

الثور

عدد المساهمات : 106

نقاط النشاط : 263

السٌّمعَة : 3

بلد العضو :

العمر : 24

معاينة صفحة البيانات الشخصي للعضوhttp://g-njoom.roo7.biz
تمت المشاركة في الإثنين فبراير 08, 2016 3:26 pm
ممتع اشكرك على الطرح المميز تحياتي لك  وردة حمراء

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

زائر
زائر
تمت المشاركة في الإثنين فبراير 08, 2016 3:44 pm
منور الموضوع

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

avatar
عضو فعال
الجنس : ذكر

عدد المساهمات : 668

نقاط النشاط : 988

السٌّمعَة : 24

بلد العضو :

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء فبراير 09, 2016 12:37 am
اشكرك على الطرح المميز تحياتي لك  
التوقــيـــــــــــــــــــــع



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

زائر
زائر
تمت المشاركة في الثلاثاء فبراير 09, 2016 6:21 am
منور الموضوع

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

avatar
عضو جديد
الجنس : انثى

الجدي

عدد المساهمات : 74

نقاط النشاط : 114

السٌّمعَة : 10

بلد العضو :

العمر : 67

معاينة صفحة البيانات الشخصي للعضوhttp://alhoub.arab.st/
تمت المشاركة في الإثنين فبراير 22, 2016 4:15 pm
جزآڪ آللهـّ آلف خيّر


علىّـآ آلموٍِضوٍِع آلمفيد وٍِ


آلرآئع بآرٍِڪ آللهـّ فيڪ
التوقــيـــــــــــــــــــــع

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

زائر
زائر
تمت المشاركة في الجمعة مايو 06, 2016 9:09 am
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي

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

avatar
عضو جديد
الجنس : ذكر

العذراء

عدد المساهمات : 43

نقاط النشاط : 95

السٌّمعَة : 10

بلد العضو :

العمر : 18

معاينة صفحة البيانات الشخصي للعضوhttp://egyptian10.forumegypt.net/
تمت المشاركة في الأحد مايو 08, 2016 10:16 pm
موضوع فى غاية الروعة
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
Propellerads                                                                           Propellerads