شرح طريقة عمل منطقة بحث بتقنية css3

[Chakira]

http://www.dzbatna.com/images/icons/icon26.gif ط´ط±ط* ط¹ظ…ظ„ ظ…ظ†ط·ظ‚ط© ط¨ط*ط« ط¨طھظ‚ظ†ظٹط© css3 (http://www.dzbatna.com/t1987036/)




http://upload.dzbatna.net/upfiles/VHc31602.png

الحمد لله الواحدِ الأحدِ الفردِ الصمد الذي لم يلد ولم يولد ولم يكن له كفواً أحد

صاحبِ المننِ السابغة والآلاءِ الوازعة والرحمةِ الواسعة والقدرةِ الجامعة

والنعمِ الجسيمة والعطايا الجزيلة الذي سما في العزِ ففاتَ نواظرَ الأبصارِ

ودنا في اللطفِ فجازَ هواجزَ الأفكار الذي توحدَ بالملكِ فلا ندَ له في ملكوتِ

سلطانه وتفرّد بالآلاءِ والكبرياء فلا ضدَ له في جبروتِ شأنه الذي حارت في

كبرياءِ هيبتهِ دقائقُ لطائفِ الأنام الذي خضعتِ الرقابُ لعظمته ووجِلتِ القلوبُ

من خيفته وعنتِ الوجوهُ لهيبته وصلِّ اللهم على حبيبك وخيرتك من خلقك

سيدِ المرسلين محمد بن عبد الله صلى الله عليه وآله وسلم الدليلِ إليك في

الليلِ الأليل والماسكِ من أسبابك بحبلِ الشرف الأطول والناصعِ الحَسب في

ذَروةِ الكاهلِ الأعبل والثابت القَدَم على زحاليفها في الزمن الأول وعلى آله

وصحبه الأخيار المصطفِين الأبرار

http://upload.dzbatna.net/upfiles/fnZ31730.png

::مقدمة الموضوع::

اليوم مع افضل موضوع لي في هذا القسم

الكود code حصري لمعهد العباقرة , معهد الأساطير

معهد الأحباب, والأصحاب والأصدقاء

معهد العائلة الواحدة, والأسرة المترابطة

أهدي موضوعي هذا لكل من زاره ونوره بطلته

أهديه للأخوان والأصدقاء إن شاء الله


http://upload.dzbatna.net/upfiles/fnZ31730.png

::متطلبات الكود code::

دعوة صالحة في ظهر الغييب بالتوفيق في حياتي العلمية والعملية

http://upload.dzbatna.net/upfiles/fnZ31730.png

::مميزات الكود code ::

1- خفيف التصفح جداً .

2- مصنوع بالجكوزي + css.

3- يُناسب جميع الإتصالات .

4- مُناسب لمُحركات البحث .

5- ألوانه الخفيفة على العين .

6- متوافق مع المعايير القياسية .

6-لا ياثر علي سرعه المنتدي .

http://upload.dzbatna.net/upfiles/fnZ31730.png

::تركيب install الكود code ::


شرح طريقة التركيب install لمنتديات الفي بي


1. انسخ الكود code التالي ثم الصق فى اخر قالب template الهيدر header او اى مكان تريده

رمز PHP:

<code style="white-space:nowrap"> <code> <form action="search.php?do=process" method="get">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<p><input type="text" name="query" placeholder="ادخل كلمات البحث" id="search" required></p>
<p><input type="submit" value="ابحث" id="submit"></p>
</form>
</code> </code>

2. انسخ اكواد CSS التالي ثم الصق فى تعاريف CSS الإضافية
رمز PHP:

<code style="white-space:nowrap"> <code> /* مربع البحث */
.form-wrapper {
width:450px; /* مقاس العرض */
padding:8px;
margin:20px auto;
overflow:hidden;
background:#f3f3f3; /* لون خلفية */
/* منحني */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
/* ظل الخلفية */
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 15px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}

.form-wrapper p {
margin:0px;
padding:0px;
}

/* كتابة البحث */
.form-wrapper #search {
width:330px; /* مقاس العرض */
height:20px; /* مقاس الطول */
padding:10px 5px;
float:right;
font:12pt Tahoma; /* نوع وحجم الخط */
border:1px solid #bababa; /* حدود الخلفية */
text-align:right;
background:#e7e7e7; /* لون الخلفية */
color:#999; /* لون الخط */
/* عمل ظل الخلفية داخلي */
-moz-box-shadow: inset 0px 0px 10px 0px #d0d0d0;
-webkit-box-shadow: inset 0px 0px 15px 0px #d0d0d0;



box-shadow: inset 0px 0px 10px 0px #d0d0d0;
}

/* كتابة البحث عند الضغط بالماوس */
.form-wrapper #search:focus {
outline:0;
border-color:#ccc;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}

/* زر ابحث */
.form-wrapper #submit {
float:left;
width:100px; /* مقاس العرض */
height:42px; /* مقاس الطول */
padding:0;
cursor:pointer;
font:bold 12pt Arial; /* نوع وحجم الخط */
color:#fafafa; /* لون الخط */
text-transform:uppercase;
background:#af3131; /* لون الخلفية */
border:1px solid #932929; /* حدود الخلفية */
}

/* زر ابحث عند الضغط بالماوس */
.form-wrapper #submit:hover, .form-wrapper #submit:focus {
background-color: #932929; /* لون الخلفية */
border:1px solid #af3131; /* حدود الخليفة */
}

.form-wrapper #submit:active {
-moz-box-shadow: inset 0px 0px 10px 0px #320f0f;
-webkit-box-shadow: inset 0px 0px 15px 0px #320f0f;
box-shadow: inset 0px 0px 10px 0px #320f0f;
}
</code> </code>



شرح طريقة التركيب install للمواقع

1-ضع الكود code التالي في اي مكان تريد ولكن يفضل قبل كلمة </head>

رمز PHP:

<code style="white-space:nowrap"> <code> <form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<input type="text" name="s" id="search" placeholder="ادخل كلمات البحث" required>
<input type="submit" value="go" id="submit">
</form> </code> </code>

2- انسخ اكواد CSS التالي ثم الصق اخر فى ملف style.css &quot;ملف الcss حق موقعك&quot;

رمز PHP:

<code style="white-space:nowrap"> <code> /* مربع البحث */
.form-wrapper {
width:450px; /* مقاس العرض */
padding:8px;
margin:20px auto;
overflow:hidden;
background:#f3f3f3; /* لون خلفية */
/* منحني */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
/* ظل الخلفية */
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 15px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}

.form-wrapper p {
margin:0px;
padding:0px;
}

/* كتابة البحث */
.form-wrapper #search {
width:330px; /* مقاس العرض */
height:20px; /* مقاس الطول */
padding:10px 5px;
float:right;
font:12pt Tahoma; /* نوع وحجم الخط */
border:1px solid #bababa; /* حدود الخلفية */
text-align:right;
background:#e7e7e7; /* لون الخلفية */
color:#999; /* لون الخط */
/* عمل ظل الخلفية داخلي */
-moz-box-shadow: inset 0px 0px 10px 0px #d0d0d0;
-webkit-box-shadow: inset 0px 0px 15px 0px #d0d0d0;
box-shadow: inset 0px 0px 10px 0px #d0d0d0;
}

/* كتابة البحث عند الضغط بالماوس */
.form-wrapper #search:focus {
outline:0;
border-color:#ccc;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}

/* زر ابحث */
.form-wrapper #submit {
float:left;
width:100px; /* مقاس العرض */
height:42px; /* مقاس الطول */
padding:0;
cursor:pointer;
font:bold 12pt Arial; /* نوع وحجم الخط */
color:#fafafa; /* لون الخط */
text-transform:uppercase;
background:#af3131; /* لون الخلفية */
border:1px solid #932929; /* حدود الخلفية */
}

/* زر ابحث عند الضغط بالماوس */
.form-wrapper #submit:hover, .form-wrapper #submit:focus {
background-color: #932929; /* لون الخلفية */
border:1px solid #af3131; /* حدود الخليفة */
}

.form-wrapper #submit:active {
-moz-box-shadow: inset 0px 0px 10px 0px #320f0f;
-webkit-box-shadow: inset 0px 0px 15px 0px #320f0f;
box-shadow: inset 0px 0px 10px 0px #320f0f;
}
</code> </code>

http://upload.dzbatna.net/upfiles/fnZ31730.png

::الحقوق ::

حقوق التكويد محفوظة لاخي احمد حسين

كيفية عمل البحث فورم بتقنية CSS3 - معهد برامج فور يو (http://www.progs4u.net/ts/2014/11/coding-search-form-css3/)

http://upload.dzbatna.net/upfiles/fnZ31730.png

::الخاتمة ::

في نهاية الموضوع اتمني ان يكون عجبكم الكود code

الكود code متعوب فيه + تحضير الموضوع ايضا متعوب فيه

ما تنسوا تقييم + اعجاب http://www.dzbatna.com/images/smilies/tears.gif

http://upload.dzbatna.net/upfiles/fnZ31730.png

مع تحياتي حمودي

وشكرا

http://upload.dzbatna.net/upfiles/AeI32832.png







ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©